/* 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">What you get</a>
          <a href="#how">How it works</a>
          <a href="#track">Track record</a>
          <a href="#earn">What you earn</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-right">
          <div className="lang-switch">
            <span className="on">EN</span>
            <a href="Fund%20Architects%20NL.html">NL</a>
          </div>
          <Button href="#call" variant="primary">Book a Strategy Call</Button>
        </div>
      </div>
    </nav>
  );
}

/* ============ HERO ============ */
function BrandDashboard({ brand = "MERIDIAN CAPITAL", color = "var(--accent)", initials = "M", aum = 4.2, ret = 18.6, curve, mono = false }) {
  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">Investor dashboard</div>
          </div>
        </div>
        <div className="dash-live"><span className="dot" /> LIVE</div>
      </div>
      <div className="dash-stats">
        <div>
          <div className="dl">Assets under mgmt</div>
          <div className="dv">$<CountUp to={aum} decimals={1} duration={1800} />M</div>
        </div>
        <div>
          <div className="dl">Return 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>Monthly statement · May 2026</span>
        <span className="dash-pill" style={{ color }}>Verified</span>
      </div>
    </div>
  );
}

function Hero() {
  const stageRef = useRef1(null);
  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" ref={stageRef}>
      <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" }}>Done-for-you fund management</Reveal>
          <Reveal delay={80}>
            <h1 className="hero-h1">
              Launch your own<br />investment fund.<br />
              <span className="hl">We run it.</span> You bring investors.
            </h1>
          </Reveal>
          <Reveal delay={160} as="p" className="hero-sub">
            Fund Architects designs, builds, and manages a fully operational PAMM fund under <em>your</em> name. We handle the setup, the trading strategy, and the daily management. Your only job is to bring the capital.
          </Reveal>
          <Reveal delay={240} className="hero-cta">
            <Button href="#call" variant="primary" lg>Book Your Free Strategy Call</Button>
          </Reveal>
          <Reveal delay={320} className="trust-strip">
            {["Regulated broker partners", "Verified track record", "[X]+ years managing capital", "Segregated investor funds"].map((t) => (
              <span key={t} className="trust-item">{t}</span>
            ))}
          </Reveal>
        </div>

        <div className="hero-visual">
          <div className="hero-card" ref={cardRef}>
            <BrandDashboard brand="YOUR FUND" 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 down">
        <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 = ["Broker infrastructure", "A proven strategy", "Risk controls", "Compliance", "Daily screen time"];
  return (
    <section className="section paper problem" id="problem">
      <div className="wrap">
        <div className="problem-grid">
          <div className="problem-left">
            <Eyebrow>The gap</Eyebrow>
            <Reveal as="h2" className="problem-h2">You've got the audience.<br /><span className="muted">You're missing the engine.</span></Reveal>
          </div>
          <div className="problem-right">
            <Reveal as="p" delay={60} className="problem-p">
              You've spent years building an audience that trusts you. But turning that trust into a real fund means broker infrastructure, a proven strategy, risk controls, compliance, and the screen time to actually trade — every single day.
            </Reveal>
            <Reveal as="p" delay={140} className="problem-p">
              That's a full-time operation. So the opportunity just sits there, unused, while you watch other people monetize less attention than you already have.
            </Reveal>
            <Reveal delay={220} className="burden-list">
              {burdens.map((b, i) => (
                <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 configure your PAMM account with a regulated broker partner. Fully connected, compliant, and live in [X] days.", tag: "Broker + infra" },
    { k: "02", t: "Strategy", d: "Your fund runs on our proven, risk-managed trading strategy — refined and battle-tested over [X] years in live markets.", tag: "Proven edge" },
    { k: "03", t: "Management", d: "Our team trades and manages every position, every day. Zero screen time required from you.", tag: "Daily ops" },
    { k: "04", t: "Branding", d: "Your name. Your logo. Your colors. Your investor dashboard. Investors see your brand — never ours.", 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>The solution — what you get</Eyebrow>
          <Reveal as="h2">We've drawn the blueprint.<br />You put your name on it.</Reveal>
          <Reveal as="p" delay={80} className="lede">
            Fund Architects hands you a complete, ready-to-run investment fund — branded entirely as yours, managed entirely by us.
          </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 });