/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSlider,
          I, CarMedia, Nav, Footer, FabWa, useReveal,
          INVENTORY, fmtPrice, fmtKm, fullModel, fullVariant, useInventory, submitLead, submitWeb3Form,
          useGoogleReviews */
const { useState, useEffect } = React;

/* ─── DATA ────────────────────────────────────────────────── */
/* FEATURED_CARS is derived inside <FeaturedAanbod /> via useInventory(). */

const SERVICES = [
  { n: "01", id: "inkoop",       title: "Inkoop & Verkoop", desc: "Verkoop je auto zonder gedoe — eerlijke prijs binnen 24 uur, direct uitbetaald." },
  { n: "02", id: "import",       title: "Import & Export",  desc: "Wij halen jouw droomauto uit het buitenland, BPM en papierwerk volledig geregeld." },
  { n: "03", id: "zoekopdracht", title: "Zoekopdracht",     desc: "Specifieke wagen op het oog? Wij vinden 'm — afgestemd op jouw wensen en budget." },
  { n: "04", id: "taxatie",      title: "Taxatie",          desc: "Onafhankelijke marktwaarde-bepaling met rapport — voor verkoop, verzekering of nalatenschap." },
];

const TRUST_POINTS = [
  { n: "01", title: "Volledig transparant",    desc: "Geen verborgen kosten of kleine lettertjes. Wat je ziet, is wat je betaalt — altijd." },
  { n: "02", title: "Persoonlijke begeleiding", desc: "Eén vast aanspreekpunt van eerste contact tot sleuteloverdracht. Wij kennen jouw dossier." },
  { n: "03", title: "Internationaal netwerk",   desc: "Direct contact met dealers en handelaren door heel Europa, BPM en papierwerk inbegrepen." },
  { n: "04", title: "BOVAG-niveau service",     desc: "Strikte voertuig-keuringen, garantie-opties en RDW-conforme afhandeling." },
];

/* ─── HERO ────────────────────────────────────────────────── */
function GoogleReviewBadge() {
  const { rating, ratingCount, url, configured, loading } = useGoogleReviews();
  const display = rating != null ? rating.toFixed(1).replace(".", ",") : "—";
  const stars = rating || 0;

  return (
    <a
      href={url || "#"}
      target="_blank"
      rel="noopener noreferrer"
      className="gbadge"
      aria-label="Bekijk onze Google reviews"
    >
      <div className="gbadge__head">
        <span className="gbadge__logo" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"/>
          </svg>
        </span>
        <div className="gbadge__head-text">
          <span className="gbadge__label">Google reviews</span>
          <span className="gbadge__live">
            <span className="gbadge__live-dot" />
            Live
          </span>
        </div>
      </div>

      <div className="gbadge__rating">
        <span className="gbadge__rating-num">{loading ? "…" : display}</span>
        <div className="gbadge__stars" style={{ "--star-fill": Math.min(5, stars) / 5 }}>
          {[0, 1, 2, 3, 4].map((i) => (
            <svg key={i} viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
          ))}
        </div>
      </div>

      <div className="gbadge__count">
        Gebaseerd op {ratingCount != null ? ratingCount.toLocaleString("nl-NL") : "—"} reviews
        <span className="gbadge__cta">Bekijk alle →</span>
      </div>
    </a>
  );
}

