/* global React, Reveal, CountUp, Eyebrow, Button, Logo, EquityChart, Arrow */
const { useState: useState1, useEffect: useEffect1, useRef: useRef1 } = React;

/* ============ NAV ============ */
function Nav() {
  const [scrolled, setScrolled] = useState1(false);
  useEffect1(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-inner">
        <Logo />
        <div className="nav-links">
          <a href="#solution">Wat je krijgt</a>
          <a href="#how">Hoe het werkt</a>
          <a href="#track">Track record</a>
          <a href="#earn">Wat je verdient</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch">
            <a href="index.html">EN</a>
            <span className="on">NL</span>
          </div>
          <Button href="#call" variant="primary">Plan een strategiegesprek</Button>
        </div>
      </div>
    </nav>
  );
}

/* ============ HERO ============ */
function BrandDashboard({ brand = "MERIDIAN CAPITAL", color = "var(--accent)", initials = "M", aum = 4.2, ret = 18.6, curve }) {
  return (
    <div className="dash" style={{ "--bc": color }}>
      <div className="dash-top">
        <div className="dash-brand">
          <div className="dash-logo" style={{ background: color }}>{initials}</div>
          <div>
            <div className="dash-name">{brand}</div>
            <div className="dash-sub">Beleggersdashboard</div>
          </div>
        </div>
        <div className="dash-live"><span className="dot" /> LIVE</div>
      </div>
      <div className="dash-stats">
        <div>
          <div className="dl">Beheerd vermogen</div>
          <div className="dv">€<CountUp to={aum} decimals={1} duration={1800} />M</div>
        </div>
        <div>
          <div className="dl">Rendement YTD</div>
          <div className="dv" style={{ color: color }}>+<CountUp to={ret} decimals={1} duration={1800} />%</div>
        </div>
      </div>
      <div className="dash-chart">
        <EquityChart height={150} color={color} points={curve} strokeW={2.6} />
      </div>
      <div className="dash-foot">
        <span>Maandoverzicht · mei 2026</span>
        <span className="dash-pill" style={{ color }}>Geverifieerd</span>
      </div>
    </div>
  );
}

function Hero() {
  const cardRef = useRef1(null);
  useEffect1(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    let raf = 0, tx = 0, ty = 0, cx = 0, cy = 0;
    const onMove = (e) => {
      const w = window.innerWidth, h = window.innerHeight;
      tx = (e.clientX / w - 0.5) * 16;
      ty = (e.clientY / h - 0.5) * 16;
    };
    const onScroll = () => {
      if (cardRef.current) cardRef.current.style.setProperty("--sy", `${window.scrollY * -0.06}px`);
    };
    const loop = () => {
      cx += (tx - cx) * 0.08; cy += (ty - cy) * 0.08;
      if (cardRef.current) cardRef.current.style.setProperty("--mx", `${cx}px`), cardRef.current.style.setProperty("--my", `${cy}px`);
      raf = requestAnimationFrame(loop);
    };
    window.addEventListener("mousemove", onMove);
    window.addEventListener("scroll", onScroll, { passive: true });
    raf = requestAnimationFrame(loop);
    return () => { window.removeEventListener("mousemove", onMove); window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
  }, []);

  return (
    <header className="section navy-deep hero" id="top">
      <div className="grid-bg" />
      <div className="hero-glow" />
      <div className="wrap hero-grid">
        <div className="hero-copy">
          <Reveal as="span" className="eyebrow accent" style={{ display: "inline-flex" }}>Fondsbeheer volledig uit handen</Reveal>
          <Reveal delay={80}>
            <h1 className="hero-h1">
              Lanceer je eigen<br />beleggingsfonds.<br />
              <span className="hl">Wij beheren het.</span> Jij brengt investeerders.
            </h1>
          </Reveal>
          <Reveal delay={160} as="p" className="hero-sub">
            Fund Architects ontwerpt, bouwt en beheert een volledig operationeel PAMM-fonds onder <em>jouw</em> naam. Wij regelen de opzet, de handelsstrategie en het dagelijkse beheer. Jouw enige taak: het kapitaal binnenhalen.
          </Reveal>
          <Reveal delay={240} className="hero-cta">
            <Button href="#call" variant="primary" lg>Plan je gratis strategiegesprek</Button>
          </Reveal>
          <Reveal delay={320} className="trust-strip">
            {["Gereguleerde brokerpartners", "Geverifieerde resultaten", "[X]+ jaar kapitaalbeheer", "Gescheiden investeerdersgelden"].map((t) => (
              <span key={t} className="trust-item">{t}</span>
            ))}
          </Reveal>
        </div>

        <div className="hero-visual">
          <div className="hero-card" ref={cardRef}>
            <BrandDashboard brand="JOUW FONDS" color="var(--accent)" initials="✦" aum={12.4} ret={23.8} />
          </div>
          <div className="hero-card-ghost gh1" />
          <div className="hero-card-ghost gh2" />
        </div>
      </div>
      <a className="scroll-cue" href="#problem" aria-label="Scroll omlaag">
        <span>Scroll</span>
        <svg width="14" height="22" viewBox="0 0 14 22" fill="none"><rect x="1" y="1" width="12" height="20" rx="6" stroke="currentColor" strokeWidth="1.2" opacity="0.5"/><circle cx="7" cy="6" r="2" fill="currentColor"/></svg>
      </a>
    </header>
  );
}

