/* global React, Reveal, Eyebrow, Button, Logo */
const { useState: useState3, useMemo: useMemo3 } = React;

function fmtMoney(n) {
  if (n >= 1e6) return "€" + (n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 2).replace(/\.00$/, "").replace(".", ",") + "M";
  if (n >= 1e3) return "€" + Math.round(n / 1e3) + "K";
  return "€" + Math.round(n);
}
function fmtFull(n) {
  return "€" + Math.round(n).toLocaleString("nl-NL");
}

/* ============ WAT JE VERDIENT — calculator ============ */
function Earnings() {
  const [aum, setAum] = useState3(2_000_000);
  const annualReturn = 0.24;
  const perfFee = 0.25;
  const yourShare = 0.30;

  const { perYear, perMonth } = useMemo3(() => {
    const profit = aum * annualReturn;
    const feePool = profit * perfFee;
    const yours = feePool * yourShare;
    return { perYear: yours, perMonth: yours / 12 };
  }, [aum]);

  const min = 100_000, max = 25_000_000;
  const pct = ((aum - min) / (max - min)) * 100;
  const presets = [500_000, 2_000_000, 10_000_000];

  return (
    <section className="section paper earn" id="earn">
      <div className="wrap">
        <div className="section-head" style={{ maxWidth: 720 }}>
          <Eyebrow>Wat je verdient</Eyebrow>
          <Reveal as="h2">Een eenvoudige verdeling<br />die met je meegroeit.</Reveal>
          <Reveal as="p" delay={80} className="lede">
            Je verdient <strong style={{ color: "var(--accent-ink)" }}>[X]% van de performance fees</strong> op al het kapitaal dat je binnenbrengt — terugkerend, zolang dat kapitaal belegd blijft.
          </Reveal>
        </div>

        <Reveal className="calc">
          <div className="calc-left">
            <div className="calc-row">
              <label className="calc-label" htmlFor="aum">Kapitaal dat je binnenbrengt (AUM)</label>
              <output className="calc-aum">{fmtFull(aum)}</output>
            </div>
            <input
              id="aum" className="calc-slider" type="range"
              min={min} max={max} step={50_000} value={aum}
              onChange={(e) => setAum(Number(e.target.value))}
              style={{ "--pct": pct + "%" }}
            />
            <div className="calc-scale"><span>{fmtMoney(min)}</span><span>{fmtMoney(max)}</span></div>
            <div className="calc-presets">
              {presets.map((p) => (
                <button key={p} className={`preset ${aum === p ? "on" : ""}`} onClick={() => setAum(p)}>{fmtMoney(p)}</button>
              ))}
            </div>
            <div className="calc-assume">
              <span><b>{Math.round(annualReturn * 100)}%</b> beoogd rendement</span>
              <span className="sep" />
              <span><b>{Math.round(perfFee * 100)}%</b> performance fee</span>
              <span className="sep" />
              <span><b>[X]%</b> jouw aandeel</span>
            </div>
          </div>

          <div className="calc-right">
            <div className="calc-out-label">Je geschatte inkomsten</div>
            <div className="calc-out-big">{fmtFull(perMonth)}<span className="per">/mnd</span></div>
            <div className="calc-out-year">≈ {fmtFull(perYear)} per jaar, terugkerend</div>
            <div className="calc-bar"><div className="calc-bar-fill" style={{ width: Math.min(100, (perMonth / 60000) * 100) + "%" }} /></div>
            <p className="calc-note">Hoe meer je ophaalt, hoe meer je verdient. <strong>Geen limiet, geen plafond, geen einddatum.</strong></p>
            <Button href="#call" variant="primary" lg>Bereken wat jij kunt verdienen</Button>
          </div>
        </Reveal>
        <Reveal as="p" delay={60} className="fineprint" style={{ marginTop: 22 }}>
          Uitsluitend ter illustratie. De getoonde cijfers gebruiken placeholder-aannames en vormen geen voorspelling of garantie. Vervang door je echte, geverifieerde voorwaarden.
        </Reveal>
      </div>
    </section>
  );
}

