/* global React, ReactDOM, I, CarMedia, Nav, Footer, FabWa, useReveal, submitLead */
const { useState } = React;

/* ─── DATA ───────────────────────────────────────────────────── */
const SERVICES = [
  {
    id: "inkoop",
    n: "01",
    image: "assets/inkoop-verkoop.jpg",
    title: "Inkoop & Verkoop",
    cta: "Verkoop mijn auto",
    pitch: "Verkoop je auto zonder gedoe — eerlijke prijs binnen 24 uur, direct uitbetaald.",
    intro:
      "Je auto verkopen is bij ons een kwestie van één telefoontje. Geen langslepende advertenties, geen onderhandelingen met onbekenden, geen rondje langs verschillende dealers voor de hoogste bieder. Wij geven binnen 24 uur een eerlijke prijs en betalen direct uit.",
    steps: [
      { n: "01", title: "Doe een aanvraag",   desc: "Stuur ons kenteken en foto's — telefonisch, WhatsApp of via het formulier." },
      { n: "02", title: "Eerlijke taxatie",   desc: "Binnen 24 uur ontvang je een marktconforme prijs, gebaseerd op kentekencheck en huidige marktdata." },
      { n: "03", title: "Inspectie ter plekke", desc: "Wij komen naar je toe of je komt langs in Ede. Controle van staat, KM-stand en historie." },
      { n: "04", title: "Direct uitbetaald",  desc: "Akkoord op de prijs? Geld op je rekening binnen één werkdag. Wij regelen de overschrijving." },
    ],
    includes: [
      "Eerlijke prijsindicatie binnen 24 uur",
      "Geen verborgen kosten of commissies",
      "Ophalen bij jou thuis mogelijk",
      "Overschrijving en vrijwaring volledig geregeld",
      "Inruil tegen een auto uit ons aanbod mogelijk",
      "Ook oudere auto's en auto's met schade",
    ],
  },
  {
    id: "import",
    n: "02",
    image: "assets/import-export.jpg",
    title: "Import & Export",
    cta: "Bespreek mijn import",
    pitch: "Wij halen jouw droomauto uit het buitenland — BPM en papierwerk volledig geregeld.",
    intro:
      "Niet elke auto staat in Nederland te koop tegen de juiste prijs. Wij hebben directe contacten in heel Europa — van Duitsland tot Italië — en halen specifieke auto's voor je in. BPM, importpapieren, RDW-keuring en transport regelen wij van A tot Z. Andersom werken we ook: jouw auto exporteren naar een internationale koper.",
    steps: [
      { n: "01", title: "Wensen bespreken", desc: "Welke auto, welk budget, welke uitvoering? We maken samen een zoekprofiel." },
      { n: "02", title: "Zoeken in netwerk", desc: "We tappen onze contacten in heel Europa aan en delen alle bevindingen met je." },
      { n: "03", title: "Bezichtiging & deal", desc: "Wij gaan ter plaatse kijken, of regelen een transparante deal op afstand met fotorapport." },
      { n: "04", title: "BPM & transport",  desc: "Alle papierwerk, BPM-berekening, transport en RDW-keuring nemen wij voor onze rekening." },
    ],
    includes: [
      "Directe contacten in Duitsland, België, Italië, Frankrijk",
      "BPM-berekening en aangifte volledig geregeld",
      "RDW-keuring en kenteken-aanvraag",
      "Transport door professionele autotransporteurs",
      "Transparante kostenopgave vooraf — geen verrassingen",
      "Export naar buitenland ook mogelijk",
    ],
  },
  {
    id: "zoekopdracht",
    n: "03",
    image: "assets/zoekopdracht.jpg",
    title: "Zoekopdracht",
    cta: "Plaats zoekopdracht",
    pitch: "Specifieke wagen op het oog? Wij vinden 'm — afgestemd op jouw wensen en budget.",
    intro:
      "Soms zit je droomauto niet zomaar ergens te koop. Een specifieke uitvoering, kleur, kilometerstand, prijsklasse — wij gaan voor je zoeken. Door onze contacten met dealers, handelaren en particulieren door heel Europa vinden we vaak auto's die niet eens openbaar geadverteerd staan.",
    steps: [
      { n: "01", title: "Briefing", desc: "We maken samen een gedetailleerd profiel: merk, model, uitvoering, jaar, KM, kleur, opties, budget." },
      { n: "02", title: "Actief zoeken", desc: "Wij zoeken proactief in ons netwerk, in marktplaatsen en bij handelaarsplatforms — vaak vóór het op de open markt komt." },
      { n: "03", title: "Voorselectie", desc: "Je krijgt alleen de matches die écht passen, met alle details, foto's en historie. Geen ruis." },
      { n: "04", title: "Afronding", desc: "Je kiest, wij regelen de aankoop, papierwerk en levering bij je thuis of bij ons op afspraak." },
    ],
    includes: [
      "Persoonlijk zoekprofiel afgestemd op je wensen",
      "Toegang tot off-market aanbod (niet openbaar)",
      "Eerlijke commissie, vooraf afgesproken",
      "Wij onderhandelen voor je — geen prijsspelletjes",
      "Volledige due diligence: historie, NAP, schadeverleden",
      "Wereldwijd netwerk via VWE en dealercontacten",
    ],
  },
  {
    id: "taxatie",
    n: "04",
    image: "assets/taxatie.jpg",
    title: "Taxatie",
    cta: "Vraag taxatie aan",
    pitch: "Onafhankelijke marktwaarde-bepaling met rapport — voor verkoop, verzekering of nalatenschap.",
    intro:
      "Of je nu je auto wilt verkopen, een claim wilt indienen, een nalatenschap moet afwikkelen of zekerheid wilt voor je verzekering — wij geven een onafhankelijke, schriftelijke taxatie volgens BOVAG-richtlijnen. Vrijblijvend en realistisch.",
    steps: [
      { n: "01", title: "Afspraak maken", desc: "Je belt of mailt — we plannen binnen een paar dagen een afspraak bij ons of bij jou." },
      { n: "02", title: "Inspectie", desc: "Visuele controle, kentekencheck, NAP-check, optie-inventarisatie en proefrit indien gewenst." },
      { n: "03", title: "Marktwaarde-bepaling", desc: "We vergelijken met actuele marktdata, recente verkopen en de specifieke staat van jouw auto." },
      { n: "04", title: "Rapport", desc: "Binnen 24 uur ontvang je een schriftelijk taxatierapport — bruikbaar voor verzekering, belasting of verkoop." },
    ],
    includes: [
      "Schriftelijk rapport binnen 24 uur",
      "BOVAG-conforme methodiek",
      "Marktwaarde + dagwaarde + nieuwwaarde",
      "Inclusief NAP-check en kentekenraadpleging",
      "Geldig voor verzekering, belasting, nalatenschap",
      "Vrijblijvend en transparant tarief",
    ],
  },
];

