// app.jsx — Goudmeijer homepage

const { useState: useS } = React;

const PRICE_DATA = [123.40, 124.18, 123.92, 125.10, 124.62, 125.40, 125.66];
const DAYS = ["Wo", "Do", "Vr", "Za", "Zo", "Ma", "Di"];

// ─────── Hero variants ───────

function HeroEditorial() {
  return (
    <section className="hero reveal-root is-in">
      <div className="wrap hero-editorial is-in">
        <div>
          <span className="eyebrow hero-in">Onafhankelijk · sinds 2014</span>
          <h1 className="hero-in-d2" style={{ marginTop: 28 }}>
            Wat is uw<br />
            goud <span className="italic">werkelijk</span><br />
            waard?
          </h1>
          <p className="lede hero-in-d3">
            Voorkom een te laag bod. Wij bepalen de exacte waarde van uw goud, zilver en sieraden — en begeleiden u naar een eerlijke verkoop. Zonder zelf in te kopen.
          </p>
          <div className="cta-row hero-in-d4">
            <a className="btn btn-primary" href="afspraak-maken.html">Maak een afspraak <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="diensten.html">Onze diensten</a>
          </div>
        </div>
        <div className="portrait hero-in-d5" aria-hidden="true">
          <img src="assets/arthur.png" alt="Arthur Goudmeijer — taxateur" loading="eager" />
          <div className="stamp"><span>Eerlijke<br/>taxatie<br/>sinds &apos;14</span></div>
          <div className="caption">ARTHUR GOUDMEIJER — TAXATEUR</div>
        </div>
      </div>
    </section>
  );
}

function HeroTrust() {
  return (
    <section className="hero hero-trust">
      <div className="wrap">
        <span className="eyebrow hero-in">Voorkom een te laag bod</span>
        <h1 className="hero-in-d2" style={{ marginTop: 32 }}>
          De juiste prijs<br />
          voor een <span className="italic">eerlijke</span><br /> verkoop.
        </h1>
        <p className="lede hero-in-d3">
          Onafhankelijke taxatie en verkoopbegeleiding van goud, zilver en sieraden. Wij kopen zelf niet in — uw belang is ons enige belang.
        </p>
        <div className="cta-row hero-in-d4">
          <a className="btn btn-primary" href="afspraak-maken.html">Maak een afspraak <span className="arrow">→</span></a>
          <a className="btn btn-ghost" href="diensten.html">Onze diensten</a>
        </div>
        <div className="seal-row hero-in-d5">
          <div className="seal"><span className="num"><CountUp value={10} decimals={0} /><span style={{ color: "var(--gold-deep)" }}>j</span></span><span className="lbl">Specialist</span></div>
          <div className="seal"><span className="num">+<CountUp value={18} decimals={0} /><span style={{ color: "var(--gold-deep)" }}>%</span></span><span className="lbl">Hogere opbrengst</span></div>
          <div className="seal"><span className="num">€0</span><span className="lbl">Inkoopbelang</span></div>
          <div className="seal"><span className="num"><CountUp value={4.9} decimals={1} /><span style={{ color: "var(--gold-deep)" }}>★</span></span><span className="lbl">Klantbeoordeling</span></div>
        </div>
      </div>
    </section>
  );
}

