/* global React, Logo, Icon, Button, Badge, Card, Reveal, CountUp, WordReveal */
const { useState: useStateHS, useEffect: useEffectHS } = React;

/* ============== HERO MOCK — dossier workflow with 5-step sidebar (animated loop) ============== */
function ProductMockDossier() {
  const stepLabels = ["Anonimisering", "AI-samenvatting", "Personalisatie", "Eindcontrole", "Oplevering"];
  const STEP_MS = 2200;          // duration each step is "active"
  const TRANSITION_MS = 600;     // crossfade between text states
  const DONE_HOLD_MS = 2000;     // pause on the "klaar" state before restart

  // active = 0..4 = step in progress; 5 = brief "klaar" hold; -1 = initial
  const [active, setActive] = useStateHS(0);
  const [progress, setProgress] = useStateHS(0); // 0..1 across the entire flow

  useEffectHS(() => {
    const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduced) { setActive(3); setProgress(0.7); return; }

    let raf;
    let start = performance.now();
    const totalActiveMs = STEP_MS * 5;
    const cycleMs = totalActiveMs + DONE_HOLD_MS;

    const tick = (now) => {
      const elapsed = (now - start) % cycleMs;
      if (elapsed >= totalActiveMs) {
        setActive(5);
        setProgress(1);
      } else {
        const idx = Math.floor(elapsed / STEP_MS);
        setActive(idx);
        // smooth global progress: map elapsed -> 0..1, ease into each step
        setProgress(elapsed / totalActiveMs);
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const steps = stepLabels.map((label, i) => ({
    label,
    done: active === 5 ? true : i < active,
    active: active === 5 ? false : i === active,
  }));

  // Smooth metrics — interpolated based on progress (0..1) so they feel continuous.
  // Doorlooptijd ramps to 46u total (3 werkdagen ≈ 24 werkuren over 3 dagen).
  // Events ramp to 23.
  const totalEvents = 23;
  const totalHours = 46;

  // gentle ease so numbers don't tick linearly
  const easedProgress = 1 - Math.pow(1 - progress, 1.6);
  const liveEvents = Math.round(easedProgress * totalEvents);
  const liveHours = Math.round(easedProgress * totalHours);

  // metric display values
  const metricByStep = {
    p: 247,
    e: liveEvents,
    t: active < 1 ? "—" : `${liveHours}u`,
  };

  const stepNum = active === 5 ? 5 : active + 1;
  const currentLabel = active === 5 ? "Klaar voor oplevering" : `${stepLabels[active]}`;
  const stepDescriptions = [
    "Patiëntgegevens worden handmatig verwijderd voordat AI iets ziet.",
    "AI destilleert honderden pagina's tot een gestructureerde tijdlijn.",
    "De samenvatting wordt afgestemd op uw specifieke vraagstelling.",
    "Een tweede paar ogen controleert volledigheid en bronverwijzingen.",
    "Het definitieve document wordt veilig naar u opgeleverd.",
    "Alle stappen voltooid. Het dossier is klaar.",
  ];

  return (
    <div className="dossier-mock" style={{
      background: "#fff",
      border: "1px solid rgba(0,0,0,0.06)",
      borderRadius: 18,
      boxShadow: "rgba(0,0,0,0.04) 0px 12px 32px, rgba(0,0,0,0.02) 0px 2px 6px",
      overflow: "hidden",
      width: "100%",
      maxWidth: 880,
      margin: "0 auto",
      textAlign: "left"
    }}>
      {/* window chrome */}
      <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "12px 16px", borderBottom: "1px solid rgba(0,0,0,0.05)", background: "#fafafa" }}>
        <span style={{ width: 9, height: 9, borderRadius: 9999, background: "#e5e5e5" }} />
        <span style={{ width: 9, height: 9, borderRadius: 9999, background: "#e5e5e5" }} />
        <span style={{ width: 9, height: 9, borderRadius: 9999, background: "#e5e5e5" }} />
        <span style={{ flex: 1 }} />
        <span className="mock-url" style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, color: "#888", letterSpacing: "0.6px", textTransform: "uppercase", fontWeight: 600 }}>Dossier 2026-0431</span>
        <span style={{ width: 6, height: 6, borderRadius: 9999, background: active === 5 ? "#18E299" : "#18E299", marginLeft: 10, animation: active === 5 ? "none" : "pulse-dot 1.4s ease-in-out infinite" }} />
      </div>

      {/* progress bar — smooth fill across all steps */}
      <div style={{ height: 2, background: "rgba(0,0,0,0.04)", position: "relative" }}>
        <div style={{
          position: "absolute", inset: 0, right: "auto",
          width: `${Math.max(2, progress * 100)}%`,
          background: "linear-gradient(90deg, #18E299, #0fa76e)",
          transition: "width 600ms cubic-bezier(.4,0,.2,1)",
        }} />
      </div>

      {/* sidebar + main */}
      <div className="mock-grid" style={{ display: "grid", gridTemplateColumns: "240px 1fr" }}>
        {/* sidebar — 5 steps */}
        <div className="mock-sidebar" style={{ padding: "28px 20px", borderRight: "1px solid rgba(0,0,0,0.05)", background: "#fafafa" }}>
          <div style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.6px", color: "#888", marginBottom: 18 }}>Werkwijze</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {steps.map((s, i) =>
            <div key={s.label} style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "10px 10px",
              borderRadius: 10,
              background: s.active ? "#fff" : "transparent",
              border: s.active ? "1px solid rgba(0,0,0,0.06)" : "1px solid transparent",
              boxShadow: s.active ? "0 1px 2px rgba(0,0,0,0.03)" : "none"
            }}>
                <span style={{
                flexShrink: 0,
                position: "relative",
                width: 20, height: 20, borderRadius: 9999,
                background: s.done ? "#18E299" : "#fff",
                border: s.done ? "none" : `1.5px solid ${s.active ? "#0d0d0d" : "#d4d4d4"}`,
                display: "inline-flex", alignItems: "center", justifyContent: "center",
                fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, fontWeight: 700,
                color: s.active ? "#0d0d0d" : "#888",
                transition: "background 400ms ease, border-color 400ms ease, color 400ms ease",
              }}>
                  {s.active && (
                    <span style={{
                      position: "absolute", inset: -4, borderRadius: 9999,
                      border: "2px solid #0d0d0d", opacity: 0.18,
                      animation: "pulse-ring 1.5s ease-out infinite",
                    }} />
                  )}
                  {s.done ? <Icon name="check" size={12} stroke={3} color="#0d0d0d" /> : i + 1}
                </span>
                <span style={{
                fontFamily: "Inter, system-ui, sans-serif",
                fontSize: 14,
                color: s.done || s.active ? "#0d0d0d" : "#888",
                fontWeight: s.active ? 600 : s.done ? 500 : 400
              }}>{s.label}</span>
              </div>
            )}
          </div>
        </div>

        {/* main — current step focus */}
        <div className="dossier-mock-body" style={{ padding: "32px 36px", display: "flex", flexDirection: "column" }}>
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 24 }}>
            <div style={{ minHeight: 56, position: "relative", flex: 1 }}>
              <div style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, color: "#888", letterSpacing: "0.6px", fontWeight: 600, textTransform: "uppercase", marginBottom: 6 }}>
                {active === 5 ? "Voltooid" : `Stap ${stepNum} van 5`}
              </div>
              {/* crossfade: stack states absolutely so transition is smooth */}
              <div style={{ position: "relative", minHeight: 28 }}>
                {[...stepLabels, "Klaar voor oplevering"].map((label, idx) => (
                  <div key={idx} style={{
                    position: idx === 0 ? "relative" : "absolute",
                    inset: idx === 0 ? "auto" : 0,
                    fontFamily: "Inter, system-ui, sans-serif", fontSize: 22, fontWeight: 600,
                    color: "#0d0d0d", letterSpacing: "-0.4px", lineHeight: 1.2,
                    opacity: active === idx ? 1 : 0,
                    transform: active === idx ? "translateY(0)" : (active > idx ? "translateY(-6px)" : "translateY(6px)"),
                    transition: "opacity 500ms cubic-bezier(.4,0,.2,1), transform 500ms cubic-bezier(.4,0,.2,1)",
                    pointerEvents: "none",
                  }}>{label}</div>
                ))}
              </div>
            </div>
            <span style={{
              flexShrink: 0, fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, fontWeight: 600,
              padding: "5px 11px", borderRadius: 9999,
              background: active === 5 ? "#d4fae8" : "#fff4e0",
              color: active === 5 ? "#0fa76e" : "#c37d0d",
              letterSpacing: "0.6px", textTransform: "uppercase",
              transition: "background 400ms ease, color 400ms ease",
            }}>{active === 5 ? "Klaar" : "Bezig"}</span>
          </div>

          {/* description — also crossfades smoothly */}
          <div style={{ position: "relative", minHeight: 44, marginBottom: 24 }}>
            {stepDescriptions.map((desc, idx) => (
              <p key={idx} style={{
                position: idx === 0 ? "relative" : "absolute",
                inset: idx === 0 ? "auto" : 0,
                fontFamily: "Inter, system-ui, sans-serif", fontSize: 14, color: "#525252",
                lineHeight: 1.6, margin: 0,
                opacity: active === idx ? 1 : 0,
                transform: active === idx ? "translateY(0)" : (active > idx ? "translateY(-4px)" : "translateY(4px)"),
                transition: "opacity 600ms cubic-bezier(.4,0,.2,1), transform 600ms cubic-bezier(.4,0,.2,1)",
                pointerEvents: "none",
              }}>{desc}</p>
            ))}
          </div>

          {/* metrics grid */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: "auto" }}>
            {[
            { k: "Pagina's", v: metricByStep.p },
            { k: "Events", v: metricByStep.e },
            { k: "Doorlooptijd", v: metricByStep.t }].
            map((mm) =>
            <div key={mm.k} style={{ padding: "14px 16px", background: "#fafafa", borderRadius: 10, border: "1px solid rgba(0,0,0,0.04)" }}>
                <div style={{
                  fontFamily: "Inter, system-ui, sans-serif", fontSize: 22, fontWeight: 600,
                  color: "#0d0d0d", letterSpacing: "-0.4px", lineHeight: 1.1,
                  fontVariantNumeric: "tabular-nums",
                  transition: "color 300ms ease",
                }}>{mm.v}</div>
                <div style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 9, color: "#888", textTransform: "uppercase", letterSpacing: "0.6px", fontWeight: 600, marginTop: 4 }}>{mm.k}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>);

}