function Hero({ overlayOpacity, brightness }) {
  const videoRef = React.useRef(null);
  const [showFallback, setShowFallback] = React.useState(true);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const onPlaying = () => setShowFallback(false);
    const onStalled = () => setShowFallback(true);
    v.addEventListener("playing", onPlaying);
    v.addEventListener("pause", onStalled);
    v.addEventListener("error", onStalled);
    // Probeer expliciet af te spelen; in iPhone-energiebesparingsmodus wordt
    // autoplay geweigerd — dan blijft de backup-afbeelding staan.
    const p = v.play && v.play();
    if (p && typeof p.catch === "function") p.catch(() => setShowFallback(true));
    return () => {
      v.removeEventListener("playing", onPlaying);
      v.removeEventListener("pause", onStalled);
      v.removeEventListener("error", onStalled);
    };
  }, []);
  const heroUsps = [
    { icon: <I.shield />, title: "Eerlijke prijs",   sub: "Transparant, geen verborgen kosten" },
    { icon: <I.globe />,  title: "Import & export", sub: "BPM en papierwerk volledig geregeld" },
    { icon: <I.star />,   title: "4,9/5 reviews",   sub: "AutoScout24 · Marktplaats · Google" },
    { icon: <I.check />,  title: "Gevestigd in Ede", sub: "Op afspraak, snel bereikbaar" },
  ];
  return (
    <section
      className="hero"
      data-screen-label="01 Hero"
      style={{ "--hero-overlay": overlayOpacity, "--hero-video-bright": brightness }}
    >
      <div className="hero__bg">
        <div className="hero__motion" />
        <video ref={videoRef} className="hero__video" src="assets/hero.mp4" poster="assets/hero-poster.jpg" autoPlay muted loop playsInline preload="auto" />
        <img
          className={"hero__fallback" + (showFallback ? "" : " is-hidden")}
          src="assets/hero-poster.jpg"
          alt=""
          aria-hidden="true"
        />
      </div>
      <div className="hero__overlay" />
      <div className="hero__vignette" />

      <div className="container hero__content">
        <div>
          <span className="eyebrow">Abba Automotive · sinds 2021</span>
          <h1 className="hero__title" style={{ marginTop: 28 }}>
            De beste deal<br />
            voor <em>jouw</em> auto.
          </h1>
          <p className="hero__lede">
            Inkoop, verkoop en import/export met <strong>volledige transparantie</strong>.
            Persoonlijke service, eerlijke prijs, zorgeloos de weg op.
          </p>
          <div className="hero__ctas">
            <a href="Aanbod.html" className="btn btn--primary">
              Bekijk aanbod <span className="btn__arrow"><I.arrow /></span>
            </a>
            <a href="Contact.html" className="btn btn--ghost">Plan een afspraak</a>
          </div>
        </div>

        <div className="hero__meta">
          <ul className="hero__usps">
            {heroUsps.map((u, i) => (
              <li className="hero__usp" key={i}>
                <span className="hero__usp-icon" aria-hidden="true">{u.icon}</span>
                <div className="hero__usp-body">
                  <div className="hero__usp-title">{u.title}</div>
                  <div className="hero__usp-sub">{u.sub}</div>
                </div>
              </li>
            ))}
          </ul>
          <GoogleReviewBadge />
        </div>
      </div>
    </section>
  );
}