/* ============ VOOR WIE ============ */
function WhoFor() {
  const audiences = [
    { t: "Introducing brokers", d: "& partnernetwerken", glyph: "◆" },
    { t: "Community- & groepseigenaren", d: "betrokken, vertrouwende leden", glyph: "●" },
    { t: "Finance-creators", d: "& influencers", glyph: "▲" },
    { t: "Affiliate-marketeers", d: "met een betrokken publiek", glyph: "■" },
  ];
  return (
    <section className="section navy-deep whofor" id="who">
      <div className="grid-bg" />
      <div className="wrap">
        <div className="section-head">
          <Eyebrow accent>Voor wie</Eyebrow>
          <Reveal as="h2">Gebouwd voor mensen<br />die al bereik hebben.</Reveal>
        </div>
        <div className="who-grid">
          {audiences.map((a, i) => (
            <Reveal className="who-card" key={a.t} delay={i * 90}>
              <span className="who-glyph">{a.glyph}</span>
              <div>
                <h3 className="who-t">{a.t}</h3>
                <p className="who-d">{a.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal as="p" delay={120} className="who-foot">
          Heb je een publiek en geen zin om de hele dag naar grafieken te staren — <strong>dan is dit voor jou gemaakt.</strong>
        </Reveal>
      </div>
    </section>
  );
}

/* ============ OVER ONS ============ */
function About() {
  return (
    <section className="section paper-2 about" id="about">
      <div className="wrap">
        <div className="about-grid">
          <div className="about-copy">
            <Eyebrow>Over ons</Eyebrow>
            <Reveal as="h2" className="about-h2">Wie het geld<br />écht beheert.</Reveal>
            <Reveal as="p" delay={80} className="about-p">
              De mensen achter Fund Architects beheren al <b>[X] jaar</b> live kapitaal in <b>[markten]</b>. Wanneer je met ons samenwerkt, is dit het team dat achter jouw merk staat.
            </Reveal>
            <Reveal delay={140} className="about-cred">
              {[["[X]+ jr", "Live kapitaal beheerd"], ["[X]", "Markten verhandeld"], ["24/7", "Deskdekking"]].map(([v, l]) => (
                <div className="about-cred-item" key={l}><div className="acv">{v}</div><div className="acl">{l}</div></div>
              ))}
            </Reveal>
          </div>
          <Reveal delay={120} className="about-team">
            {[1, 2, 3, 4].map((n) => (
              <div className="team-slot" key={n}>
                <div className="ph team-ph"><span className="ph-label">teamfoto</span></div>
                <div className="team-name">[Naam]</div>
                <div className="team-role">[Rol / track record]</div>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQ() {
  const items = [
    { q: "Waar wordt het geld van investeerders bewaard?", a: "Op gescheiden rekeningen bij een gereguleerde broker. Jij komt nooit aan klantgelden — en wij ook niet. Wij hebben alleen handelsbevoegdheid; het kapitaal blijft bij de broker." },
    { q: "Wat kost het mij om te starten?", a: "[Voorwaarden placeholder — bijv. partnerschapsfee / model op basis van uitsluitend omzetdeling.]" },
    { q: "Hoe snel kan ik live?", a: "[X] dagen van goedkeuring tot een volledig gemerkt, handelend fonds." },
    { q: "Heb ik een handels- of financiële achtergrond nodig?", a: "Nee. Wij verzorgen 100% van de handel en het beheer. Jij verzorgt je publiek." },
    { q: "Is dit compliant in mijn land?", a: "Regelgeving verschilt per regio. We lopen de exacte structuur voor jouw markt met je door tijdens het strategiegesprek." },
    { q: "Wat als mijn investeerders willen uitstappen?", a: "PAMM-accounts zijn daarvoor gemaakt — investeerders houden controle over hun eigen kapitaal en kunnen onder de afgesproken voorwaarden storten of opnemen." },
  ];
  const [open, setOpen] = useState3(0);
  return (
    <section className="section paper faq" id="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div className="faq-head">
            <Eyebrow>FAQ</Eyebrow>
            <Reveal as="h2" className="faq-h2">Vragen,<br />eerlijk beantwoord.</Reveal>
            <Reveal as="p" delay={80} className="faq-sub">Wat we missen behandelen we tijdens je strategiegesprek.</Reveal>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <Reveal className={`faq-item ${open === i ? "open" : ""}`} key={i} delay={i * 50}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                  <span>{it.q}</span>
                  <span className="faq-icon" aria-hidden="true"><span /><span /></span>
                </button>
                <div className="faq-a-wrap"><div className="faq-a">{it.a}</div></div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ LAATSTE CTA + FOOTER ============ */
function FinalCTA() {
  return (
    <section className="section navy-deep final" id="call">
      <div className="grid-bg" />
      <div className="hero-glow" style={{ top: "auto", bottom: "-20%", left: "50%", transform: "translateX(-50%)", right: "auto" }} />
      <div className="wrap final-wrap">
        <Eyebrow accent>De volgende stap</Eyebrow>
        <Reveal as="h2" className="final-h2">Je publiek is klaar.<br /><span className="final-hl">Je fonds nog niet — voorlopig.</span></Reveal>
        <Reveal as="p" delay={80} className="final-p">
          Plan een gratis strategiegesprek. We brengen in kaart hoe jouw gemerkte fonds eruitziet, wat je kunt verdienen en hoe snel je kunt lanceren.
        </Reveal>
        <Reveal delay={160} className="final-cta">
          <Button href="#call" variant="primary" lg>Plan je gratis strategiegesprek</Button>
        </Reveal>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo />
            <p className="footer-tag">Wij ontwerpen en bouwen je fonds. Jij brengt de investeerders.</p>
          </div>
          <div className="footer-nav">
            {[["Product", ["Wat je krijgt", "Hoe het werkt", "Track record", "Wat je verdient"]],
              ["Bedrijf", ["Over ons", "FAQ", "Plan een gesprek"]]].map(([h, links]) => (
              <div className="footer-col" key={h}>
                <div className="footer-h">{h}</div>
                {links.map((l) => <a key={l} href="#top">{l}</a>)}
              </div>
            ))}
          </div>
        </div>
        <p className="fineprint footer-disc">
          Fund Architects levert diensten voor handelsbeheer en fondsinfrastructuur. Handelen in vreemde valuta en andere hefboomproducten brengt een hoog risiconiveau met zich mee en is mogelijk niet voor alle beleggers geschikt. In het verleden behaalde resultaten bieden geen garantie voor de toekomst. [Wettelijke disclosure te bevestigen met juridisch adviseur op basis van je werkgebied.]
        </p>
        <div className="footer-base">
          <span>© 2026 Fund Architects</span>
          <span className="footer-base-links"><a href="#top">Privacy</a><a href="#top">Voorwaarden</a><a href="#top">Risico-informatie</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Earnings, WhoFor, About, FAQ, FinalCTA, Footer });