/* ============== HERO ============== */
function HomeHero() {
  return (
    <section className="hero-section" style={{
      position: "relative",
      padding: "88px 24px 48px",
      background: "radial-gradient(60% 80% at 50% 0%, rgba(24,226,153,0.20) 0%, rgba(24,226,153,0.05) 38%, transparent 70%), #ffffff",
      textAlign: "center",
      overflow: "hidden"
    }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{
          marginBottom: 24, display: "inline-flex",
          opacity: 0, animation: "fade-in-up 800ms cubic-bezier(.2,.8,.2,1) 100ms forwards",
        }}>
          <Badge tone="brand" icon="sparkles">Medische dossiersamenvattingen</Badge>
        </div>
        <h1 style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: "clamp(30px, 6.2vw, 68px)",
          fontWeight: 600, lineHeight: 1.06, letterSpacing: "-1.4px",
          color: "#0d0d0d", margin: 0, textWrap: "balance",
          overflowWrap: "break-word",
          hyphens: "auto",
        }}>
          <WordReveal text={"Medische dossiersamenvattingen,\nbinnen 3 werkdagen."} delay={250} stagger={75} duration={900} />
        </h1>
        <p style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: 19, fontWeight: 400, lineHeight: 1.55,
          color: "#525252", maxWidth: 660, margin: "20px auto 32px",
          textWrap: "pretty",
          opacity: 0, animation: "fade-in-up 900ms cubic-bezier(.2,.8,.2,1) 900ms forwards",
        }}>
          Wij anonimiseren elk dossier handmatig en laten AI samenvatten — zodat u zich op de inhoud richt.
        </p>
        <div className="hero-cta" style={{
          display: "inline-flex", gap: 10, flexWrap: "wrap", justifyContent: "center", marginBottom: 56,
          opacity: 0, animation: "fade-in-up 900ms cubic-bezier(.2,.8,.2,1) 1100ms forwards",
        }}>
          <Button variant="primary" size="lg" href="contact.html">Vraag een demo aan</Button>
          <Button variant="secondary" size="lg" icon="arrow-right" href="#werkwijze">Hoe het werkt</Button>
        </div>

        <Reveal delay={1300} style={{ position: "relative" }}>
          <ProductMockDossier />
        </Reveal>
      </div>
    </section>);

}

