/* global React, Reveal, CountUp, Eyebrow, Button, EquityChart, BrandDashboard */

/* ============ HOE HET WERKT ============ */
function HowItWorks() {
  const steps = [
    { k: "01", t: "Aanmelden & kwalificeren", d: "Plan een gratis strategiegesprek. Wij zorgen dat je publiek en doelen goed aansluiten." },
    { k: "02", t: "Wij bouwen je fonds", d: "We zetten je gemerkte PAMM op bij onze gereguleerde brokerpartner. Live in [X] dagen." },
    { k: "03", t: "Wij handelen & beheren", d: "Ons team voert de strategie dagelijks uit, met transparante rapportage aan jou en je investeerders." },
    { k: "04", t: "Jij brengt investeerders", d: "Jij richt je op wat je al het beste kunt — je publiek. Je verdient aan elke euro onder beheer." },
  ];
  return (
    <section className="section paper-2 how" id="how">
      <div className="wrap">
        <div className="section-head">
          <Eyebrow>Hoe het werkt</Eyebrow>
          <Reveal as="h2">Van idee tot live fonds<br />in vier stappen.</Reveal>
        </div>
        <div className="how-track">
          <div className="how-rail" />
          {steps.map((s, i) => (
            <Reveal className="how-step" key={s.k} delay={i * 120}>
              <div className="how-node"><span className="kicker-num">{s.k}</span></div>
              <h3 className="how-t">{s.t}</h3>
              <p className="how-d">{s.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ WHITE-LABEL BEWIJS ============ */
function WhiteLabel() {
  const brands = [
    { brand: "MERIDIAN CAPITAL", initials: "M", color: "oklch(0.78 0.14 250)", aum: 8.6, ret: 21.4, curve: [10,12,11,15,18,17,21,25,23,28,32,30,36,40,44,42,49,54,58,63] },
    { brand: "NORTHWIND FX", initials: "N", color: "var(--accent)", aum: 14.1, ret: 19.2, curve: [12,14,13,17,16,20,24,22,27,31,29,35,39,37,43,48,46,52,57,61] },
    { brand: "ASCEND PARTNERS", initials: "A", color: "oklch(0.82 0.13 75)", aum: 5.9, ret: 23.7, curve: [9,11,14,13,18,22,20,26,30,28,34,38,42,40,47,52,50,56,60,66] },
  ];
  return (
    <section className="section navy-deep whitelabel" id="proof">
      <div className="grid-bg" />
      <div className="wrap">
        <div className="section-head" style={{ maxWidth: 820 }}>
          <Eyebrow accent>White-label bewijs</Eyebrow>
          <Reveal as="h2">Eén motor.<br />Eindeloze merken.</Reveal>
        </div>
        <div className="wl-grid">
          {brands.map((b, i) => (
            <Reveal className={`wl-card wl-${i}`} key={b.brand} delay={i * 120}>
              <BrandDashboard {...b} />
            </Reveal>
          ))}
        </div>
        <Reveal delay={160} className="wl-engine">
          <div className="wl-engine-line" />
          <div className="wl-engine-badge">
            <span className="dot" /> ZELFDE FONDS · ZELFDE STRATEGIE · ZELFDE RESULTATEN
          </div>
        </Reveal>
        <Reveal as="p" delay={220} className="wl-caption">
          Drie compleet verschillende merken — en geen enkele investeerder zou ooit weten dat ze dezelfde motor delen. <strong>Jouw merk is de volgende.</strong>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ TRACK RECORD ============ */
function TrackRecord() {
  const stats = [
    { v: 24, dec: 0, suffix: "%", label: "Beoogd jaarrendement", note: "[Placeholder — vul geverifieerd cijfer in]" },
    { v: 8.5, dec: 1, prefix: "−", suffix: "%", label: "Maximale drawdown", note: "Piek-tot-dal, [X]-jaars venster" },
  ];
  return (
    <section className="section navy track" id="track">
      <div className="grid-bg" />
      <div className="wrap">
        <div className="track-grid">
          <div className="track-left">
            <Eyebrow accent>Track record</Eyebrow>
            <Reveal as="h2" className="track-h2">Cijfers die je kunt verifiëren.<br /><span className="track-muted">Geen cijfers die je moet geloven.</span></Reveal>
            <div className="track-stats">
              {stats.map((s) => (
                <Reveal className="track-stat" key={s.label} delay={80}>
                  <div className="track-v">
                    {s.prefix || ""}<CountUp to={s.v} decimals={s.dec} suffix={s.suffix} duration={1700} />
                  </div>
                  <div className="track-l">{s.label}</div>
                  <div className="track-n">{s.note}</div>
                </Reveal>
              ))}
            </div>
            <Reveal delay={120} className="track-meta">
              <div className="track-meta-row">
                <span className="tm-k">Geverifieerde resultaten</span>
                <a className="tm-link" href="#call">Myfxbook / FX Blue link →</a>
              </div>
              <div className="track-meta-row">
                <span className="tm-k">Rapportage</span>
                <span className="tm-v">Transparante maandoverzichten aan jou en elke investeerder</span>
              </div>
            </Reveal>
          </div>
          <div className="track-right">
            <Reveal className="track-chartcard" delay={120}>
              <div className="tcc-head">
                <div>
                  <div className="tcc-label">Samengestelde equity-curve</div>
                  <div className="tcc-sub">Geïndexeerd · illustratief</div>
                </div>
                <div className="tcc-badge"><span className="dot" /> LIVE TRACK</div>
              </div>
              <div className="tcc-chart">
                <EquityChart height={260} color="var(--accent)" strokeW={3} />
              </div>
              <div className="tcc-axis">
                <span>2022</span><span>2023</span><span>2024</span><span>2025</span><span>2026</span>
              </div>
            </Reveal>
          </div>
        </div>
        <Reveal as="p" delay={80} className="fineprint" style={{ marginTop: 40 }}>
          Handelen brengt een aanzienlijk risico op verlies met zich mee en is niet voor elke belegger geschikt. In het verleden behaalde resultaten bieden geen garantie voor de toekomst.
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks, WhiteLabel, TrackRecord });