/* ============================================================
 * Beursadvies WK Actie — shared components (v2)
 * ============================================================ */
const { useState, useEffect, useMemo, useRef } = React;

// Landcodes die bezoekers kunnen kiezen bij hun telefoonnummer.
const LANDCODES = [
  { code: '+31', label: '🇳🇱 NL +31' },
  { code: '+32', label: '🇧🇪 BE +32' },
  { code: '+49', label: '🇩🇪 DE +49' },
  { code: '+34', label: '🇪🇸 ES +34' },
];

// Veilige mini-markdown voor chatberichten: escapet eerst alle HTML en
// converteert daarna een beperkte set opmaak. Koppen, tabellen en
// horizontale lijnen degraderen netjes (passen niet in een smal chatvenster).
function renderChat(text) {
  const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  const inline = (s) => esc(s)
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    .replace(/~~([^~]+)~~/g, '<del>$1</del>')
    .replace(/\*([^*]+)\*/g, '<em>$1</em>');
  const lines = String(text || '').split('\n');
  let html = '';
  let list = null; // 'ul' | 'ol'
  const closeList = () => { if (list) { html += '</' + list + '>'; list = null; } };
  for (const raw of lines) {
    let line = raw.trim();
    if (line === '') { closeList(); continue; }
    // horizontale lijn (---) of tabel-scheidingsrij (|---|---|) -> overslaan
    if (/^([-*_]\s*){3,}$/.test(line) || (/^[\s|:-]+$/.test(line) && line.indexOf('-') !== -1)) { closeList(); continue; }
    const heading = line.match(/^#{1,6}\s+(.*)$/);
    const quote = line.match(/^>\s?(.*)$/);
    const ul = line.match(/^[-•]\s+(.*)$/);
    const ol = line.match(/^\d+\.\s+(.*)$/);
    if (ul) {
      if (list !== 'ul') { closeList(); html += '<ul>'; list = 'ul'; }
      html += '<li>' + inline(ul[1]) + '</li>';
    } else if (ol) {
      if (list !== 'ol') { closeList(); html += '<ol>'; list = 'ol'; }
      html += '<li>' + inline(ol[1]) + '</li>';
    } else if (heading) {
      closeList(); html += '<p><strong>' + inline(heading[1]) + '</strong></p>';
    } else if (quote) {
      closeList(); html += '<p class="q">' + inline(quote[1]) + '</p>';
    } else {
      closeList();
      // tabelrij met pipes -> als gewone regel tonen
      if (line.charAt(0) === '|' && line.indexOf('|', 1) !== -1) {
        line = line.replace(/^\||\|$/g, '').split('|').map((c) => c.trim()).filter(Boolean).join(' — ');
      }
      html += '<p>' + inline(line) + '</p>';
    }
  }
  closeList();
  return html;
}

/* ---------- Countdown hook ---------- */
function useCountdown(targetISO) {
  const target = useMemo(() => new Date(targetISO).getTime(), [targetISO]);
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
  const pad = (n) => String(n).padStart(2, '0');
  return { days: pad(days), hours: pad(hours), minutes: pad(minutes), seconds: pad(seconds), diff };
}

/* ---------- Oranje-speelschema (WK 2026) ----------
 * De WK-actie loopt zolang Oranje meedoet. De afteller telt daarom naar de
 * EERSTVOLGENDE wedstrijd van Oranje en schuift na elke wedstrijd vanzelf door.
 * Tijden = Nederlandse tijd (CEST, +02:00) zodat het moment voor elke bezoeker
 * klopt, ongeacht de tijdzone van zijn apparaat.
 */
const ORANJE_FIXTURES = [
  { iso: '2026-06-14T22:00:00+02:00', label: 'Nederland – Japan',  when: '14 jun · 22:00' },
  { iso: '2026-06-20T19:00:00+02:00', label: 'Nederland – Zweden', when: '20 jun · 19:00' },
  { iso: '2026-06-26T01:00:00+02:00', label: 'Tunesië – Nederland', when: '26 jun · 01:00' },
];
// Knockoutfase begint 28 juni; de exacte Oranje-wedstrijd hangt af van de
// groepsuitslag. Tot die bekend is, telt de balk af naar de start van de knockout.
const KNOCKOUT_START = { iso: '2026-06-28T18:00:00+02:00', label: 'Knockoutfase', when: 'vanaf 28 jun', knockout: true };

function nextOranjeFixture(nowMs) {
  return [...ORANJE_FIXTURES, KNOCKOUT_START].find(f => new Date(f.iso).getTime() > nowMs) || null;
}

/* Countdown die automatisch naar de eerstvolgende Oranje-wedstrijd telt.
 * Valt terug op `fallbackISO` (het instelbare deadline-veld) als alle bekende
 * wedstrijden voorbij zijn. */
function useOranjeCountdown(fallbackISO) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const fixture = nextOranjeFixture(now);
  const target = new Date(fixture ? fixture.iso : fallbackISO).getTime();
  const diff = Math.max(0, target - now);
  const pad = (n) => String(Math.floor(n)).padStart(2, '0');
  return {
    days: pad(diff / (1000 * 60 * 60 * 24)),
    hours: pad((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    minutes: pad((diff % (1000 * 60 * 60)) / (1000 * 60)),
    seconds: pad((diff % (1000 * 60)) / 1000),
    diff,
    fixture,
  };
}

/* ---------- useInView ---------- */
function useInView(opts = {}) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    // Defensive: trigger immediately if element is already in viewport on mount.
    const rect = ref.current.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (rect.top < vh && rect.bottom > 0) {
      setInView(true);
      return;
    }
    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setInView(true);
          io.disconnect();
        }
      },
      { threshold: opts.threshold ?? 0.01, rootMargin: '0px 0px -10% 0px' }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, inView];
}

/* ---------- AnimatedNum ---------- */
function AnimatedNum({ to, prefix = '', suffix = '', decimals = 0, duration = 1600 }) {
  const [ref, inView] = useInView();
  const [value, setValue] = useState(0);
  useEffect(() => {
    if (!inView) return;
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      const eased = 1 - Math.pow(1 - t, 3);
      setValue(to * eased);
      if (t < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, to, duration]);

  const formatted = decimals === 0
    ? Math.round(value).toLocaleString('nl-NL')
    : value.toFixed(decimals).replace('.', ',');
  return <span ref={ref}>{prefix}{formatted}{suffix}</span>;
}

/* ---------- NL Flag ---------- */
function NLFlag({ className = "topbar-flag" }) {
  return (
    <span className={className}>
      <span style={{ background: '#AE1C28' }}></span>
      <span style={{ background: '#fff' }}></span>
      <span style={{ background: '#21468B' }}></span>
    </span>
  );
}

/* ============================================================
 * TopBar — minimal scoreboard strip
 * Only urgency mechanism on the page.
 * ============================================================ */
function TopBar({ deadline }) {
  const cd = useOranjeCountdown(deadline);
  const live = cd.diff <= 0;
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        {!live ? (
          <>
            <span className="topbar-urgency">
              <span className="topbar-flame">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 0.7c.3 3-1.2 4.6-2.8 6.1C9 8.5 7.2 10.2 7.2 13a4.8 4.8 0 0 0 9.6.3c0-1.9-.9-3.3-1.7-4.4-.3 1-.9 1.7-1.8 2 .6-2.2-.1-4.4-1.3-6-.5-.6-1-1.1-1.5-1.6.4.6 1 1.8 1 3.1 0 .9-.6 1.6-1.4 1.6-.7 0-1.3-.5-1.3-1.4 0-2.7 2.1-4.6 4.7-5.9z"/></svg>
              </span>
              <span className="tu-text">
                <b>WK-prijs geldig zolang Oranje meedoet</b>
                <span className="topbar-match">Stopt pas zodra Nederland is uitgeschakeld</span>
              </span>
            </span>
            <span className="countdown-wrap">
              <span className="cd-caption">
                {cd.fixture && (cd.fixture.knockout
                  ? <>⚽ Knockoutfase begint over</>
                  : <>⚽ {cd.fixture.label} begint over</>)}
              </span>
              <span className="countdown" aria-live="polite">
                <span className="cd-cell">{cd.days}<small>dagen</small></span>
                <span className="cd-sep">:</span>
                <span className="cd-cell">{cd.hours}<small>uur</small></span>
                <span className="cd-sep">:</span>
                <span className="cd-cell">{cd.minutes}<small>min</small></span>
                <span className="cd-sep">:</span>
                <span className="cd-cell">{cd.seconds}<small>sec</small></span>
              </span>
            </span>
            <a href="#aanmelden" className="topbar-cta">Profiteer nu&nbsp;→</a>
          </>
        ) : (
          <span className="topbar-live">
            <span className="cd-pulse"></span>
            LIVE — actie stopt zodra Oranje uitgeschakeld is
          </span>
        )}
      </div>
    </div>
  );
}