/* ============== TRUST BAR ============== */
function TrustBar() {
  const items = ["Achmea", "ASR", "Nationale Nederlanden", "DAS", "Univé", "Centraal Beheer"];
  return (
    <section style={{ padding: "24px 24px 48px", background: "#fff" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.8px", color: "#888", marginBottom: 24 }}>
          Vertrouwd door medisch adviseurs van
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "24px 56px", opacity: 0.7 }}>
          {items.map((name) =>
          <span key={name} style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 16, fontWeight: 600, color: "#525252", letterSpacing: "-0.2px" }}>{name}<span style={{ color: "#bbb", marginLeft: 8, fontWeight: 400 }}>· placeholder</span></span>
          )}
        </div>
      </div>
    </section>);

}

/* ============== FEATURE WITH SCREENSHOT (alternates) ============== */
function FeatureRow({ eyebrow, title, body, bullets, image, reverse = false }) {
  return (
    <div className="feature-row" style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center",
      direction: reverse ? "rtl" : "ltr"
    }}>
      <div style={{ direction: "ltr" }}>
        {eyebrow && <Badge tone="brand">{eyebrow}</Badge>}
        <h3 style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: "clamp(28px, 3.2vw, 36px)", fontWeight: 600,
          lineHeight: 1.15, letterSpacing: "-0.6px",
          color: "#0d0d0d", margin: "16px 0 12px", textWrap: "balance"
        }}>{title}</h3>
        <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 16, lineHeight: 1.55, color: "#525252", margin: 0, maxWidth: 480 }}>{body}</p>
        <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
          {bullets.map((b) =>
          <li key={b} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
              <span style={{ width: 22, height: 22, borderRadius: 9999, background: "#d4fae8", flexShrink: 0, display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
                <Icon name="check" size={13} stroke={2.5} color="#0fa76e" />
              </span>
              <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 15, color: "#0d0d0d", lineHeight: 1.5 }}>{b}</span>
            </li>
          )}
        </ul>
      </div>
      <div style={{ direction: "ltr" }}>{image}</div>
      <style>{`
        @media (max-width: 860px) {
          .feature-row { grid-template-columns: 1fr !important; gap: 32px !important; direction: ltr !important; }
        }
      `}</style>
    </div>);

}

