// diensten.jsx — Goudmeijer services page

const SERVICES = [
  {
    idx: "i",
    title: "Onafhankelijke waardebepaling",
    forWho: "Voor wie wil weten wat hij in handen heeft.",
    desc: "Een schriftelijk taxatierapport, opgesteld in onze taxatiekamer. Bruikbaar voor verkoop, verzekering of bij de notaris. Wij rekenen met de actuele LBMA-koers en houden rekening met stempel, vorm, edelstenen en zeldzaamheid.",
    inc: [
      "Visuele en spectraalanalyse",
      "Stempel- en hallmarkonderzoek",
      "Gewicht en dichtheidsmeting",
      "Schriftelijk rapport met foto's",
      "Mondelinge toelichting (30 min)",
    ],
    meta: [
      { k: "Duur", v: "45 — 90 min" },
      { k: "Tarief", v: "vanaf € 75,—" },
      { k: "Rapport", v: "binnen 3 dagen" },
    ],
  },
  {
    idx: "ii",
    title: "Verkoopbegeleiding",
    forWho: "Voor wie eerlijk wil verkopen — zonder zelf te onderhandelen.",
    desc: "Na de taxatie selecteren wij twee of drie inkopers die passen bij uw stuk. Wij vragen offertes op uw naam, onderhandelen mee en regelen de uitbetaling. U blijft eigenaar tot de overdracht. Gemiddeld leidt onze begeleiding tot 18% hogere opbrengst.",
    inc: [
      "Selectie van geschikte inkopers",
      "Offertes op uw naam",
      "Onderhandeling namens u",
      "Veilige overdracht & uitbetaling",
      "Volledige administratie",
    ],
    meta: [
      { k: "Duur", v: "1 — 3 weken" },
      { k: "Vergoeding", v: "10% van meerwaarde" },
      { k: "Voorwaarde", v: "No cure, no pay" },
    ],
  },
  {
    idx: "iii",
    title: "Erfenis & nalatenschap",
    forWho: "Voor families en notarissen die een collectie willen inventariseren.",
    desc: "Een volledige nalatenschap aan goud, zilver en sieraden — vaak gegroeid over generaties — vraagt om rust en zorgvuldigheid. Wij komen ter plaatse, inventariseren elk stuk apart en stellen één samenvattend rapport op. Geschikt voor verdeling, verkoop of de aangifte erfbelasting.",
    inc: [
      "Inventarisatie ter plaatse",
      "Individuele taxatie per stuk",
      "Fotodocumentatie",
      "Samenvattend rapport voor de notaris",
      "Optioneel: verkoopbegeleiding",
    ],
    meta: [
      { k: "Bezoek", v: "binnen 1 week" },
      { k: "Tarief", v: "op aanvraag" },
      { k: "Bereik", v: "heel Nederland" },
    ],
  },
  {
    idx: "iv",
    title: "Tweede mening",
    forWho: "Voor wie al een bod heeft — en wil weten of het klopt.",
    desc: "U heeft al een prijs gekregen van een inkoper, maar twijfelt of die eerlijk is. Wij geven binnen één werkdag een onafhankelijk oordeel — zonder dat de oorspronkelijke inkoper hoeft te weten dat u twijfelt. Vaak laten we zien dat er nog 10—30% bij kan.",
    inc: [
      "Beoordeling van het bod",
      "Inschatting reële opbrengst",
      "Advies: aannemen of doorvragen",
      "Optioneel: heronderhandeling",
    ],
    meta: [
      { k: "Doorlooptijd", v: "1 werkdag" },
      { k: "Tarief", v: "€ 95,—" },
      { k: "Format", v: "telefonisch of e-mail" },
    ],
  },
];

function ServiceRow({ s }) {
  return (
    <div className="svc-row reveal">
      <div className="wrap svc-row-inner">
        <div className="idx">{s.idx}.</div>
        <div>
          <span className="eyebrow">Dienst</span>
          <h2 style={{ marginTop: 16 }}>{s.title}</h2>
          <p className="for-who">Voor wie<span>{s.forWho}</span></p>
        </div>
        <div>
          <p className="desc">{s.desc}</p>
          <ul className="inc">
            {s.inc.map((it, i) => <li key={i}>{it}</li>)}
          </ul>
          <div className="meta-card">
            {s.meta.map((m, i) => (
              <div key={i}>
                <span className="k">{m.k}</span>
                <span className="v">{m.v}</span>
              </div>
            ))}
          </div>
          <div className="ctas">
            <a className="btn btn-primary" href="afspraak-maken.html">Afspraak maken <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="tel:038-4210688">Eerst even bellen</a>
          </div>
        </div>
      </div>
    </div>
  );
}