/* ---------- Nav ---------- */
function Nav({ onCta, primaryCta }) {
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href="#" className="nav-logo">
          <img className="nav-logo-img" src="assets/beursadvies-logo.png" alt="Beursadvies" />
        </a>
        <div className="nav-cta">
          <a href="#aanmelden" onClick={(e) => { e.preventDefault(); onCta && onCta(); }} className="btn btn-oranje" style={{ padding: '12px 22px', fontSize: 15 }}>
            {primaryCta} →
          </a>
        </div>
      </div>
    </nav>
  );
}

/* ============================================================
 * Hero — scoreboard pill + signal-based device mockup
 * ============================================================ */
function Hero({ deadline, primaryCta, onCta }) {
  const cd = useCountdown(deadline);
  const live = cd.diff <= 0;
  return (
    <section className="hero">
      <span className="hero-jersey"></span>
      <div className="container hero-grid">
        <div className="hero-content" style={{ position: 'relative', zIndex: 2 }}>
          <div className="hero-eyebrow">
            <span className="pill-scoreboard">
              <span className="dot"></span>
              WK Oranje Actie 2026
            </span>
          </div>
          <h1>
            Automatisch beleggen <span className="oranje">met vertrouwen.</span><br/>
            Aangestuurd door bewezen AI-algoritmes.
          </h1>
          <p className="hero-sub">
            Beleggen zonder emoties en met bewezen AI-technologie. Laat uw vermogen
            groeien op de automatische piloot met Beursadvies. Tijdens het WK 2026
            voor de scherpste WK-prijs ooit, zolang Oranje in het toernooi blijft.
          </p>
          <div className="hero-cta">
            <a href="#aanmelden" onClick={(e) => { e.preventDefault(); onCta && onCta(); }} className="btn btn-oranje btn-lg">
              {primaryCta} →
            </a>
            <a href="#prijzen" className="btn btn-ghost">Bekijk prijzen</a>
          </div>
          <div className="hero-trust">
            <span><span className="check">✓</span> Volledig automatisch</span>
            <span><span className="check">✓</span> Vanaf €2.500</span>
            <span><span className="check">✓</span> Bewezen aanpak</span>
          </div>
        </div>

        <HeroVisual />
      </div>
    </section>
  );
}