/* === MOCK 2: Anonimiseer-stap (showing redaction) === */
function ProductMockAnonymize() {
  const lines = [
  { t: "Patiënt: ", red: "[NAAM]" },
  { t: "BSN ", red: "[•••••••••]" },
  { t: "Arts: dr. ", red: "[NAAM]" }];

  return (
    <div style={{ background: "#fff", border: "1px solid rgba(0,0,0,0.06)", borderRadius: 18, boxShadow: "rgba(0,0,0,0.04) 0px 8px 24px", padding: 28 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20, paddingBottom: 14, borderBottom: "1px solid rgba(0,0,0,0.05)" }}>
        <span style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.6px", color: "#525252" }}>Anonimisering</span>
        <span style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, fontWeight: 600, padding: "3px 10px", borderRadius: 9999, background: "#d4fae8", color: "#0fa76e", letterSpacing: "0.6px", textTransform: "uppercase" }}>handmatig</span>
      </div>
      <div style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 14, lineHeight: 2.1, color: "#0d0d0d" }}>
        {lines.map((l, i) =>
        <div key={i}>
            {l.t}<span style={{ background: "#0d0d0d", color: "#0d0d0d", borderRadius: 4, padding: "0 8px" }}>{l.red}</span>
          </div>
        )}
      </div>
    </div>);

}