function PageHero() {
  return (
    <section className="page-hero">
      <div className="wrap grid">
        <div>
          <span className="eyebrow">Diensten</span>
          <h1 style={{ marginTop: 28 }}>
            Vier manieren<br />
            waarop wij <span className="em">aan uw kant</span> staan.
          </h1>
        </div>
        <div>
          <p className="lede">
            Of u nu een enkel sieraad wilt laten taxeren, een nalatenschap moet verdelen of een tweede mening zoekt over een bod — wij werken volgens hetzelfde principe: onafhankelijk, transparant, met vooraf afgesproken tarieven.
          </p>
          <div className="meta">
            <span>4 diensten</span>
            <span>Vanaf €75</span>
            <span>10 jaar specialist</span>
            <span>FGS-gecertificeerd</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Compare() {
  const rows = [
    { feat: "Eigen inkoop / belangenverstrengeling", us: false, dealer: true, online: true },
    { feat: "Vaste, vooraf bekende tarieven", us: true, dealer: false, online: false },
    { feat: "Schriftelijk taxatierapport", us: true, dealer: false, online: false },
    { feat: "Onderhandeling namens u", us: true, dealer: false, online: false },
    { feat: "Fysieke beoordeling bij u of bij ons", us: true, dealer: true, online: false },
    { feat: "Geschikt voor erfenis & notaris", us: true, dealer: false, online: false },
    { feat: "Geen verkoopdruk", us: true, dealer: false, online: false },
  ];
  return (
    <section className="compare">
      <div className="wrap">
        <span className="eyebrow">In vergelijking</span>
        <h2 style={{ marginTop: 18 }}>Waarin verschilt Goudmeijer van een goudinkoper?</h2>
        <table>
          <thead>
            <tr>
              <th></th>
              <th className="col-us">Goudmeijer</th>
              <th className="col-them">Goudinkoper</th>
              <th className="col-them">Online taxatie</th>
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                <td className="feat">{r.feat}</td>
                <td className={`mark ${r.us ? "" : "no"}`}>{r.us ? "•" : "—"}</td>
                <td className={`mark ${r.dealer ? "" : "no"}`}>{r.dealer ? "•" : "—"}</td>
                <td className={`mark ${r.online ? "" : "no"}`}>{r.online ? "•" : "—"}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function CTABanner() {
  return (
    <section style={{ padding: "120px 0", textAlign: "center", borderTop: ".5px solid var(--rule-soft)" }}>
      <div className="wrap">
        <span className="eyebrow">Klaar om te beginnen?</span>
        <h2 style={{ margin: "24px auto 0", maxWidth: "16ch" }}>
          Een rustig gesprek, <span className="italic">geen verkoopdruk</span>.
        </h2>
        <p style={{ margin: "24px auto 0", maxWidth: "48ch", fontFamily: "var(--serif)", fontSize: 21, lineHeight: 1.4, color: "var(--ink-2)" }}>
          Plan vrijblijvend een kennismakingsgesprek in onze taxatiekamer in Zwolle. Geen verplichtingen — alleen een eerlijk antwoord op uw vraag.
        </p>
        <div style={{ marginTop: 40, display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap" }}>
          <a className="btn btn-primary" href="afspraak-maken.html">Maak een afspraak <span className="arrow">→</span></a>
          <a className="btn btn-ghost" href="tel:038-4210688">Of bel 038 — 421 06 88</a>
        </div>
      </div>
    </section>
  );
}

function App() {
  useReveal();
  return (
    <>
      <TopStrip />
      <MainNav active="Diensten" />
      <PageHero />
      <div>
        {SERVICES.map((s) => <ServiceRow key={s.idx} s={s} />)}
      </div>
      <Compare />
      <CTABanner />
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);