const FAQS = [
  {
    q: "Hoe snel kan ik mijn auto verkopen?",
    a: "Vaak binnen 1-2 werkdagen. Na de eerste inschatting komen we (of jij komt langs) voor een korte inspectie, en bij akkoord wordt het bedrag direct overgemaakt. We regelen ook de overschrijving en vrijwaring.",
  },
  {
    q: "Wat kost een import vanuit het buitenland?",
    a: "Naast de aankoopprijs reken je op BPM (varieert per auto), transport (€ 400-€ 900 afhankelijk van land), RDW-keuring en onze begeleidingsfee. Alles wordt vooraf transparant in een totaaloverzicht aangeboden — geen verrassingen achteraf.",
  },
  {
    q: "Werken jullie ook met particulieren bij een zoekopdracht?",
    a: "Ja zeker, juist voor particulieren. Een zoekopdracht is voor wie weet welke specifieke auto hij/zij wil, maar er geen tijd of netwerk voor heeft om hem zelf te vinden.",
  },
  {
    q: "Hoeveel kost een taxatie?",
    a: "Een standaard taxatie kost € 95 inclusief schriftelijk rapport. Wordt de auto vervolgens bij ons ingekocht of ingeruild, dan brengen we de taxatiekosten in mindering op de transactie.",
  },
  {
    q: "Bieden jullie garantie op verkochte auto's?",
    a: "Ja. Standaard krijg je 3 maanden BOVAG-garantie op alle verkochte auto's. Uitbreiden naar 6 of 12 maanden is mogelijk — bespreek dit voor aankoop.",
  },
  {
    q: "Kan ik mijn huidige auto inruilen?",
    a: "Absoluut. Inruil is altijd mogelijk en we doen ter plekke een eerlijke taxatie. De inruilwaarde verrekenen we direct met je nieuwe aankoop.",
  },
];