/* === MOCK 3: AI samenvatting timeline === */
function ProductMockTimeline() {
  const events = [
  { d: "12-03-2024", t: "Eerste consult huisarts", k: "consult" },
  { d: "04-05-2024", t: "Verwijzing fysiotherapie", k: "verwijzing" },
  { d: "21-08-2024", t: "MRI lumbale wervelkolom", k: "diagnostiek" },
  { d: "09-10-2024", t: "Operatie HNP L4-L5", k: "ingreep" },
  { d: "15-12-2024", t: "Revalidatie afgerond", k: "revalidatie" }];

  return (
    <div style={{ background: "#fff", border: "1px solid rgba(0,0,0,0.06)", borderRadius: 18, boxShadow: "rgba(0,0,0,0.04) 0px 8px 24px", padding: 24 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 18, paddingBottom: 12, borderBottom: "1px solid rgba(0,0,0,0.05)" }}>
        <span style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.6px", color: "#525252" }}>Stap 2 · AI-Samenvatting</span>
        <span style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, color: "#888", letterSpacing: "0.6px" }}>5 / 23 events</span>
      </div>
      <div style={{ position: "relative", paddingLeft: 22 }}>
        <div style={{ position: "absolute", left: 7, top: 6, bottom: 6, width: 1, background: "rgba(0,0,0,0.08)" }} />
        {events.map((e, i) =>
        <div key={i} style={{ display: "flex", gap: 14, marginBottom: 14, position: "relative" }}>
            <span style={{ position: "absolute", left: -22, top: 4, width: 14, height: 14, borderRadius: 9999, background: "#fff", border: `2px solid ${i === 2 ? "#18E299" : "#e5e5e5"}`, boxSizing: "border-box" }} />
            <div>
              <div style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 10, color: "#888", letterSpacing: "0.5px", fontWeight: 600, textTransform: "uppercase" }}>{e.d} · {e.k}</div>
              <div style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 13, color: "#0d0d0d", fontWeight: 500, marginTop: 1 }}>{e.t}</div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

/* ============== INTRO SECTION (after hero, like the screenshot's "Powerful Tools..." section) ============== */
function IntroSection() {
  return (
    <section id="werkwijze" className="section-pad" style={{ padding: "96px 24px 0", background: "#fff" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", marginBottom: 24 }}>
          <Badge tone="brand" icon="stethoscope">Onze werkwijze</Badge>
        </div>
        <h2 style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: "clamp(36px, 5vw, 52px)",
          fontWeight: 600, lineHeight: 1.08, letterSpacing: "-1.04px",
          color: "#0d0d0d", margin: 0, textWrap: "balance", maxWidth: 820, marginLeft: "auto", marginRight: "auto"
        }}>
          Krachtige hulpmiddelen voor medisch adviseurs.
        </h2>
        <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 18, lineHeight: 1.55, color: "#525252", margin: "20px auto 0", maxWidth: 620, textWrap: "pretty" }}>
          Elke stap is gebouwd met helderheid en zorgvuldigheid — voor feilloze beoordelingen, zonder stress.
        </p>
      </div>
    </section>);

}