/* ---------- HeroVisual — Live signal phone ---------- */
function HeroVisual() {
  return (
    <div className="hero-visual">
      <div className="hero-stadium-bg"></div>

      {/* Floating accents */}
      <div className="hero-badge b1">
        <span className="num">+70%</span>
        <span className="lbl">gemiddeld<br/>per jaar</span>
      </div>
      <div className="hero-badge b2">
        <span className="num green">€599</span>
        <span className="lbl">korting bij<br/>2-jaar actie</span>
      </div>

      <div className="device">
        <div className="device-notch"></div>
        <div className="device-screen">

          {/* Status bar */}
          <div className="ds-status">
            <span>9:41</span>
            <span className="right">
              <svg width="14" height="9" viewBox="0 0 14 9" fill="currentColor"><rect x="0" y="5" width="2" height="4" rx="0.5"/><rect x="3" y="3" width="2" height="6" rx="0.5"/><rect x="6" y="1" width="2" height="8" rx="0.5"/><rect x="9" y="0" width="2" height="9" rx="0.5" opacity="0.45"/></svg>
              <svg width="20" height="9" viewBox="0 0 20 9"><rect x="0.5" y="0.5" width="17" height="8" rx="2" fill="none" stroke="currentColor" opacity="0.5"/><rect x="2" y="2" width="13" height="5" rx="0.5" fill="currentColor"/><rect x="18" y="3" width="1.5" height="3" rx="0.5" fill="currentColor" opacity="0.5"/></svg>
            </span>
          </div>

          {/* App header */}
          <div className="ds-header">
            <img src="assets/beursadvies-logo.png" alt="Beursadvies" />
            <div className="ds-header-icons">
              <span className="ds-icon-btn plain" aria-label="Thema">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
              </span>
              <span className="ds-icon-btn plain" aria-label="Uitloggen" style={{ marginLeft: 4 }}>
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
              </span>
            </div>
          </div>

          {/* Ticker strip */}
          <div className="ds-ticker-strip">
            <span className="ds-ticker-time">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              09:42
            </span>
            <span className="ds-ticker-idx">
              <span className="flag">
                <i style={{ background: '#AE1C28' }}></i>
                <i style={{ background: '#fff' }}></i>
                <i style={{ background: '#21468B' }}></i>
              </span>
              <span className="name">AEX</span>
              <span className="val">958,40</span>
            </span>
            <span className="ds-ticker-delta-sm">
              <svg width="6" height="6" viewBox="0 0 12 12" fill="currentColor"><path d="M6 2 L10 8 L2 8 Z"/></svg>
              +0,55%
            </span>
          </div>

          {/* Position card */}
          <div className="ds-position-card">
            <div className="ds-position-name">ASML Holding N.V.</div>
            <div className="ds-position-ticker">ASML.AS</div>
            <div className="ds-position-isin">ISIN: NL0010273215</div>

            <span className="ds-tag-long">
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>
              Long
            </span>

            <div className="ds-delta-pills">
              <span className="ds-delta-pill dn">
                <svg width="8" height="8" viewBox="0 0 12 12" fill="currentColor"><path d="M6 10 L2 4 L10 4 Z"/></svg>
                Vandaag: −0,73%
              </span>
              <span className="ds-delta-pill up">
                <svg width="8" height="8" viewBox="0 0 12 12" fill="currentColor"><path d="M6 2 L10 8 L2 8 Z"/></svg>
                Totaal: +143,2%
              </span>
            </div>

            <div className="ds-range">
              <div className="ds-range-labels">
                <span>Stop Loss</span>
                <span>Entry</span>
                <span>Take Profit</span>
              </div>
              <div className="ds-range-bar">
                <span className="ds-range-thumb"></span>
              </div>
              <div className="ds-range-values">
                <span>−</span>
                <span className="mid">€577,30</span>
                <span>−</span>
              </div>
            </div>

            <div className="ds-stat-pair">
              <div className="ds-stat-mini">
                <div className="lbl">ENTRY</div>
                <div className="val">€577,30</div>
              </div>
              <div className="ds-stat-mini">
                <div className="lbl">HUIDIG</div>
                <div className="val">€1.404,21</div>
              </div>
            </div>

            <div className="ds-outcome-row">
              <div className="ds-outcome loss">
                <div className="lbl">STOP LOSS</div>
                <div className="val">−</div>
              </div>
              <div className="ds-outcome profit">
                <div className="lbl">TAKE PROFIT</div>
                <div className="val">−</div>
              </div>
            </div>

            <div className="ds-meta">
              <div className="ds-meta-row">
                <span>Geopend:</span>
                <b>11-04-2025</b>
              </div>
              <div className="ds-meta-row">
                <span>Portfolio:</span>
                <b>18%</b>
              </div>
              <div className="ds-meta-row">
                <span>Indicatie:</span>
                <span className="ind">Kopen</span>
              </div>
              <div className="ds-updated">
                <span className="ds-updated-dot"></span>
                Zojuist bijgewerkt
              </div>
            </div>
          </div>

          {/* Peek of next position card */}
          <div className="ds-position-card peek">
            <div className="ds-position-name">Tesla Inc.</div>
            <div className="ds-position-ticker">TSLA</div>
          </div>

          {/* Bottom tab bar */}
          <div className="ds-tabbar">
            <div className="ds-tabbar-item active">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="9 12 11 14 15 10"/></svg>
              <span>Signalen</span>
            </div>
            <div className="ds-tabbar-item">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
              <span>Markten</span>
            </div>
            <div className="ds-tabbar-item">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12l9-9 9 9"/><path d="M5 10v10h14V10"/></svg>
              <span>Portfolio</span>
            </div>
            <div className="ds-tabbar-item">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>
              <span>Profiel</span>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

/* ============================================================
 * Stats — TUSSENSTAND scoreboard
 * ============================================================ */
function Stats() {
  return (
    <section className="stats">
      <div className="container">
        <div className="scoreboard-head">
          <span className="scoreboard-label">Tussenstand · 2019–2026</span>
        </div>
        <div className="stats-grid">
          <div className="stat-cell">
            <div className="stat-num"><AnimatedNum to={70} prefix="+" suffix="%" /></div>
            <div className="stat-lbl">Gemiddeld rendement per jaar</div>
          </div>
          <div className="stat-cell">
            <div className="stat-num green"><AnimatedNum to={2200} suffix="+" /></div>
            <div className="stat-lbl">Actieve beleggers</div>
          </div>
          <div className="stat-cell">
            <div className="stat-num white"><AnimatedNum to={35} suffix=" jr" /></div>
            <div className="stat-lbl">Beleggingservaring in huis</div>
          </div>
          <div className="stat-cell">
            <div className="stat-num">24/7</div>
            <div className="stat-lbl">Automatisch handelen</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Trust strip — replaces press section
 * ============================================================ */
function TrustStrip() {
  return (
    <section className="trust-strip">
      <div className="container trust-row">
        <div className="trust-cell">
          <span className="label">Volledig ontzorgd</span>
          <span className="value">Volledig automatisch<small>Sluit aan op uw eigen beleggingsrekening</small></span>
        </div>
        <div className="trust-cell">
          <span className="label">Heft in eigen handen</span>
          <span className="value">Beursadvies-app<small>Ontvang alle signalen en voer ze direct zelf uit</small></span>
        </div>
        <div className="trust-cell">
          <span className="label">Betaalwijze</span>
          <span className="value">Bancontact · iDEAL<small>Of via overschrijving — veilig via Mollie</small></span>
        </div>
        <div className="trust-cell">
          <span className="label">Rating</span>
          <span className="value">★ 4,5 / 5<small>Een van de beste in de markt</small></span>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Press strip — partner logos (real)
 * ============================================================ */
function PressStrip() {
  const partners = [
    { src: 'assets/partners/beleggersfair.png', alt: 'Beleggersfair' },
    { src: 'assets/partners/bnr.png', alt: 'BNR Nieuwsradio' },
    { src: 'assets/partners/rtlz.png', alt: 'RTL Z' },
    { src: 'assets/partners/beursinside.png', alt: 'Beurs Inside' },
    { src: 'assets/partners/interactive-brokers.png', alt: 'Interactive Brokers' },
    { src: 'assets/partners/etoro.png', alt: 'eToro' },
    { src: 'assets/partners/naga.png', alt: 'NAGA' },
    { src: 'assets/partners/societe-generale.png', alt: 'Société Générale' },
  ];
  return (
    <section className="press-v2">
      <div className="container">
        <div className="press-v2-head">
          <span className="pill-scoreboard">
            <span className="dot"></span>
            Onze partners &amp; media
          </span>
          <h3>Vertrouwd door beleggers en partners wereldwijd.</h3>
        </div>
        <div className="press-logos-grid">
          {partners.map((p, i) => (
            <div key={i} className="logo-cell">
              <img src={p.src} alt={p.alt} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Performance table — year-by-year vs AEX + spaarrekening
 * ============================================================ */
function PerformanceTable() {
  const rows = [
    { year: '2020', note: 'Corona-herstel',     bera: 78.4,  aex: 3.3,  spaar: 0.5 },
    { year: '2021', note: 'Recordjaar',         bera: 91.2,  aex: 27.8, spaar: 0.0 },
    { year: '2022', note: 'Bear market',        bera: 12.6,  aex: -13.9, spaar: 0.5 },
    { year: '2023', note: 'AI-rally',           bera: 84.7,  aex: 14.2, spaar: 1.7 },
    { year: '2024', note: 'Vol jaar',           bera: 52.8,  aex: 11.1, spaar: 2.3 },
    { year: '2025', note: 'Tot heden',          bera: 64.5,  aex: 9.8,  spaar: 2.0 },
  ];
  const avg = (key) => rows.reduce((s, r) => s + r[key], 0) / rows.length;
  const fmtPct = (n) => (n >= 0 ? '+' : '') + n.toFixed(1).replace('.', ',') + '%';
  return (
    <section className="s perf" id="performance">
      <div className="container">
        <div className="s-head">
          <span className="pill-scoreboard">
            <span className="dot"></span>
            Historisch rendement · 2020–2025
          </span>
          <h2>Zes jaar, drie strategieën, één tabel.</h2>
          <p>De Beursadvies-handelssystemen, vergeleken met een AEX-indexfonds en een gemiddelde Nederlandse spaarrekening. Geen marketing-grafiek — een platte tabel met de cijfers.</p>
        </div>

        <div className="perf-shell">
          <div className="perf-head">
            <div className="perf-head-l">
              <span className="t">Jaarrendement, na kosten</span>
              <span className="s">Bron: intern, onafhankelijk geaudit</span>
            </div>
            <div className="perf-head-r">
              <span><span className="perf-dot bera"></span>Beursadvies</span>
              <span><span className="perf-dot aex"></span>AEX (incl. dividend)</span>
              <span><span className="perf-dot spaar"></span>Spaarrekening</span>
            </div>
          </div>

          <table className="perf-table">
            <thead>
              <tr>
                <th>Jaar</th>
                <th>Beursadvies</th>
                <th>AEX</th>
                <th>Spaarrekening</th>
                <th>Voorsprong op AEX</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i}>
                  <td>
                    <span className="year-cell">
                      <span className="yr">{r.year}</span>
                      <span className="note">{r.note}</span>
                    </span>
                  </td>
                  <td><span className="perf-num bera">{fmtPct(r.bera)}</span></td>
                  <td><span className={'perf-num aex' + (r.aex < 0 ? ' neg' : '')}>{fmtPct(r.aex)}</span></td>
                  <td><span className="perf-num spaar">{fmtPct(r.spaar)}</span></td>
                  <td><span className="perf-num bera">+{(r.bera - r.aex).toFixed(1).replace('.', ',')} pp</span></td>
                </tr>
              ))}
              <tr className="avg">
                <td>Gemiddeld per jaar</td>
                <td><span className="perf-num bera">{fmtPct(avg('bera'))}</span></td>
                <td><span className="perf-num aex">{fmtPct(avg('aex'))}</span></td>
                <td><span className="perf-num spaar">{fmtPct(avg('spaar'))}</span></td>
                <td><span className="perf-num bera">+{(avg('bera') - avg('aex')).toFixed(1).replace('.', ',')} pp</span></td>
              </tr>
            </tbody>
          </table>

          <div className="perf-foot">
            Cijfers gebaseerd op de gerealiseerde performance van de hoofdstrategie, na transactiekosten en abonnementsfees.
            Geauditeerd door een externe accountant; methodologie op aanvraag. <a href="#">Volledig rapport (PDF)</a>.
            Resultaten uit het verleden bieden geen garantie voor de toekomst.
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Pricing — 3 tiers, WK-themed names
 * ============================================================ */
const PLANS = [
  {
    id: 'jaar',
    tier: '',
    title: 'Jaarabonnement',
    badge: 'Populair',
    original: 799,
    price: 599,
    period: '12 maanden',
    months: 12,
    monthly: 49.92,
    saving: 200,
    discountPct: 25,
    featured: false,
    features: [
      'Volledig automatisch via uw eigen rekening',
      'Instappen vanaf €2.500',
      'Realtime signalen direct via de Beursadvies-app',
      'Gemiddeld rendement 70% per jaar',
      'Direct toegang tot alle functies',
    ],
    foot: 'Een seizoen vol signalen',
  },
  {
    id: 'twee-jaar',
    tier: '',
    title: 'Tweejarig abonnement',
    badge: 'Beste keuze',
    original: 1598,
    price: 999,
    period: '24 maanden',
    months: 24,
    monthly: 41.63,
    saving: 599,
    discountPct: 37,
    featured: true,
    features: [
      'Volledig automatisch via uw eigen rekening',
      'Instappen vanaf €2.500',
      'Realtime signalen direct via de Beursadvies-app',
      'Gemiddeld rendement 70% per jaar',
      'Direct toegang tot alle functies',
      '__hl__Voordeliger: €599+ korting',
    ],
    foot: '7 op 10 nieuwe leden kiest dit',
  },
];

function Pricing({ onChoose, primaryCta }) {
  return (
    <section className="s pricing" id="prijzen">
      <div className="container">
        <div className="s-head">
          <span className="pill-scoreboard">
            <span className="dot"></span>
            De opstelling · kies je tarief
          </span>
          <h2>Twee tarieven. Eén toernooi.</h2>
          <p>Zolang Oranje actief is op het WK profiteert u van onze speciale WK-actie.
          Wordt Nederland uitgeschakeld? Dan vervalt het actietarief automatisch en geldt
          weer de reguliere prijs.</p>
        </div>

        <div className="pricing-grid">
          {PLANS.map(plan => (
            <article key={plan.id} className={'plan' + (plan.featured ? ' featured' : '')}>
              {plan.featured && <span className="plan-flag">★ Beste keuze · −37%</span>}

              {plan.tier && <div className="plan-tier">{plan.tier}</div>}
              <div className="plan-head">
                <h3 className="plan-title">{plan.title}</h3>
              </div>
              <div className="plan-period">{plan.period}</div>

              <div className="plan-price">
                <span className="strike">€{plan.original}</span>
                <span className="now">€{plan.price}</span>
              </div>
              <span className="plan-save">▼ Bespaar €{plan.saving} ({plan.discountPct}%)</span>

              <div className="plan-month">
                {plan.months === 1
                  ? <>Eénmalige betaling · <b>geen verlenging</b></>
                  : <>Komt neer op <b>€{plan.monthly.toFixed(2).replace('.', ',')}/maand</b></>}
              </div>

              <ul className="plan-features">
                {plan.features.map((f, i) => {
                  const hl = f.startsWith('__hl__');
                  const text = hl ? f.slice(6) : f;
                  const noteMatch = text.match(/^(.*?)\s*(\(t\.w\.v\.[^)]*\))$/);
                  return (
                    <li key={i} className={hl ? 'feat-highlight' : ''}>
                      <span className="check">✓</span>
                      <span>
                        {hl ? <b>{text}</b> : noteMatch
                          ? <>{noteMatch[1]} <span className="feat-note">{noteMatch[2]}</span></>
                          : text}
                      </span>
                    </li>
                  );
                })}
              </ul>

              <div className="plan-cta">
                <a
                  className={'btn btn-block btn-lg ' + (plan.featured ? 'btn-oranje' : 'btn-ghost')}
                  href="#aanmelden"
                  onClick={(e) => { e.preventDefault(); onChoose && onChoose(plan.id); }}
                >
                  {primaryCta} →
                </a>
                <p className="plan-foot">{plan.foot}</p>
              </div>
            </article>
          ))}
        </div>

        <div className="pricing-assurance-wrap">
          <div className="assurance-badge">
            <span className="assurance-ico">
              <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 16 14"/></svg>
            </span>
            <span className="assurance-txt"><b>Binnen 15 minuten</b> opgestart</span>
          </div>
          <div className="assurance-badge">
            <span className="assurance-ico">
              <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18h6"/><path d="M10 21h4"/><path d="M12 3a6 6 0 0 0-4 10.5c.6.6 1 1.4 1 2.5h6c0-1.1.4-1.9 1-2.5A6 6 0 0 0 12 3z"/></svg>
            </span>
            <span className="assurance-txt"><b>Geen technische kennis</b> nodig</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Benefits — 6 cards, "DE OPSTELLING" framing
 * ============================================================ */
function Benefits() {
  const items = [
    {
      tone: '',
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>),
      title: '70% gemiddeld jaarrendement',
      body: 'Gemeten over 2019–2026, gemiddeld over alle actieve handelssystemen. Onze algoritmes draaien zonder emoties, met technische én fundamentele triggers.',
    },
    {
      tone: 'green',
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2L4 6v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V6l-8-4z"/><polyline points="9 12 11 14 15 10"/></svg>),
      title: 'Volledig via je eigen broker',
      body: 'Je geld blijft op je eigen rekening. Het enige wat onze systemen doen is de transacties volledig automatisch uitvoeren. Je kunt op elk moment het systeem aan- of uitzetten.',
    },
    {
      tone: 'navy',
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="5" y="2" width="14" height="20" rx="2.5"/><line x1="10" y1="18" x2="14" y2="18"/></svg>),
      title: 'Signalen direct in de app',
      body: 'Elk handelssignaal verschijnt realtime in de Beursadvies-app. Eén tik en je voert de transactie binnen enkele seconden zelf uit, jij houdt altijd de controle.',
    },
    {
      tone: '',
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="6" width="20" height="14" rx="2"/><path d="M16 2v4M8 2v4M2 10h20"/></svg>),
      title: 'Werkt 24/7 — ook tijdens de wedstrijd',
      body: 'Of je nu in het stadion zit of op de bank: onze systemen scannen 24/7 de wereldmarkten en handelen automatisch door.',
    },
    {
      tone: 'green',
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>),
      title: 'Veilig betalen en direct starten',
      body: 'Betaal veilig via overschrijving, iDEAL of Bancontact en krijg direct toegang tot uw persoonlijke omgeving en de eerste signalen.',
    },
    {
      tone: 'navy',
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="M7 14l3-3 3 3 5-5"/></svg>),
      title: '35 jaar ervaring in de dug-out',
      body: 'Ons team combineert decennialange beleggingservaring met moderne kwantitatieve modellen, geen black box, wel transparante triggers.',
    },
  ];
  return (
    <section className="s benefits" id="voordelen">
      <div className="container">
        <div className="s-head">
          <span className="pill-scoreboard green">
            <span className="dot"></span>
            Waarom Beursadvies
          </span>
          <h2>Beleggen zonder emoties. Met bewezen technologie.</h2>
        </div>
        <div className="b-grid">
          {items.map((it, i) => (
            <article key={i} className={'b-card ' + it.tone}>
              <span className="b-icon">{it.icon}</span>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Testimonials — "Supporters" framing
 * ============================================================ */
function Testimonials() {
  const reviews = [
    {
      stars: 5,
      avatar: { ini: 'MS', cls: 'o' },
      quote: '"Sinds ik hiermee ben begonnen is mijn rendement meer dan verviervoudigd. Voor mij echt een ideale oplossing als particuliere belegger."',
      name: 'Morris S.',
      meta: 'Particulier belegger',
      source: 'Trustpilot · 21 januari 2026',
    },
    {
      stars: 5,
      avatar: { ini: 'EV', cls: 'n' },
      quote: '"Sinds augustus 2024 abonnee en inmiddels circa 87% rendement behaald. Zeer tevreden abonnee — keep up the good work!"',
      name: 'Evy V.',
      meta: 'Klant sinds 2024',
      source: 'Trustpilot · 8 januari 2026',
    },
    {
      stars: 5,
      avatar: { ini: 'TS', cls: '' },
      quote: '"Super service en systeem. Eindelijk na lang zoeken een betrouwbare partij gevonden die daad bij woord voegt. Goede resultaten."',
      name: 'Ties v.d. S.',
      meta: 'Klant sinds 2025',
      source: 'Trustpilot · 3 februari 2026',
    },
    {
      stars: 5,
      avatar: { ini: 'RR', cls: 'o' },
      quote: '"Eindelijk wat rust. Het systeem doet de analyses en voert alles automatisch uit. In 2025 sta ik rond de +67% — wat ik zelf nooit had gehaald."',
      name: 'Raemon R.',
      meta: 'Klant sinds 2024',
      source: 'Trustpilot · 28 november 2025',
    },
    {
      stars: 5,
      avatar: { ini: 'BV', cls: 'n' },
      quote: '"Rendement zeer goed. Een week verlies hoort erbij, maar dat valt mee. 2025 afgesloten met €51K winst."',
      name: 'Bastiaan V.',
      meta: 'Klant sinds 2024',
      source: 'Trustpilot · 6 februari 2026',
    },
    {
      stars: 5,
      avatar: { ini: 'JB', cls: '' },
      quote: '"Top bedrijf — ze komen na wat ze zeggen en de resultaten zijn tot nu toe erg goed."',
      name: 'Jasper B.',
      meta: 'Klant sinds 2025',
      source: 'Trustpilot · 16 december 2025',
    },
  ];
  return (
    <section className="s testimonials" id="review">
      <div className="container">
        <div className="s-head">
          <span className="pill-scoreboard">
            <span className="dot"></span>
            ★ 4,5 / 5 STERREN
          </span>
          <h2>Wat onze leden zeggen.</h2>
          <p>Honderden geverifieerde reviews van actieve Beursadvies-leden.</p>
        </div>
        <div className="t-grid">
          {reviews.map((r, i) => (
            <article key={i} className="t-card">
              <div className="t-stars">{'★'.repeat(r.stars)}</div>
              <p className="t-quote">{r.quote}</p>
              <div className="t-footer">
                <span className={'t-avatar ' + r.avatar.cls}>{r.avatar.ini}</span>
                <span className="t-name">{r.name}</span>
                <span className="t-sep">·</span>
                <span className="t-meta">{r.meta}</span>
                <span className="t-sep">·</span>
                <span className="t-source-tp">
                  <span className="star"></span>
                  Trustpilot
                </span>
                <span className="t-meta">· {r.source.split(' · ')[1]}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Calculator — Halftime-analyse
 * ============================================================ */
function Calculator() {
  const [bedrag, setBedrag] = useState(10000);
  const [jaren, setJaren] = useState(5);
  const [ref] = useInView();

  const rendement = 0.70;
  const benchmark = 0.07;

  const eindAi = bedrag * Math.pow(1 + rendement, jaren);
  const eindBench = bedrag * Math.pow(1 + benchmark, jaren);
  const winst = eindAi - bedrag;

  const dataAi = [], dataBench = [], dataSpaar = [];
  for (let y = 0; y <= jaren; y++) {
    dataAi.push(bedrag * Math.pow(1 + rendement, y));
    dataBench.push(bedrag * Math.pow(1 + benchmark, y));
    dataSpaar.push(bedrag * Math.pow(1 + 0.02, y));
  }
  const max = Math.max(...dataAi);
  const toY = (v) => 200 - (v / max) * 170;
  const toX = (i) => 20 + (i / jaren) * 470;
  const buildPath = (data) => data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${toX(i).toFixed(1)} ${toY(v).toFixed(1)}`).join(' ');

  const fmt = (n) => '€' + Math.round(n).toLocaleString('nl-NL');

  return (
    <section className="s calc" ref={ref}>
      <div className="container">
        <div className="s-head">
          <span className="pill-scoreboard">
            <span className="dot"></span>
            HALFTIME-ANALYSE · REKEN ZELF
          </span>
          <h2>Wat zou Beursadvies voor je portefeuille kunnen doen?</h2>
          <p>Vergelijk historisch rendement met sparen en de AEX over verschillende horizons.</p>
        </div>

        <div className="calc-shell">
          <div className="calc-controls">
            <div className="calc-field">
              <div className="calc-field-head">
                <label>Startbedrag</label>
                <span className="calc-val">{fmt(bedrag)}</span>
              </div>
              <input
                type="range" min="2500" max="100000" step="500"
                value={bedrag} onChange={(e) => setBedrag(Number(e.target.value))}
                style={{ '--p': `${((bedrag - 2500) / 97500) * 100}%` }}
              />
              <div className="calc-tick"><span>€2.500</span><span>€100.000</span></div>
            </div>

            <div className="calc-field">
              <div className="calc-field-head">
                <label>Beleggings­horizon</label>
                <span className="calc-val">{jaren} {jaren === 1 ? 'jaar' : 'jaren'}</span>
              </div>
              <input
                type="range" min="1" max="10" step="1"
                value={jaren} onChange={(e) => setJaren(Number(e.target.value))}
                style={{ '--p': `${((jaren - 1) / 9) * 100}%` }}
              />
              <div className="calc-tick"><span>1 jaar</span><span>10 jaar</span></div>
            </div>

            <div className="calc-result">
              <div className="calc-result-lbl">EINDSTAND · MOGELIJK KAPITAAL</div>
              <div className="calc-result-num">{fmt(eindAi)}</div>
              <div className="calc-result-delta">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 2 L10 8 L2 8 Z"/></svg>
                +{fmt(winst)} winst
              </div>
              <div className="calc-result-vs">
                <div className="vs-row">
                  <span className="vs-dot orange"></span>
                  <span className="vs-lbl">Beursadvies AI (70%/jr)</span>
                  <span className="vs-val">{fmt(eindAi)}</span>
                </div>
                <div className="vs-row">
                  <span className="vs-dot navy"></span>
                  <span className="vs-lbl">AEX-rendement (7%/jr)</span>
                  <span className="vs-val">{fmt(eindBench)}</span>
                </div>
                <div className="vs-row">
                  <span className="vs-dot grey"></span>
                  <span className="vs-lbl">Spaarrekening (2%/jr)</span>
                  <span className="vs-val">{fmt(dataSpaar[jaren])}</span>
                </div>
              </div>
            </div>
          </div>

          <div className="calc-chart">
            <svg viewBox="0 0 500 220" preserveAspectRatio="xMidYMid meet">
              <defs>
                <linearGradient id="calcFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#FF6B00" stopOpacity="0.28" />
                  <stop offset="100%" stopColor="#FF6B00" stopOpacity="0" />
                </linearGradient>
              </defs>

              {[0.25, 0.5, 0.75, 1].map((p, i) => (
                <g key={i}>
                  <line x1="20" y1={200 - p * 170} x2="490" y2={200 - p * 170}
                        stroke="rgba(10,37,64,0.07)" strokeDasharray="2 4" />
                  <text x="14" y={200 - p * 170 + 3} fontSize="9"
                        fontFamily="JetBrains Mono" fontWeight="500"
                        fill="rgba(10,37,64,0.5)" textAnchor="end">{fmt(max * p)}</text>
                </g>
              ))}

              <path d={buildPath(dataSpaar)} fill="none" stroke="rgba(10, 37, 64, 0.3)"
                    strokeWidth="2" strokeDasharray="4 4"
                    strokeLinecap="round" strokeLinejoin="round" />

              <path d={buildPath(dataBench)} fill="none" stroke="#0A2540"
                    strokeWidth="2" opacity="0.75"
                    strokeLinecap="round" strokeLinejoin="round" />

              <path d={`${buildPath(dataAi)} L ${toX(jaren)} 200 L 20 200 Z`} fill="url(#calcFill)" />
              <path d={buildPath(dataAi)} fill="none" stroke="#FF6B00"
                    strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"
                    style={{ filter: 'drop-shadow(0 4px 8px rgba(255, 107, 0, 0.35))' }} />

              <circle cx={toX(jaren)} cy={toY(dataBench[jaren])} r="4" fill="#0A2540" />
              <circle cx={toX(jaren)} cy={toY(dataSpaar[jaren])} r="3.5" fill="rgba(10,37,64,0.3)" />
              <circle cx={toX(jaren)} cy={toY(dataAi[jaren])} r="13" fill="#FF6B00" opacity="0.16">
                <animate attributeName="r" values="13;17;13" dur="2.4s" repeatCount="indefinite" />
                <animate attributeName="opacity" values="0.16;0;0.16" dur="2.4s" repeatCount="indefinite" />
              </circle>
              <circle cx={toX(jaren)} cy={toY(dataAi[jaren])} r="6" fill="#FF6B00" />
              <circle cx={toX(jaren)} cy={toY(dataAi[jaren])} r="3" fill="#fff" />

              <g fontFamily="JetBrains Mono" fontSize="9" fontWeight="500" fill="rgba(10,37,64,0.5)">
                {Array.from({ length: jaren + 1 }).map((_, i) => (
                  <text key={i} x={toX(i)} y="215" textAnchor="middle">
                    {i === 0 ? 'START' : `JR ${i}`}
                  </text>
                ))}
              </g>
            </svg>
          </div>
        </div>

        <p className="calc-disclaimer">
          Indicatieve berekening op basis van het gemiddelde rendement van 70% per jaar over de afgelopen jaren.
          Resultaten uit het verleden bieden geen garantie voor de toekomst. Beleggen brengt risico's met zich mee.
        </p>
      </div>
    </section>
  );
}

/* ============================================================
 * WhatsApp bubble — calm (manual open only, no auto-pulse)
 * ============================================================ */
function WhatsAppBubble() {
  const [open, setOpen] = useState(false);
  return (
    <div className={'wa-bubble' + (open ? ' open' : '')}>
      {open && (
        <div className="wa-panel">
          <div className="wa-panel-head">
            <span className="wa-panel-avatar">B</span>
            <div>
              <div className="wa-panel-name">Beursadvies klantenservice</div>
              <div className="wa-panel-status">● Online · antwoord binnen 5 min</div>
            </div>
            <button className="wa-panel-close" onClick={() => setOpen(false)} aria-label="Sluiten">×</button>
          </div>
          <div className="wa-panel-msg">
            <p>👋 Vragen over de WK Oranje Actie of de signalen?</p>
            <p>Stuur ons een bericht — we antwoorden meestal binnen een paar minuten.</p>
          </div>
          <a className="wa-panel-cta" href="https://wa.me/31202251485?text=Hoi,%20ik%20heb%20een%20vraag%20over%20de%20WK%20Oranje%20Actie" target="_blank" rel="noopener">
            Start gesprek op WhatsApp →
          </a>
        </div>
      )}
      <button className="wa-fab" onClick={() => setOpen(!open)} aria-label="Direct contact via WhatsApp">
        {open
          ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
          : <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.2-1.7-.8-2-.9-.3-.1-.5-.2-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.1 1.1-1.1 2.7 0 1.6 1.2 3.1 1.3 3.3.2.2 2.3 3.5 5.6 4.9.8.3 1.4.5 1.9.7.8.2 1.5.2 2.1.1.6-.1 1.7-.7 2-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.6-.3zM12 22c-1.7 0-3.4-.5-4.9-1.3L2 22l1.3-5C2.5 15.4 2 13.7 2 12 2 6.5 6.5 2 12 2s10 4.5 10 10-4.5 10-10 10z"/></svg>
        }
      </button>
    </div>
  );
}

/* ============================================================
 * ChatWidget — klantenservice-chat (Claude) met lead-gate.
 * Bezoeker moet eerst naam + telefoon + e-mail invullen, daarna
 * chat via /api/chat (serverless functie met de Claude-API).
 * ============================================================ */
function ChatWidget() {
  const [open, setOpen] = useState(false);
  const [gated, setGated] = useState(false);
  const [lead, setLead] = useState({ naam: '', landcode: '+31', telefoon: '', email: '' });
  const [formErr, setFormErr] = useState('');
  const [messages, setMessages] = useState([]); // {role:'user'|'assistant', content}
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const bodyRef = useRef(null);

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [messages, loading, gated]);

  const startChat = (e) => {
    e.preventDefault();
    const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(lead.email.trim());
    if (!lead.naam.trim() || !lead.telefoon.trim() || !emailOk) {
      setFormErr('Vul je naam, telefoonnummer en een geldig e-mailadres in.');
      return;
    }
    setFormErr('');
    setGated(true);
  };

  const send = async () => {
    const text = input.trim();
    if (!text || loading) return;
    const next = [...messages, { role: 'user', content: text }];
    setMessages(next);
    setInput('');
    setLoading(true);
    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: next,
          lead: { naam: lead.naam, email: lead.email, telefoon: `${lead.landcode} ${lead.telefoon.trim()}` },
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'fout');
      setMessages([...next, { role: 'assistant', content: data.reply }]);
    } catch (err) {
      setMessages([...next, { role: 'assistant', content: 'Excuses, er ging even iets mis. Probeert u het zo nog eens, of bel ons op +31 20 225 1445.' }]);
    } finally {
      setLoading(false);
    }
  };

  const voornaam = lead.naam.trim().split(/\s+/)[0];
  const greeting = `Goedendag${voornaam ? ' ' + voornaam : ''}! 👋 Ik beantwoord graag al uw vragen over de **WK Oranje Actie** van Beursadvies. Waarmee kan ik u helpen?`;

  return (
    <>
      <button className={'chat-fab' + (open ? ' open' : '')} onClick={() => setOpen(!open)} aria-label={open ? 'Chat sluiten' : 'Chat openen'}>
        {open
          ? <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
          : <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>}
      </button>

      {open && (
        <div className="chat-panel" role="dialog" aria-label="Chat met Beursadvies">
          <div className="chat-head">
            <span className="chat-avatar"><img src="/favicon.svg" alt="Beursadvies" /></span>
            <div className="chat-head-text">
              <div className="chat-title">Beursadvies</div>
              <div className="chat-status"><span className="chat-dot"></span> Klantenservice · reageert snel</div>
            </div>
            <button className="chat-close" onClick={() => setOpen(false)} aria-label="Sluiten">×</button>
          </div>

          {!gated ? (
            <form className="chat-gate" onSubmit={startChat}>
              <p className="chat-gate-intro">Laat uw gegevens achter en stel direct uw vraag over de WK Oranje Actie.</p>
              <label className="chat-field">Naam
                <input type="text" value={lead.naam} onChange={(e) => setLead({ ...lead, naam: e.target.value })} placeholder="Voor- en achternaam" />
              </label>
              <label className="chat-field">Telefoonnummer
                <div className="chat-tel">
                  <select className="tel-cc" value={lead.landcode} onChange={(e) => setLead({ ...lead, landcode: e.target.value })} aria-label="Landcode">
                    {LANDCODES.map((c) => <option key={c.code} value={c.code}>{c.label}</option>)}
                  </select>
                  <input type="tel" value={lead.telefoon} onChange={(e) => setLead({ ...lead, telefoon: e.target.value })} placeholder="6 12345678" />
                </div>
              </label>
              <label className="chat-field">E-mailadres
                <input type="email" value={lead.email} onChange={(e) => setLead({ ...lead, email: e.target.value })} placeholder="naam@voorbeeld.nl" />
              </label>
              {formErr && <span className="chat-form-err">{formErr}</span>}
              <button type="submit" className="chat-gate-btn">Start de chat →</button>
              <span className="chat-gate-note">Wij gebruiken uw gegevens alleen om uw vraag te beantwoorden.</span>
            </form>
          ) : (
            <>
              <div className="chat-body" ref={bodyRef}>
                <div className="chat-msg bot"><div className="chat-bubble md" dangerouslySetInnerHTML={{ __html: renderChat(greeting) }} /></div>
                {messages.map((m, i) => (
                  <div key={i} className={'chat-msg ' + (m.role === 'user' ? 'me' : 'bot')}>
                    {m.role === 'user'
                      ? <div className="chat-bubble">{m.content}</div>
                      : <div className="chat-bubble md" dangerouslySetInnerHTML={{ __html: renderChat(m.content) }} />}
                  </div>
                ))}
                {loading && (
                  <div className="chat-msg bot"><div className="chat-bubble chat-typing"><span></span><span></span><span></span></div></div>
                )}
              </div>
              <div className="chat-input">
                <input
                  type="text"
                  value={input}
                  placeholder="Typ uw vraag…"
                  onChange={(e) => setInput(e.target.value)}
                  onKeyDown={(e) => { if (e.key === 'Enter') send(); }}
                />
                <button onClick={send} disabled={loading || !input.trim()} aria-label="Versturen">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </button>
              </div>
              <div className="chat-foot">Geen persoonlijk beleggingsadvies · beleggen kent risico's.</div>
            </>
          )}
        </div>
      )}
    </>
  );
}

/* ============================================================
 * Signup form (mostly unchanged, 3-plan radio)
 * ============================================================ */
function Signup({ selectedPlan, setSelectedPlan, primaryCta, paymentEndpoint }) {
  const [form, setForm] = useState({
    voornaam: '', achternaam: '', email: '', landcode: '+31', tel: '', bedrijf: '',
  });
  const [status, setStatus] = useState('idle'); // idle | loading | done | error
  const [error, setError] = useState('');
  const plan = PLANS.find(p => p.id === selectedPlan) || PLANS[1];
  const updates = (k) => (e) => setForm({ ...form, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });

  // ===================================================================
  //  BETALING STARTEN  (Mollie-koppeling — door developer af te maken)
  // -------------------------------------------------------------------
  //  De frontend stuurt de bestelling naar het betaal-endpoint op het
  //  subdomein (zie `paymentEndpoint` in app.jsx). Dat endpoint maakt
  //  SERVER-SIDE de Mollie-betaling aan met de SECRET key — die hoort
  //  NOOIT in deze frontend — en geeft { checkoutUrl } terug. Wij sturen
  //  de bezoeker daarna door naar de betaalpagina van Mollie.
  // ===================================================================
  const startPayment = async () => {
    setError('');
    if (!form.voornaam || !form.achternaam || !form.email || !form.tel) {
      setError('Vul je voor- en achternaam, e-mailadres en telefoonnummer in.');
      return;
    }
    // Demo-modus: zolang er nog geen betaal-endpoint gekoppeld is, tonen we
    // alleen een bevestiging (zodat de pagina ook zonder backend werkt).
    if (!paymentEndpoint) { setStatus('done'); return; }

    setStatus('loading');
    try {
      const res = await fetch(paymentEndpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          plan: plan.id,            // 'jaar' | 'twee-jaar'
          amount: plan.price,       // 599 | 999  (in euro's)
          months: plan.months,
          customer: {
            voornaam: form.voornaam,
            achternaam: form.achternaam,
            email: form.email,
            telefoon: `${form.landcode} ${form.tel.trim()}`,
            bedrijf: form.bedrijf || null,
          },
        }),
      });
      if (!res.ok) throw new Error('payment-init failed');
      const data = await res.json();
      if (data && data.checkoutUrl) {
        window.location.href = data.checkoutUrl; // door naar Mollie
      } else {
        throw new Error('no checkoutUrl');
      }
    } catch (err) {
      setStatus('error');
      setError('Er ging iets mis bij het starten van de betaling. Probeer het opnieuw of neem contact met ons op.');
    }
  };

  const payLabel = status === 'loading'
    ? 'Bezig met betalen…'
    : status === 'done'
      ? '✓ Aanmelding ontvangen'
      : 'Nu betalen →';
  const payDisabled = status === 'loading' || status === 'done';

  return (
    <section className="s signup" id="aanmelden">
      <div className="container">
        <div className="s-head">
          <span className="pill-scoreboard">
            <span className="dot"></span>
            Aanmelden
          </span>
          <h2 style={{ color: '#fff' }}>Klaar? In 2 minuten lid.</h2>
          <p style={{ color: 'rgba(255,255,255,0.75)' }}>Vul je gegevens in, kies je betaalmethode en je krijgt direct toegang tot de signalen.</p>
        </div>

        <div className="form-shell">
          <div>
            {/* Step 1: Plan */}
            <div className="form-step">
              <div className="step-head">
                <span className="step-num">1</span>
                <span className="step-title">Kies je abonnement</span>
              </div>
              {PLANS.map(p => (
                <label key={p.id} className={'plan-radio' + (selectedPlan === p.id ? ' active' : '')}>
                  <span className="pr-radio"></span>
                  <input
                    type="radio"
                    name="plan"
                    style={{ display: 'none' }}
                    checked={selectedPlan === p.id}
                    onChange={() => setSelectedPlan(p.id)}
                  />
                  <div className="pr-body">
                      <div className="pr-title">{p.title} {p.featured && '— beste keuze'}</div>
                    <div className="pr-price">
                      <span className="strike">€{p.original}</span>
                      <span className="now">€{p.price}</span>
                      <span className="per">/{p.months}mnd</span>
                      <span className="pr-discount">−{p.discountPct}%</span>
                    </div>
                    <div className="pr-month">
                      {p.months === 1 ? 'Eenmalig · geen verlenging' : `€${p.monthly.toFixed(2).replace('.', ',')} per maand`}
                    </div>
                  </div>
                </label>
              ))}
            </div>

            {/* Step 2: Personal */}
            <div className="form-step">
              <div className="step-head">
                <span className="step-num">2</span>
                <span className="step-title">Persoonlijke gegevens</span>
              </div>
              <div className="form-row">
                <div className="field">
                  <label>Voornaam *</label>
                  <input type="text" value={form.voornaam} onChange={updates('voornaam')} />
                </div>
                <div className="field">
                  <label>Achternaam *</label>
                  <input type="text" value={form.achternaam} onChange={updates('achternaam')} />
                </div>
              </div>
              <div className="form-row single">
                <div className="field">
                  <label>E-mailadres *</label>
                  <input type="email" value={form.email} onChange={updates('email')} placeholder="naam@voorbeeld.nl" />
                </div>
              </div>
              <div className="form-row stack-mobile">
                <div className="field">
                  <label>Telefoonnummer *</label>
                  <div className="tel-input">
                    <select className="tel-cc" value={form.landcode} onChange={updates('landcode')} aria-label="Landcode">
                      {LANDCODES.map((c) => <option key={c.code} value={c.code}>{c.label}</option>)}
                    </select>
                    <input type="tel" value={form.tel} onChange={updates('tel')} placeholder="6 12345678" />
                  </div>
                </div>
                <div className="field">
                  <label>Bedrijfsnaam <span className="opt">(optioneel)</span></label>
                  <input type="text" value={form.bedrijf} onChange={updates('bedrijf')} />
                </div>
              </div>
              <button
                type="button"
                className="btn btn-oranje btn-block btn-lg"
                style={{ marginTop: 18 }}
                onClick={startPayment}
                disabled={payDisabled}
              >
                {payLabel}
              </button>
            </div>
          </div>

          {/* Summary */}
          <aside className="summary">
            <div className="sum-title">Je bestelling</div>
            <div className="sum-row">
              <span className="lbl">Abonnement</span>
              <span className="val">{plan.title}</span>
            </div>
            <div className="sum-row">
              <span className="lbl">Looptijd</span>
              <span className="val">{plan.months === 1 ? '1 maand' : `${plan.months} maanden`}</span>
            </div>
            <div className="sum-row">
              <span className="lbl">Normaal</span>
              <span className="val" style={{ textDecoration: 'line-through', color: 'var(--text-soft)' }}>€{plan.original},00</span>
            </div>
            <div className="sum-row">
              <span className="lbl">WK-korting</span>
              <span className="val discount">−€{plan.saving},00 ({plan.discountPct}%)</span>
            </div>
            <div className="sum-total">
              <span className="lbl">Totaal vandaag</span>
              <span className="val">€{plan.price}<small style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-soft)', marginLeft: 4 }}>,00</small></span>
            </div>

            <button
              className="btn btn-oranje btn-block btn-lg"
              onClick={startPayment}
              disabled={payDisabled}
            >
              {payLabel}
            </button>

            {error && <p className="pay-error">{error}</p>}

            <div className="pay-methods">
              <span className="pay-label">Betaal veilig met</span>
              <div className="pay-logos">
                <span className="pay-badge pay-idealwero" aria-label="iDEAL en Wero"><img src="assets/ideal-wero.png" alt="iDEAL / Wero" /></span>
                <span className="pay-badge pay-img" aria-label="Bancontact"><img src="assets/bancontact.png" alt="Bancontact" /></span>
              </div>
            </div>

            <p className="trust-users">
              <span className="tu-stars" aria-hidden="true">★★★★★</span>
              Vertrouwd door meer dan 2.250 gebruikers
            </p>

            <div className="sum-guarantees">
              <span><span className="check">✓</span> Direct toegang na betaling</span>
              <span><span className="check">✓</span> Veilig via Mollie / iDEAL</span>
            </div>

            <p className="renewal-note">Na de eerste periode: automatische verlenging met voorafgaande betaling voor dezelfde periode. Maandelijks opzegbaar (opzegtermijn 1 maand) met pro-rata terugbetaling.</p>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * FAQ
 * ============================================================ */
function FAQ() {
  const items = [
    {
      q: 'Hoe lang loopt de WK Oranje Actie?',
      a: 'De actie loopt zolang Oranje meedoet aan het WK. Wordt Nederland uitgeschakeld, dan stopt de actie direct en gelden weer de reguliere tarieven van €799 en €1.598. Wie nu instapt, legt de WK-prijs vast voor de volledige looptijd van het abonnement.',
    },
    {
      q: 'Ik wil meedoen — hoe werkt het?',
      a: 'Aanmelden gaat volledig online: vul uw gegevens in en betaal veilig via iDEAL, Bancontact of overschrijving. U krijgt direct toegang tot uw persoonlijke dashboard. Daarna kiest u zelf: koppel uw beleggingsrekening voor volledig automatisch handelen, of ontvang realtime signalen die u zelf opvolgt.',
    },
    {
      q: 'Wat levert een abonnement mij concreet op?',
      a: 'Directe toegang tot onze AI-systemen, die de afgelopen jaren gemiddeld 70% rendement per jaar realiseerden. U belegt zonder emoties en zonder stress — volledig automatisch via uw eigen rekening, of met realtime signalen die u eenvoudig zelf opvolgt. Technologie die normaal alleen grootbanken gebruiken, nu toegankelijk voor iedere belegger.',
    },
    {
      q: 'Hoe werkt jullie systeem en waarom is het zo succesvol?',
      a: 'Onze strategie is volledig datagedreven en aangestuurd door AI. Aandelen, indices, edelmetalen, grondstoffen en obligaties worden continu geanalyseerd, waardoor kansen vroeg worden gesignaleerd — onze leden stapten vaak als eersten in groeiaandelen als Nvidia en Palantir. Bij een verwachte daling opent het systeem met precisie een shortpositie, zodat u ook in dalende markten profiteert. Die combinatie van fundamentele en technische analyse met strikt risicobeheer leidde tot gemiddeld 70% rendement.',
    },
    {
      q: 'Moet ik de hele dag de beurzen in de gaten houden?',
      a: 'Nee. Bij automatisch handelen neemt het systeem al het werk uit handen terwijl u uw eigen dingen doet. Wilt u meekijken, dan volgt u de resultaten realtime via uw account, op elk apparaat. Volgt u de signalen liever zelf op, dan krijgt u bij elk koop- of verkoopmoment direct een melding via de Beursadvies-app — inclusief updates wanneer posities worden gesloten.',
    },
    {
      q: 'Wat is de minimale inleg en is mijn geld veilig?',
      a: 'U start al vanaf €2.500. Uw geld blijft altijd op uw eigen rekening en alleen u heeft toegang — wij beheren of bewaren uw vermogen nooit. Begin gerust rustig en verhoog uw inleg later; opnemen of bijstorten kan op elk moment.',
    },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="s faq" id="vragen">
      <div className="container container-narrow">
        <div className="s-head">
          <span className="pill-scoreboard">
            <span className="dot"></span>
            Veelgestelde vragen
          </span>
          <h2>Veelgestelde vragen.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="faq-icon">+</span>
              </button>
              <div className="faq-a"><p>{it.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Contact — formulier + directe contactgegevens
 * ============================================================ */
function Contact() {
  const [form, setForm] = useState({ naam: '', email: '', telefoon: '', onderwerp: 'Algemene vraag', bericht: '' });
  const [status, setStatus] = useState('idle'); // idle | sending | ok
  const [error, setError] = useState('');
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  async function submit() {
    if (!form.naam.trim() || !form.email.trim() || !form.telefoon.trim() || !form.bericht.trim()) {
      setError('Vul uw naam, e-mailadres, telefoonnummer en bericht in.');
      return;
    }
    setError('');
    setStatus('sending');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error();
      setStatus('ok');
    } catch (e) {
      setStatus('idle');
      setError('Er ging iets mis. Probeer het opnieuw of mail ons direct via info@beursadvies.nl.');
    }
  }

  return (
    <section className="s contact" id="contact">
      <div className="container">
        <div className="s-head">
          <span className="pill-scoreboard"><span className="dot"></span>Contact opnemen</span>
          <h2>Wij staan klaar om uw vragen te beantwoorden.</h2>
          <p>Heeft u vragen over onze systemen, abonnementen, resultaten of iets anders? Ons team van experts staat klaar om u persoonlijk te helpen. Vul het formulier in of neem direct contact met ons op via telefoon of e-mail.</p>
        </div>

        <div className="contact-grid">
          <div className="contact-info">
            <a className="contact-card" href="mailto:info@beursadvies.nl">
              <span className="ci-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><polyline points="3,7 12,13 21,7"/></svg></span>
              <span className="ci-txt"><span className="ci-lbl">Stuur ons een e-mail</span><span className="ci-val">info@beursadvies.nl</span></span>
            </a>
            <a className="contact-card" href="tel:+31202251445">
              <span className="ci-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.1-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.4 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg></span>
              <span className="ci-txt"><span className="ci-lbl">Bel ons</span><span className="ci-val">+31 20 225 1445</span></span>
            </a>
            <div className="contact-card is-static">
              <span className="ci-ico"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></span>
              <span className="ci-txt"><span className="ci-lbl">Ons kantoor</span><span className="ci-val">Keizersgracht 391A, 1016 EJ Amsterdam</span></span>
            </div>
          </div>

          <div className="contact-form">
            {status === 'ok' ? (
              <div className="contact-success">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="8 12 11 15 16 9"/></svg>
                <h3>Bedankt, we hebben uw bericht ontvangen</h3>
                <p>Ons team neemt zo spoedig mogelijk contact met u op — meestal binnen één werkdag.</p>
              </div>
            ) : (
              <>
                <div className="form-row">
                  <div className="field"><label>Naam *</label><input type="text" value={form.naam} onChange={upd('naam')} /></div>
                  <div className="field"><label>Telefoonnummer *</label><input type="tel" value={form.telefoon} onChange={upd('telefoon')} placeholder="06 1234 5678" /></div>
                </div>
                <div className="form-row single">
                  <div className="field"><label>E-mailadres *</label><input type="email" value={form.email} onChange={upd('email')} placeholder="naam@voorbeeld.nl" /></div>
                </div>
                <div className="form-row single">
                  <div className="field">
                    <label>Onderwerp</label>
                    <select value={form.onderwerp} onChange={upd('onderwerp')}>
                      <option>Algemene vraag</option>
                      <option>Vraag over een abonnement</option>
                      <option>Factuur aanvragen</option>
                      <option>Hulp bij betaling</option>
                      <option>Vraag over resultaten</option>
                      <option>Anders</option>
                    </select>
                  </div>
                </div>
                <div className="form-row single">
                  <div className="field"><label>Uw bericht *</label><textarea rows="4" value={form.bericht} onChange={upd('bericht')} placeholder="Waar kunnen we u mee helpen?"></textarea></div>
                </div>
                {error && <p className="contact-error">{error}</p>}
                <button type="button" className="btn btn-oranje btn-block btn-lg" onClick={submit} disabled={status === 'sending'}>
                  {status === 'sending' ? 'Versturen…' : 'Verstuur bericht'}
                </button>
                <p className="contact-fineprint">We reageren meestal binnen één werkdag. Liever direct? Bel <a href="tel:+31202251445">+31 20 225 1445</a>.</p>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
 * Final CTA — calm, value-focused (no second urgency screamer)
 * ============================================================ */
function FinalCTA({ onCta, primaryCta }) {
  return (
    <section className="final-cta">
      <div className="container">
        <h2>De aftrap komt eraan.</h2>
        <p>Word lid vóór Oranje wordt uitgeschakeld. Daarna gaan de tarieven terug naar de standaardprijs van €799 en €1.598.</p>
        <a className="btn btn-white btn-lg" href="#aanmelden" onClick={(e) => { e.preventDefault(); onCta && onCta(); }}>{primaryCta} →</a>
      </div>
    </section>
  );
}

/* ============================================================
 * Footer
 * ============================================================ */
function Footer({ onCta }) {
  return (
    <footer>
      <div className="container">
        <div className="foot-grid">
          {/* Column 1: brand + contact */}
          <div className="foot-col foot-brand">
            <img className="foot-logo-img" src="assets/beursadvies-logo.png" alt="Beursadvies — Altijd de markt een stap voor." />
            <ul className="foot-contact">
              <li>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13 1.05.37 2.07.72 3.06a2 2 0 0 1-.45 2.11L8.09 10.91a16 16 0 0 0 6 6l2.02-1.29a2 2 0 0 1 2.11-.45c.99.35 2.01.59 3.06.72A2 2 0 0 1 22 16.92z"/></svg>
                <a href="tel:+31202251445">+31 20 225 1445</a>
              </li>
              <li>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                <a href="mailto:info@beursadvies.nl">info@beursadvies.nl</a>
              </li>
              <li>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                <span>Keizersgracht 391A<br/>1016 EJ Amsterdam</span>
              </li>
            </ul>
            <p className="foot-copy">© 2026 Beursadvies. All rights reserved.</p>
          </div>

          {/* Column 2: links */}
          <nav className="foot-col foot-links" aria-label="Footer-navigatie">
            <a href="https://beursadvies.nl/over-ons">Over ons</a>
            <a href="https://beursadvies.nl/resultaten">Resultaten</a>
            <a href="https://beursadvies.nl/blog">Blog</a>
            <a href="https://beursadvies.nl/werkwijze">Werkwijze</a>
            <a href="https://beursadvies.nl/faq">FAQ</a>
            <a href="https://beursadvies.nl/contact">Contact</a>
          </nav>

          {/* Column 3: WK Oranje Actie CTA */}
          <div className="foot-col foot-cta-card">
            <span className="foot-cta-eyebrow">WK Oranje Actie 2026</span>
            <h4>Profiteer nu van de WK-prijs</h4>
            <p>Word vandaag nog klant en profiteer van onze speciale WK-actie — alleen geldig zolang Oranje meedoet aan het toernooi.</p>
            <a href="#aanmelden" onClick={(e) => { e.preventDefault(); onCta && onCta(); }} className="btn btn-oranje btn-lg" style={{ marginTop: 4 }}>
              Meld u nu aan →
            </a>
            <ul className="foot-cta-bullets">
              <li><span className="check">✓</span> Direct toegang na betaling</li>
              <li><span className="check">✓</span> Binnen 15 minuten opgestart</li>
            </ul>
          </div>
        </div>

        <div className="foot-legal">
          <span>SB Online en Beheer B.V. &nbsp;|&nbsp; KvK: 84498331 &nbsp;|&nbsp; VAT: NL863234343B01</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  TopBar, Nav, Hero, Stats, TrustStrip, PressStrip, PerformanceTable, Pricing, Benefits, Testimonials, Signup, FAQ, FinalCTA, Footer,
  Calculator, WhatsAppBubble, ChatWidget, AnimatedNum,
  PLANS, useCountdown,
});