function HeroPrice() {
  const cur = PRICE_DATA[PRICE_DATA.length - 1];
  const prev = PRICE_DATA[0];
  const delta = ((cur - prev) / prev) * 100;
  const isUp = delta >= 0;
  return (
    <section className="hero hero-price">
      <div className="wrap">
        <div className="top">
          <div>
            <span className="eyebrow">Goudprijs · 7 dagen · vandaag 19/05/26</span>
            <h1 style={{ marginTop: 22 }}>
              Een goede dag<br />om te <span className="italic">weten</span><br />wat u bezit.
            </h1>
          </div>
          <div className="right">
            BRON · LBMA AM FIX<br/>
            VALUTA · EUR/G<br/>
            BIJGEWERKT · 14:32
          </div>
        </div>

        <div className="panel">
          <div>
            <span className="eyebrow">24 karaat · per gram</span>
            <div className="num" style={{ marginTop: 14 }}>
              <span style={{ color: "var(--muted)", fontSize: 38, verticalAlign: "top", marginRight: 6 }}>€</span>
              <CountUp value={cur} decimals={2} />
            </div>
            <div className="unit">EUR / GRAM · 999.9</div>
            <div className={`delta ${isUp ? "up" : "down"}`}>
              <span>{isUp ? "▲" : "▼"}</span>
              <span>€{Math.abs(cur - prev).toFixed(2)} ({isUp ? "+" : ""}{delta.toFixed(2)}%) over 7 dagen</span>
            </div>
            <div style={{ marginTop: 32, display: "flex", gap: 12 }}>
              <a className="btn btn-primary" href="afspraak-maken.html">Maak een afspraak <span className="arrow">→</span></a>
            </div>
          </div>
          <div>
            <PriceChart data={PRICE_DATA} height={220} />
            <div className="xaxis">{DAYS.map((d, i) => <span key={i}>{d}</span>)}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCalc() {
  return (
    <section className="hero">
      <div className="wrap hero-calc">
        <div>
          <span className="eyebrow">Beleggingsgoud · oud goud · sieraden</span>
          <h1 style={{ marginTop: 28 }}>
            Reken in <span className="italic">één minuut</span> uit wat u bezit.
          </h1>
          <p className="lede">
            Vul karaat en gewicht in, en wij geven direct de geschatte marktwaarde — plus een eerlijke inkoop-indicatie. Geen verplichtingen.
          </p>
          <div className="cta-row" style={{ marginTop: 36, display: "flex", gap: 12 }}>
            <a className="btn btn-primary" href="afspraak-maken.html">Plan een fysieke taxatie <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="diensten.html">Onze diensten</a>
          </div>
        </div>
        <div className="calc-mount">
          <Calculator variant="mini" />
        </div>
      </div>
    </section>
  );
}

function Hero({ variant }) {
  if (variant === "trust") return <HeroTrust />;
  if (variant === "price") return <HeroPrice />;
  if (variant === "calc") return <HeroCalc />;
  return <HeroEditorial />;
}

// ─────── Sections ───────

function SplitIntro() {
  return (
    <section className="split-intro wrap reveal">
      <div className="left">
        <span className="eyebrow">Onze belofte</span>
        <h2>Onafhankelijk, transparant, in uw belang.</h2>
      </div>
      <div className="body">
        <p>
          <span className="drop">D</span>e meeste mensen verkopen hun goud te goedkoop omdat zij niet weten wat het écht waard is. Een sieraad dat in een laatje ligt, een muntenverzameling uit een nalatenschap, een armband die niet meer past — allemaal vaak méér waard dan een eerste bod doet vermoeden.
        </p>
        <p>
          Goudmeijer staat aan úw kant. Wij bepalen de waarde, leggen helder uit hoe wij tot dat bedrag komen, en begeleiden u — als u dat wenst — naar een verkoop bij de juiste partij. Wij kopen zelf niets in en hebben dus geen baat bij een lage prijs.
        </p>
      </div>
    </section>
  );
}

function PriceSection() {
  const cur = PRICE_DATA[PRICE_DATA.length - 1];
  const prev = PRICE_DATA[0];
  const delta = ((cur - prev) / prev) * 100;
  return (
    <section className="price-section reveal-root" id="prijs">
      <div className="wrap">
        <div className="price-head reveal">
          <div>
            <span className="eyebrow">Marktprijs · live</span>
            <h2 style={{ marginTop: 18 }}>De goudprijs vandaag.</h2>
          </div>
          <p style={{ maxWidth: "32ch", color: "var(--ink-2)", fontFamily: "var(--serif)", fontSize: 19, lineHeight: 1.4 }}>
            Wij rekenen altijd met de actuele LBMA-koers — niet met een tarief uit een folder.
          </p>
        </div>

        <div className="price-card reveal">
          <div className="left">
            <span className="now-label">Vandaag · 14:32</span>
            <div className="now">
              <span className="euro">€</span>
              <CountUp value={cur} decimals={2} />
            </div>
            <div className="unit">PER GRAM · 999.9</div>
            <div className="delta up">
              <span>▲ €{(cur - prev).toFixed(2)}</span>
              <span style={{ color: "var(--muted)" }}>+{delta.toFixed(2)}% / 7d</span>
            </div>
            <div className="switches">
              <span className="switch active">7d</span>
              <span className="switch">30d</span>
              <span className="switch">1j</span>
              <span className="switch">5j</span>
            </div>
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: ".5px solid var(--rule)" }}>
              <span className="now-label">Zilver · sterling</span>
              <div style={{ fontFamily: "var(--serif)", fontSize: 32, marginTop: 8 }}>€1,18<span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", marginLeft: 10, letterSpacing: ".1em" }}>/g</span></div>
            </div>
          </div>
          <div className="right">
            <PriceChart data={PRICE_DATA} height={240} />
            <div className="xaxis">{DAYS.map((d, i) => <span key={i}>{d}</span>)}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CalculatorSection() {
  return (
    <section className="calc-section reveal" id="calculator">
      <div className="wrap">
        <Calculator variant="full" />
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: "Stap i", title: "Kennismaking", body: "Een vrijblijvend gesprek in onze taxatiekamer, of bij u thuis. Wij bekijken samen wat u heeft en waarvoor u het laat taxeren.", dur: "30 min · gratis" },
    { n: "Stap ii", title: "Waardebepaling", body: "Stempelonderzoek, gewicht, dichtheidsmeting en spectraalanalyse. U krijgt een schriftelijk taxatierapport mee.", dur: "1 — 3 dagen" },
    { n: "Stap iii", title: "Verkoopadvies", body: "Helder advies: wat is uw goud waard, en waar krijgt u er het meest voor? Wij benoemen partijen — u kiest.", dur: "Inbegrepen" },
    { n: "Stap iv", title: "Begeleiding", body: "Optioneel: wij onderhandelen met de inkoper namens u en zorgen voor een veilige uitbetaling. Gemiddeld +18% opbrengst.", dur: "No cure, no pay" },
  ];
  return (
    <section className="process" id="werkwijze">
      <div className="wrap">
        <div className="process-head reveal">
          <div>
            <span className="eyebrow">Werkwijze</span>
            <h2 style={{ marginTop: 18 }}>Hoe wij voor u <span className="italic">aan het werk gaan</span>.</h2>
          </div>
          <p style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.4, color: "var(--ink-2)", maxWidth: "50ch" }}>
            Een rustig, gestructureerd proces. U weet vooraf wat u krijgt, wat het kost en wat u eraan heeft.
          </p>
        </div>
        <div className="process-list">
          {steps.map((s, i) => (
            <div key={i} className={`step reveal reveal-d${i + 1}`}>
              <span className="n">{s.n}</span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <span className="dur">{s.dur}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServicesTeaser() {
  const svcs = [
    { num: "01", title: "Waardebepaling", desc: "Een onafhankelijk taxatierapport, schriftelijk en met onderbouwing. Geschikt voor verkoop, verzekering of erfenis.", price: "vanaf €75" },
    { num: "02", title: "Verkoopbegeleiding", desc: "Wij selecteren de juiste inkoper voor uw stuk, onderhandelen mee en regelen de afhandeling. No cure, no pay.", price: "10% van meerwaarde" },
    { num: "03", title: "Nalatenschap", desc: "Hele collecties, erfenissen of complete kluizen. Wij komen langs, inventariseren ter plaatse en taxeren elk stuk afzonderlijk.", price: "op aanvraag" },
  ];
  return (
    <section className="services" id="diensten">
      <div className="wrap reveal">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 32, flexWrap: "wrap" }}>
          <div>
            <span className="eyebrow">Diensten</span>
            <h2 style={{ marginTop: 18, maxWidth: "16ch" }}>Drie manieren waarop wij u helpen.</h2>
          </div>
          <a href="diensten.html" style={{ fontSize: 14, borderBottom: ".5px solid var(--ink)", paddingBottom: 2 }}>Alle diensten →</a>
        </div>
        <div className="services-grid">
          {svcs.map((s, i) => (
            <div key={i} className={`svc lift reveal reveal-d${i + 1}`}>
              <span className="num">— {s.num}</span>
              <h3>{s.title}</h3>
              <p className="desc">{s.desc}</p>
              <span className="price">{s.price}</span>
              <a className="more" href="diensten.html">Lees meer <span style={{ fontStyle: "italic", fontFamily: "var(--serif)" }}>→</span></a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function QuoteSection() {
  return (
    <section className="quote-sect">
      <div className="wrap reveal">
        <span className="mark">“</span>
        <blockquote>
          Een eerste bod is zelden de juiste prijs. Geef uw goud de tijd om zijn waarde te tonen.
        </blockquote>
        <div className="attrib">
          <span>Arthur Goudmeijer</span>
          Taxateur — sinds 2014
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="about wrap reveal" id="over">
      <div className="photo">
        <img src="assets/arthur.png" alt="Arthur in de taxatiekamer" loading="lazy" />
        <div className="tag">ARTHUR · TAXATIEKAMER, ZWOLLE</div>
      </div>
      <div>
        <span className="eyebrow">Over Goudmeijer</span>
        <h2 style={{ marginTop: 18 }}>Tien jaar tussen goud, mensen en hun verhalen.</h2>
        <p>
          Goudmeijer is opgericht in 2014 door Arthur Goudmeijer, na vijftien jaar als juwelier en taxateur. De missie was eenvoudig: een plek bieden waar mensen écht weten wat hun goud waard is, zonder dat iemand er een belang bij heeft om het laag te houden.
        </p>
        <p>
          Inmiddels begeleiden we ruim 800 cliënten per jaar — van particulieren met een enkel sieraad tot families met een volledige nalatenschap.
        </p>
        <ul className="credentials">
          <li>FGS-gecertificeerd taxateur edele metalen</li>
          <li>Aangesloten bij FTMV — Federatie TMV</li>
          <li>Vermeld in De Telegraaf, RTL Z en BNR Nieuwsradio</li>
          <li>Eigen taxatiekamer in centrum Zwolle</li>
        </ul>
      </div>
    </section>
  );
}

function FAQSection() {
  const items = [
    { q: "Koopt u zelf goud in?", a: "Nee. Wij bepalen alleen de waarde en geven advies. Juist omdat wij geen inkoper zijn, kunnen wij volledig onafhankelijk in uw belang werken. Wij verdienen niets aan een lagere of hogere prijs." },
    { q: "Wat kost een taxatie?", a: "Een standaard taxatie van een enkel sieraad of munt kost €75. Voor een volledige collectie of nalatenschap maken we een vaste prijs op basis van omvang. U weet vooraf altijd wat u betaalt." },
    { q: "Hoe verloopt een verkoopbegeleiding?", a: "Na de taxatie selecteren wij twee of drie geschikte inkopers, vragen offertes op uw naam en onderhandelen indien gewenst mee. U beslist altijd zelf. Gemiddeld leidt onze begeleiding tot 18% hogere opbrengst — onze vergoeding is 10% van die meerwaarde." },
    { q: "Komt u ook bij mensen thuis?", a: "Ja — voor nalatenschappen, immobiele cliënten of grotere collecties komen wij graag langs. Binnen Zwolle kosteloos, daarbuiten tegen kilometervergoeding." },
    { q: "Wat doet u met edelstenen en bijzondere sieraden?", a: "Bij vermoeden van waarde betrekken wij een gediplomeerd gemmoloog. Voor antieke of design-stukken werken wij samen met een gespecialiseerd veilinghuis." },
  ];
  return (
    <section className="faq" id="faq">
      <div className="wrap reveal">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">Veelgestelde vragen</span>
            <h2 style={{ marginTop: 18 }}>Wat u kunt verwachten.</h2>
          </div>
          <FAQ items={items} />
        </div>
      </div>
    </section>
  );
}

function CTABanner() {
  return (
    <section className="cta-banner reveal">
      <div className="wrap">
        <span className="eyebrow" style={{ color: "rgba(250,246,233,.6)" }}>Klaar om te weten wat uw goud waard is?</span>
        <h2 style={{ marginTop: 24 }}>Een uur in Zwolle, een leven lang <span className="italic" style={{ color: "var(--gold)" }}>zekerheid</span>.</h2>
        <p className="lede">Plan een vrijblijvend kennismakingsgesprek. Geen verplichtingen, geen verkoopdruk — alleen een eerlijk antwoord op de vraag wat u in handen hebt.</p>
        <div className="btn-row">
          <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>
  );
}

// ─────────── App ───────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "editorial"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  return (
    <>
      <TopStrip />
      <MainNav />
      <Hero variant={t.hero} />
      <TrustStrip />
      <SplitIntro />
      <PriceSection />
      <CalculatorSection />
      <Process />
      <ServicesTeaser />
      <QuoteSection />
      <About />
      <FAQSection />
      <CTABanner />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero variant" />
        <TweakRadio
          label="Layout"
          value={t.hero}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "trust", label: "Trust" },
            { value: "price", label: "Live prijs" },
            { value: "calc", label: "Calculator" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />
        <p style={{ fontSize: 11, color: "rgba(41,38,27,.55)", lineHeight: 1.5, margin: "6px 0 0" }}>
          Vier varianten van de eerste schermvulling: editoriaal portret, trust-statement, live goudprijs, of calculator-first.
        </p>
      </TweaksPanel>
    </>
  );
}

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