/* ============== FEATURE SECTIONS ============== */
function HomeFeatures() {
  return (
    <section className="section-pad" style={{ padding: "72px 24px", background: "#fff" }}>
      <div className="home-features-container" style={{ maxWidth: 1200, margin: "0 auto", display: "flex", flexDirection: "column", gap: 96 }}>
        <Reveal><FeatureRow
          eyebrow="01 · Anonimisering"
          title="Handmatig geanonimiseerd, voordat AI iets ziet."
          body="Elk dossier passeert eerst ons team. Patiëntgegevens verlaten nooit de veilige omgeving."
          bullets={[
          "Verwijdering van directe identifiers",
          "Twee-ogen-controle per dossier",
          "Hercodering met pseudoniemen"]
          }
          image={<ProductMockAnonymize />} /></Reveal>
        
        <Reveal><FeatureRow
          eyebrow="02 · AI-samenvatting"
          title="AI destilleert honderden pagina's tot het essentiële."
          body="Gestructureerd op chronologie, diagnose en behandelingen."
          bullets={[
          "Chronologische tijdlijn met bronnen",
          "Feiten, conclusies en interpretaties apart",
          "Elk event herleidbaar naar bron"]
          }
          image={<ProductMockTimeline />}
          reverse /></Reveal>
        
      </div>
    </section>);

}

/* ============== BENEFITS — mirrors the screenshot's "Benefits..." section ============== */
function BenefitsSection() {
  const items = [
  { t: "Snelheid", d: "Binnen 3 werkdagen. Spoed in 24 uur." },
  { t: "Privacy by design", d: "Handmatige anonimisering vóór AI. AVG-conform." },
  { t: "Menselijke eindcontrole", d: "Elke samenvatting wordt nagekeken voordat hij wordt opgeleverd." },
  { t: "Gestructureerde output", d: "Chronologie, diagnose, behandelingen — heldere structuur." },
  { t: "Verifieerbare bronnen", d: "Elk feit verwijst naar de bronpagina." },
  { t: "Schaalbaar volume", d: "Van enkele tot duizenden dossiers — zonder kwaliteitsverlies." },
  { t: "Transparant tarief", d: "Per-dossier zonder verrassingen." },
  { t: "Veilige uitwisseling", d: "Versleutelde upload via onze portal." }];

  return (
    <section className="section-pad" style={{ padding: "96px 24px", background: "#fff" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <div style={{ display: "inline-flex", marginBottom: 20 }}>
            <Badge tone="brand">Waarom medisch adviseurs kiezen voor Medessence</Badge>
          </div>
          <h2 style={{
            fontFamily: "Inter, system-ui, sans-serif",
            fontSize: "clamp(36px, 5vw, 52px)", fontWeight: 600,
            lineHeight: 1.08, letterSpacing: "-1.04px",
            color: "#0d0d0d", margin: 0, textWrap: "balance", maxWidth: 800, marginLeft: "auto", marginRight: "auto"
          }}>
            Voordelen die elk dossier moeiteloos maken.
          </h2>
          <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 18, lineHeight: 1.55, color: "#525252", margin: "20px auto 0", maxWidth: 640, textWrap: "pretty" }}>
            Een soepeler, slimmer dossierproces — aangedreven door snelle, privacy-veilige AI.
          </p>
        </div>

        <Reveal><Card featured style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ padding: "20px 32px", borderBottom: "1px solid rgba(0,0,0,0.05)", display: "flex", alignItems: "center", gap: 8 }}>
            <Icon name="check-circle" size={16} color="#0fa76e" stroke={2} />
            <span style={{ fontFamily: "Geist Mono, ui-monospace, monospace", fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.6px", color: "#525252" }}>Onze voordelen</span>
          </div>
          <div className="benefits-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
            {items.map((it, i) => {
              const col = i % 2;
              const isLastRow = i >= items.length - 2;
              return (
                <div key={it.t} style={{
                  padding: "24px 32px",
                  borderRight: col === 0 ? "1px solid rgba(0,0,0,0.05)" : "none",
                  borderBottom: isLastRow ? "none" : "1px solid rgba(0,0,0,0.05)",
                  display: "flex", gap: 16, alignItems: "flex-start"
                }} className="benefit-cell">
                  <div style={{ flex: 1 }}>
                    <h4 style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 17, fontWeight: 600, color: "#0d0d0d", margin: "0 0 6px", letterSpacing: "-0.2px" }}>{it.t}</h4>
                    <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 14.5, lineHeight: 1.5, color: "#525252", margin: 0 }}>{it.d}</p>
                  </div>
                  <span style={{ width: 26, height: 26, flexShrink: 0, borderRadius: 9999, background: "#d4fae8", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 2 }}>
                    <Icon name="check" size={14} stroke={2.5} color="#0fa76e" />
                  </span>
                </div>);

            })}
          </div>
        </Card></Reveal>
        <style>{`
          @media (max-width: 720px) {
            .benefits-grid { grid-template-columns: 1fr !important; }
            .benefit-cell { border-right: none !important; }
            .benefit-cell:nth-last-child(2) { border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
          }
        `}</style>
      </div>
    </section>);

}