/* ─── USP STRIP ───────────────────────────────────────────── */
function UspStrip() {
  const items = [
    { icon: <I.shield />, title: "Eerlijke prijs",    sub: "Transparant, geen verborgen kosten" },
    { icon: <I.globe />,  title: "Import & export",  sub: "BPM en papierwerk volledig geregeld" },
    { icon: <I.star />,   title: "4,9/5 reviews",     sub: "AutoScout24 · Marktplaats · Google" },
    { icon: <I.check />,  title: "Gevestigd in Ede",  sub: "Op afspraak, snel bereikbaar" },
  ];
  return (
    <section className="usp">
      <div className="usp__row">
        {items.map((u, i) => (
          <div className="usp__cell" key={i}>
            <div className="usp__cell-title">{u.icon}<span>{u.title}</span></div>
            <div className="usp__cell-sub">{u.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ─── MERKEN STRIP ────────────────────────────────────────── */
const BRANDS = [
  { name: "Audi",          file: "assets/brands/audi.png" },
  { name: "BMW",           file: "assets/brands/bmw.png" },
  { name: "Kia",           file: "assets/brands/kia.png",           dark: true },
  { name: "Mercedes-Benz", file: "assets/brands/mercedes-benz.png" },
  { name: "Peugeot",       file: "assets/brands/peugeot.png",       dark: true },
  { name: "SEAT",          file: "assets/brands/seat.png",          dark: true },
  { name: "Volkswagen",    file: "assets/brands/volkswagen.png",    dark: true },
  { name: "Volvo",         file: "assets/brands/volvo.png" },
];

function BrandStrip() {
  // Dupliceer voor naadloze marquee-loop.
  const loop = [...BRANDS, ...BRANDS];
  return (
    <section className="brands" aria-label="Merken waarmee wij werken">
      <div className="container brands__head">
        <span className="eyebrow">Merken waarmee wij werken</span>
        <span className="brands__meta mono">
          {BRANDS.length} merken · doorlopend uitgebreid
        </span>
      </div>
      <div className="brands__rail" role="presentation">
        <div className="brands__track">
          {loop.map((b, i) => (
            <div
              className={"brand" + (b.dark ? " brand--dark" : "")}
              key={i}
              aria-hidden={i >= BRANDS.length}
              data-brand={b.name.toLowerCase().replace(/[^a-z]/g, "")}
              title={b.name}
            >
              <img src={b.file} alt={b.name} loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── AANBOD (nieuwste binnen) ────────────────────────────── */
function FeaturedAanbod() {
  const { cars, fromLive } = useInventory();
  // De 3 nieuwste auto's — exact dezelfde set die elders de "Nieuw binnen"-badge
  // krijgt (zie flagNewest in shared.jsx), zodat homepage en aanbod consistent zijn.
  const NEWEST = cars
    .filter((c) => c._isNew)
    .sort((a, b) => (b.voertuignr_hexon || 0) - (a.voertuignr_hexon || 0));
  return (
    <section id="aanbod" className="section" data-screen-label="02 Aanbod">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Net binnengekomen</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              De nieuwste auto's<br /> <em>vers</em> uit de voorraad.
            </h2>
            <p className="section__intro">
              Rechtstreeks uit onze live voorraad — zodra een auto wordt aangemeld,
              verschijnt hij hier. Elke wagen persoonlijk geïnspecteerd en klaar voor proefrit.
            </p>
          </div>
          <div className="section__head-right">
            <span className="live-badge">
              <span className="live-badge__dot" />
              Live voorraad
            </span>
            <a href="Aanbod.html" className="btn btn--ghost btn--sm">
              Volledig aanbod <span className="btn__arrow"><I.arrow /></span>
            </a>
          </div>
        </div>

        <div className="cars">
          {NEWEST.map((c) => (
            <article className="car" key={c.voertuignr_hexon}>
              <CarMedia label={fullModel(c)} car={c} />
              <span className="car__badge car__badge--live">
                <span className="car__badge-pulse" aria-hidden="true" />
                Nieuw binnen
              </span>
              <div className="car__body">
                <h3 className="car__title">{fullModel(c)}</h3>
                <div className="car__sub">{fullVariant(c)}</div>
                <div className="car__specs">
                  <div className="car__spec"><div className="car__spec-label">Carrosserie</div><div className="car__spec-value">{c.carrosserie}</div></div>
                  <div className="car__spec"><div className="car__spec-label">Bouwjaar</div><div className="car__spec-value">{c.bouwjaar}</div></div>
                  <div className="car__spec"><div className="car__spec-label">Brandstof</div><div className="car__spec-value">{c.brandstof}</div></div>
                  <div className="car__spec"><div className="car__spec-label">KM-stand</div><div className="car__spec-value">{fmtKm(c.tellerstand)}</div></div>
                </div>
                <div className="car__foot">
                  <div className="car__price"><small>Vanaf</small>{fmtPrice(c.verkoopprijs_particulier)}</div>
                  <a href={`Auto.html?id=${c.voertuignr_hexon}`} className="car__cta">Bekijk <span className="btn__arrow"><I.arrow /></span></a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── DIENSTEN ────────────────────────────────────────────── */
function Diensten() {
  return (
    <section id="diensten" className="diensten" data-screen-label="03 Diensten">
      <div className="container" style={{ paddingTop: "clamp(80px, 10vw, 140px)", paddingBottom: 0 }}>
        <div className="section__head reveal" style={{ marginBottom: 64 }}>
          <div>
            <span className="eyebrow">Diensten</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              Wat wij voor <em>jou</em><br /> kunnen betekenen.
            </h2>
            <p className="section__intro">
              Vier diensten, één aanpak: persoonlijk, transparant en met oog voor detail.
              Wij begeleiden je van eerste vraag tot sleuteloverdracht.
            </p>
          </div>
          <div className="section__head-right">
            <a href="Diensten.html" className="btn btn--ghost btn--sm">
              Alle diensten <span className="btn__arrow"><I.arrow /></span>
            </a>
          </div>
        </div>
      </div>
      <div className="services">
        {SERVICES.map((s, i) => (
          <div className="service reveal" key={i} style={{ transitionDelay: `${i * 60}ms` }}>
            <div className="service__num">{s.n}</div>
            <h3 className="service__title">{s.title}</h3>
            <p className="service__desc">{s.desc}</p>
            <a href={`Diensten.html?dienst=${s.id}#${s.id}`} className="service__cta">
              <span>Meer over {s.id}</span>
              <span className="btn__arrow"><I.arrow /></span>
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ─── TRUST ───────────────────────────────────────────────── */
function Trust() {
  return (
    <section className="section section--tight-bottom" data-screen-label="04 Waarom Abba">
      <div className="container">
        <div className="section__head reveal">
          <div>
            <span className="eyebrow">Waarom Abba</span>
            <h2 className="section__title" style={{ marginTop: 22 }}>
              Vertrouwen wordt<br /><em>verdiend</em>, niet beloofd.
            </h2>
          </div>
        </div>
        <div className="trust__grid">
          <div className="trust__copy reveal">
            <p className="trust__lede">
              Bij Abba Automotive draait alles om <em>vertrouwen, transparantie en service</em>.
            </p>
            <p className="trust__body">
              Met jarenlange ervaring in de autobranche en een passie voor kwaliteit zorgen wij
              ervoor dat élke klant met een goed gevoel wegrijdt. Geen verborgen kosten of loze
              beloftes — maar duidelijke afspraken, persoonlijke aandacht en een eerlijke prijs.
            </p>
            <div className="hero__ctas" style={{ marginTop: 8 }}>
              <a href="#" className="btn btn--ghost">Over ons verhaal <span className="btn__arrow"><I.arrow /></span></a>
            </div>
          </div>
          <div className="trust__points reveal">
            {TRUST_POINTS.map((p) => (
              <div className="trust__point" key={p.n}>
                <div className="trust__point-num">{p.n}</div>
                <div>
                  <div className="trust__point-title">{p.title}</div>
                  <div className="trust__point-desc">{p.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── NIEUWSBRIEF ────────────────────────────────────────── */
function Newsletter() {
  const [email, setEmail] = useState("");
  const [status, setStatus] = useState("idle"); // idle | sending | ok | err
  const submit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setStatus("err"); return; }
    setStatus("sending");
    const r = await submitWeb3Form({
      subject: "Nieuwe nieuwsbrief-inschrijving",
      from_name: "Nieuwsbrief",
      email,
      Inschrijving: email,
      message: `Nieuwe nieuwsbrief-inschrijving via de website: ${email}`,
    });
    setStatus(r && r.success ? "ok" : "err");
  };

  return (
    <section className="section" data-screen-label="05 Nieuwsbrief">
      <div className="container">
        <div className="newsletter reveal">
          <div>
            <h3 className="newsletter__title">Nieuw aanbod als <em>eerste</em> in je inbox.</h3>
            <p className="newsletter__sub">
              Schrijf je in voor onze nieuwsbrief — geen spam, alleen nieuwe occasions en exclusieve import-vondsten.
            </p>
          </div>
          {status === "ok" ? (
            <div className="newsletter__ok"><I.check /> Bedankt — je staat op de lijst.</div>
          ) : (
            <div className="newsletter__formwrap">
              <form className="newsletter__form" onSubmit={submit}>
                <input
                  type="email"
                  required
                  placeholder="jouw@email.nl"
                  value={email}
                  onChange={(e) => { setEmail(e.target.value); if (status === "err") setStatus("idle"); }}
                />
                <button type="submit" className="btn btn--primary btn--sm" disabled={status === "sending"}>
                  {status === "sending" ? "Bezig…" : <>Inschrijven <span className="btn__arrow"><I.arrow /></span></>}
                </button>
              </form>
              {status === "err" && (
                <p className="newsletter__err" role="alert">Controleer je e-mailadres en probeer het opnieuw.</p>
              )}
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ─── TWEAKS ──────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "gold",
  "displayFont": "sans",
  "heroOverlay": 0.55,
  "heroBright": 0.85
}/*EDITMODE-END*/;

function Tweaks({ children }) {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    document.body.dataset.palette = t.palette;
    document.body.dataset.displayFont = t.displayFont;
  }, [t.palette, t.displayFont]);

  return (
    <>
      {typeof children === "function" ? children(t) : children}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent">
          <TweakRadio
            label="Color" value={t.palette}
            options={[
              { value: "gold",   label: "Gold" },
              { value: "silver", label: "Silver" },
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
        </TweakSection>
        <TweakSection title="Typography">
          <TweakRadio
            label="Display font" value={t.displayFont}
            options={[
              { value: "sans",  label: "Sans (Bricolage)" },
              { value: "serif", label: "Serif (Instrument)" },
            ]}
            onChange={(v) => setTweak("displayFont", v)}
          />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakSlider
            label="Video overlay" value={t.heroOverlay}
            min={0} max={0.9} step={0.05}
            format={(v) => Math.round(v * 100) + "%"}
            onChange={(v) => setTweak("heroOverlay", v)}
          />
          <TweakSlider
            label="Video brightness" value={t.heroBright}
            min={0.6} max={1.6} step={0.05}
            format={(v) => Math.round(v * 100) + "%"}
            onChange={(v) => setTweak("heroBright", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

/* ─── APP ─────────────────────────────────────────────────── */
function App() {
  useReveal();
  return (
    <Tweaks>
      {(t) => (
        <>
          <Nav active="home" />
          <Hero overlayOpacity={t.heroOverlay} brightness={t.heroBright} />
          <BrandStrip />
          <FeaturedAanbod />
          <Diensten />
          <Trust />
          <Newsletter />
          <Footer />
          <FabWa />
        </>
      )}
    </Tweaks>
  );
}

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