/* ============ PROBLEM ============ */
function Problem() {
  const burdens = ["Brokerinfrastructuur", "Een bewezen strategie", "Risicobeheersing", "Compliance", "Dagelijkse schermtijd"];
  return (
    <section className="section paper problem" id="problem">
      <div className="wrap">
        <div className="problem-grid">
          <div className="problem-left">
            <Eyebrow>De kloof</Eyebrow>
            <Reveal as="h2" className="problem-h2">Je hebt het publiek.<br /><span className="muted">Je mist de motor.</span></Reveal>
          </div>
          <div className="problem-right">
            <Reveal as="p" delay={60} className="problem-p">
              Je hebt jaren besteed aan het opbouwen van een publiek dat je vertrouwt. Maar dat vertrouwen omzetten in een echt fonds vereist brokerinfrastructuur, een bewezen strategie, risicobeheersing, compliance en de schermtijd om écht te handelen — elke dag opnieuw.
            </Reveal>
            <Reveal as="p" delay={140} className="problem-p">
              Dat is een fulltime operatie. Dus de kans blijft liggen, ongebruikt, terwijl je anderen minder aandacht ziet verzilveren dan jij al hebt.
            </Reveal>
            <Reveal delay={220} className="burden-list">
              {burdens.map((b) => (
                <span className="burden" key={b}><span className="burden-x">×</span>{b}</span>
              ))}
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ SOLUTION ============ */
function Solution() {
  const cards = [
    { k: "01", t: "Setup", d: "We configureren je PAMM-account bij een gereguleerde brokerpartner. Volledig verbonden, compliant en live in [X] dagen.", tag: "Broker + infra" },
    { k: "02", t: "Strategie", d: "Je fonds draait op onze bewezen, risicobeheerde handelsstrategie — verfijnd en getest over [X] jaar in live markten.", tag: "Bewezen edge" },
    { k: "03", t: "Beheer", d: "Ons team handelt en beheert elke positie, elke dag. Nul schermtijd vereist van jou.", tag: "Dagelijkse operatie" },
    { k: "04", t: "Branding", d: "Jouw naam. Jouw logo. Jouw kleuren. Jouw beleggersdashboard. Investeerders zien jóuw merk — nooit het onze.", tag: "100% white-label" },
  ];
  return (
    <section className="section navy solution" id="solution">
      <div className="grid-bg" />
      <div className="wrap">
        <div className="section-head">
          <Eyebrow accent>De oplossing — wat je krijgt</Eyebrow>
          <Reveal as="h2">Wij hebben de blauwdruk getekend.<br />Jij zet er je naam op.</Reveal>
          <Reveal as="p" delay={80} className="lede">
            Fund Architects geeft je een compleet, kant-en-klaar beleggingsfonds — volledig gemerkt als het jouwe, volledig beheerd door ons.
          </Reveal>
        </div>
        <div className="sol-grid">
          {cards.map((c, i) => (
            <Reveal className="sol-card" key={c.k} delay={i * 90}>
              <div className="sol-card-top">
                <span className="sol-k kicker-num">{c.k}</span>
                <span className="sol-tag">{c.tag}</span>
              </div>
              <h3 className="sol-t">{c.t}</h3>
              <p className="sol-d">{c.d}</p>
              <div className="sol-line" />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Problem, Solution, BrandDashboard });