/* ============== TESTIMONIAL ============== */
function Testimonial() {
  return (
    <section className="section-pad" style={{ padding: "96px 24px", background: "#fff" }}>
      <div style={{ maxWidth: 1000, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", marginBottom: 20 }}>
          <Badge tone="brand">Ervaringen</Badge>
        </div>
        <h2 style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: "clamp(34px, 4.6vw, 46px)", fontWeight: 600,
          lineHeight: 1.1, letterSpacing: "-0.92px",
          color: "#0d0d0d", margin: 0, textWrap: "balance"
        }}>
          Adviseurs die sneller bij de feiten zijn.
        </h2>
        <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 18, lineHeight: 1.55, color: "#525252", margin: "16px auto 48px", maxWidth: 580 }}>
          Hoe medisch adviseurs in Nederland hun dossierwerk hebben veranderd met Medessence.
        </p>

        <Reveal><Card featured style={{ maxWidth: 760, margin: "0 auto", textAlign: "left" }}>
          <Icon name="quote" size={28} color="#18E299" stroke={2} />
          <p style={{
            fontFamily: "Inter, system-ui, sans-serif",
            fontSize: 22, fontWeight: 500, lineHeight: 1.45, letterSpacing: "-0.32px",
            color: "#0d0d0d", margin: "16px 0 0", textWrap: "pretty"
          }}>
            "Medessence heeft mijn dossierwerk fundamenteel veranderd. Wat eerst dagen onderzoek kostte, krijg ik nu binnen drie werkdagen — gestructureerd, herleidbaar en bovenal goed geanonimiseerd. Het voelt als een collega die alvast meeleest."
          </p>
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid rgba(0,0,0,0.05)", display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 48, height: 48, borderRadius: 9999, background: "linear-gradient(135deg, #d4fae8, #fafafa)", display: "inline-flex", alignItems: "center", justifyContent: "center", border: "1px solid rgba(0,0,0,0.05)" }}>
              <span style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 16, fontWeight: 600, color: "#0fa76e" }}>MV</span>
            </div>
            <div>
              <div style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 15, fontWeight: 600, color: "#0d0d0d" }}>Drs. Marieke van den Berg</div>
              <div style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 13, color: "#666", marginTop: 2 }}>Medisch adviseur · Letselschadepraktijk Utrecht</div>
            </div>
          </div>
        </Card></Reveal>

        <div className="stats-row" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginTop: 64 }}>
          {[
          { n: <><CountUp value={3000} suffix="+" />{}</>, l: "Dossiers per jaar" },
          { n: <><CountUp value={3} /> dagen</>, l: "Gemiddelde doorlooptijd" },
          { n: <><CountUp value={100} suffix="%" /></>, l: "Handmatig geanonimiseerd" },
          { n: <>€ <CountUp value={50} /></>, l: "Per dossier" },
          ].map(({ n, l }, idx) =>
          <Reveal key={l} delay={idx * 80} style={{ textAlign: "left" }}>
              <div style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 32, fontWeight: 600, letterSpacing: "-0.7px", color: "#0d0d0d" }}>{n}</div>
              <div style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 13, color: "#666", marginTop: 4 }}>{l}</div>
            </Reveal>
          )}
        </div>
        <style>{`
          @media (max-width: 720px) {
            .stats-row { grid-template-columns: 1fr 1fr !important; }
          }
        `}</style>
      </div>
    </section>);

}