/* ─── COMPONENTS ─────────────────────────────────────────────── */

function ServiceVisual({ service }) {
  return (
    <div className={"service-page__visual " + (service.image ? "service-page__visual--photo" : "placeholder")}>
      {service.image
        ? <img src={service.image} alt={service.title} loading="lazy" />
        : <span className="placeholder__label">{service.title} · visual placeholder</span>}
      <div className="service-page__visual-num">{service.n}</div>
    </div>
  );
}

function ServiceSteps({ service }) {
  return (
    <div className="service-page__steps">
      <div className="service-page__steps-head">
        <span className="eyebrow">Hoe het werkt</span>
        <h3>Vier stappen, geen <em>verrassingen</em>.</h3>
      </div>
      <div className="service-page__steps-grid">
        {service.steps.map((s) => (
          <div className="service-page__step" key={s.n}>
            <div className="service-page__step-num">{s.n}</div>
            <h5>{s.title}</h5>
            <p>{s.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function ServiceBlock({ service, flip, showSteps = true }) {
  return (
    <section id={service.id} className={"service-page__block " + (flip ? "is-flip" : "") + (showSteps ? "" : " service-page__block--bodyonly")} data-screen-label={`Dienst · ${service.title}`}>
      <div className="container">
        <div className="service-page__block-grid">
          <ServiceVisual service={service} />

          <div className="service-page__block-body">
            <span className="eyebrow">Dienst {service.n}</span>
            <h2 className="service-page__title">{service.title}</h2>
            <p className="service-page__pitch">{service.pitch}</p>
            <p className="service-page__intro">{service.intro}</p>

            <div className="service-page__includes">
              <h4>Wat je krijgt</h4>
              <ul>
                {service.includes.map((it) => (
                  <li key={it}><I.check /> {it}</li>
                ))}
              </ul>
            </div>

            <div className="service-page__ctas">
              <a href="Contact.html" className="btn btn--primary">
                {service.cta} <span className="btn__arrow"><I.arrow /></span>
              </a>
              <a href="tel:+31649069000" className="btn btn--ghost">
                <I.phone /> Direct bellen
              </a>
            </div>
          </div>
        </div>

        {showSteps && <ServiceSteps service={service} />}
      </div>
    </section>
  );
}

function FaqItem({ q, a }) {
  const [open, setOpen] = useState(false);
  return (
    <div className={"faq__item " + (open ? "open" : "")}>
      <button className="faq__q" onClick={() => setOpen(!open)} aria-expanded={open}>
        <span>{q}</span>
        <span className="faq__icon" aria-hidden="true">+</span>
      </button>
      {open && <div className="faq__a">{a}</div>}
    </div>
  );
}

function DienstenPage() {
  useReveal();

  // Active chip detection: read ?dienst= from URL + ScrollSpy based on which
  // service block is currently in view. Both keep the sticky chip-strip in
  // sync so the visitor sees which section they're on.
  const [active, setActive] = React.useState(() => {
    const u = new URLSearchParams(window.location.search);
    return u.get("dienst") || (window.location.hash || "").replace("#", "") || SERVICES[0].id;
  });

  // Block ScrollSpy from overwriting the URL-driven initial selection until
  // the browser has had a moment to settle on the target section.
  const initialRef = React.useRef(true);

  React.useEffect(() => {
    // 1. The page is React-rendered, so the browser couldn't auto-scroll to
    //    the URL hash on first paint. Do that ourselves now that the blocks exist.
    const u = new URLSearchParams(window.location.search);
    const targetId = u.get("dienst") || (window.location.hash || "").replace("#", "");
    if (targetId) {
      const target = document.getElementById(targetId);
      if (target) {
        // Offset for fixed nav (80px) + sticky service-nav strip (~60px)
        const y = target.getBoundingClientRect().top + window.scrollY - 140;
        window.scrollTo({ top: y, behavior: "auto" });
      }
    }

    // 2. ScrollSpy — but only AFTER initial scroll settles, so it doesn't
    //    instantly reset the chip to whatever was at the top of the viewport.
    const blocks = SERVICES.map(s => document.getElementById(s.id)).filter(Boolean);
    if (!blocks.length) return;
    const io = new IntersectionObserver(
      (entries) => {
        if (initialRef.current) return;
        const visible = entries
          .filter(e => e.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
        if (visible && visible.target.id) setActive(visible.target.id);
      },
      { rootMargin: "-30% 0px -50% 0px", threshold: [0, 0.25, 0.5, 0.75] }
    );
    blocks.forEach(b => io.observe(b));

    const t = setTimeout(() => { initialRef.current = false; }, 800);

    return () => { io.disconnect(); clearTimeout(t); };
  }, []);

  return (
    <>
      <Nav active="diensten" />

      <header className="page-head" data-screen-label="Diensten · Header">
        <div className="container">
          <div className="crumb">
            <a href="index.html">Home</a>
            <span className="crumb__sep">/</span>
            <span className="crumb__current">Diensten</span>
          </div>
          <div className="page-head__inner">
            <h1 className="page-head__title">
              Vier diensten,<br/> één <em>aanpak</em>.
            </h1>
            <div className="page-head__meta">
              <p style={{ maxWidth: 420, color: "var(--fg-mute)", fontSize: 15, lineHeight: 1.55 }}>
                Persoonlijk, transparant en met oog voor detail. Wij begeleiden je van eerste vraag tot sleuteloverdracht — of dat nu een aankoop, verkoop, import of taxatie is.
              </p>
            </div>
          </div>
        </div>
      </header>

      {/* Sticky-scope: de dienstenbalk blijft alleen plakken zolang we binnen de
          dienstenblokken scrollen. Zodra je voorbij dienst 4 ("Hoe het werkt")
          bent, scrolt de balk vanzelf mee weg. */}
      <div className="diensten-scope">
        {/* Quick nav strip — anchor-links to each service */}
        <section className="service-nav">
          <div className="container">
            <div className="service-nav__inner">
              {SERVICES.map((s) => (
                <a
                  key={s.id}
                  href={"#" + s.id}
                  className={"service-nav__chip " + (active === s.id ? "active" : "")}
                  onClick={() => setActive(s.id)}
                >
                  <span className="service-nav__num">{s.n}</span>
                  <span className="service-nav__label">{s.title}</span>
                </a>
              ))}
            </div>
          </div>
        </section>

        {SERVICES.map((s, i) => (
          <ServiceBlock key={s.id} service={s} flip={i % 2 === 1} showSteps={i !== SERVICES.length - 1} />
        ))}
      </div>

      {/* De stappen van de laatste dienst staan BEWUST buiten .diensten-scope:
          hier laat de sticky dienstenbalk los en scrollt hij mee weg, zodat hij
          vanaf "Hoe het werkt" van dienst 4 niet meer in beeld blijft. */}
      <section
        className="service-page__tail-steps"
        data-screen-label={`Dienst · ${SERVICES[SERVICES.length - 1].title} · Hoe het werkt`}
      >
        <div className="container">
          <ServiceSteps service={SERVICES[SERVICES.length - 1]} />
        </div>
      </section>

      {/* FAQ */}
      <section className="section faq" data-screen-label="Diensten · FAQ">
        <div className="container">
          <div className="section__head reveal">
            <div>
              <span className="eyebrow">Vragen</span>
              <h2 className="section__title" style={{ marginTop: 22 }}>
                Veel gestelde<br /><em>vragen</em>.
              </h2>
            </div>
          </div>
          <div className="faq__list">
            {FAQS.map((f, i) => <FaqItem key={i} {...f} />)}
          </div>
        </div>
      </section>

      {/* Bottom CTA */}
      <section className="cta-block" data-screen-label="Diensten · CTA">
        <div className="container">
          <div className="cta-block__inner reveal">
            <div>
              <span className="eyebrow">Vrijblijvend gesprek</span>
              <h2 className="cta-block__title">
                Niet zeker welke <em>dienst</em><br/> bij jou past?
              </h2>
              <p className="cta-block__desc">
                Bel ons gewoon even — in 5 minuten weten we welke route voor jou de juiste is.
                Geen verkooppraatjes, alleen eerlijk advies.
              </p>
            </div>
            <div className="cta-block__actions">
              <a href="tel:+31649069000" className="btn btn--primary">
                <I.phone /> +31 6 49069000
              </a>
              <a href="https://wa.me/31649069000" className="contact__cta-wa">
                <I.whatsapp /> Stuur WhatsApp
              </a>
              <a href="Contact.html" className="btn btn--ghost">
                Stuur een bericht
              </a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <FabWa />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<DienstenPage />);