/* ============== SAVINGS STAT — single hero number ============== */
function SavingsStat() {
  return (
    <section className="section-pad savings-stat" style={{
      padding: "96px 24px",
      background: "#0d0d0d",
      color: "#fff",
      textAlign: "center",
    }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        <div style={{ display: "inline-flex", marginBottom: 20 }}>
          <span className="badge-pill" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontFamily: "Geist Mono, ui-monospace, monospace",
            fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.6px",
            padding: "5px 12px", borderRadius: 9999,
            background: "rgba(24,226,153,0.16)", color: "#18E299", border: "1px solid rgba(24,226,153,0.24)",
          }}>Gemiddelde besparing</span>
        </div>
        <div className="savings-number" style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: "clamp(72px, 12vw, 156px)",
          fontWeight: 600, lineHeight: 1, letterSpacing: "-4px",
          color: "#fff", margin: "0 0 16px",
          fontVariantNumeric: "tabular-nums",
        }}>
          € <CountUp value={250000} duration={2200} />
        </div>
        <div style={{
          fontFamily: "Geist Mono, ui-monospace, monospace",
          fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.8px",
          color: "#18E299", marginBottom: 28,
        }}>
          per bureau · per jaar
        </div>
        <p style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: 18, lineHeight: 1.55, color: "rgba(255,255,255,0.72)",
          maxWidth: 600, margin: "0 auto",
          textWrap: "pretty",
        }}>
          Wat onze klanten gemiddeld besparen aan dossierwerk — pure extra winst, zonder kwaliteitsverlies.
        </p>
      </div>
    </section>
  );
}
function FinalCTA() {
  return (
    <section className="final-cta" style={{
      padding: "96px 24px",
      background: "radial-gradient(60% 80% at 50% 100%, rgba(24,226,153,0.18) 0%, transparent 60%), #ffffff",
      textAlign: "center"
    }}>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <h2 style={{
          fontFamily: "Inter, system-ui, sans-serif",
          fontSize: "clamp(36px, 5vw, 52px)", fontWeight: 600,
          lineHeight: 1.08, letterSpacing: "-1.04px",
          color: "#0d0d0d", margin: 0, textWrap: "balance"
        }}>
          Uw eerstvolgende dossier in drie werkdagen.
        </h2>
        <p style={{ fontFamily: "Inter, system-ui, sans-serif", fontSize: 18, lineHeight: 1.55, color: "#525252", margin: "20px auto 36px", maxWidth: 560, textWrap: "pretty" }}>
          Vraag een vrijblijvende demo aan. Wij laten u zien hoe Medessence binnen uw werkproces past — zonder verplichtingen.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "center", maxWidth: 320, margin: "0 auto" }}>
          <Button variant="primary" size="lg" fullWidth href="contact.html">Vraag demo aan</Button>
          <Button variant="secondary" size="lg" fullWidth href="over-ons.html">Lees ons verhaal</Button>
        </div>
        <div style={{ marginTop: 28 }}>
          <Logo size={20} />
        </div>
      </div>
    </section>);

}

Object.assign(window, { HomeHero, TrustBar, IntroSection, HomeFeatures, BenefitsSection, SavingsStat, Testimonial, FinalCTA, ProductMockDossier });