// All 10 folds — composed in app.jsx

function Hero({ onTalk }) {
  return (
    <section className="hero">
      <div className="hero-centered wrap">
        <div className="hero-eyebrow" data-reveal>
          <span className="eyebrow"><span className="acc">●</span> For B2B startup founders.</span>
        </div>

        <h1 className="h1" data-reveal>
          We help startups hire their first
          <span className="h1-break"></span>
          <em className="acc" style={{fontStyle: "normal", fontSize: "1.15em", textDecoration: "underline", textDecorationColor: "var(--accent)", textUnderlineOffset: "8px", textDecorationThickness: "4px"}}>marketing & sales team.</em>
        </h1>

        <div className="hero-tagline" data-reveal>
          <span className="ht-bar"></span>
          <span>Fast. Right. <strong>Half the cost.</strong></span>
        </div>

        <p className="subhead hero-subhead" data-reveal>
          Faster than an agency. More accurate than a recruiter.
        </p>

      </div>
    </section>
  );
}

function Interlude() {
  return (
    <section className="section interlude">
      <div className="wrap">
        <RecentActivity />
        <div className="hero-foot interlude-credit" data-reveal>
          <div className="credit">
            <strong>The hiring firm built for B2B startups.</strong><br/>
            Built by Jazz Yun. 3x founder. Personally hired 100+ marketing, sales, and growth people into his own teams.
          </div>
          <div className="stamp">
            v5 · MAY 2026<br/>
            <span className="ok">●</span> SHIPPING WEEKLY
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductCard() {
  return (
    <div className="product-card">
      <div className="pc-head">
        <span className="dots"><span></span><span></span><span></span></span>
        <span className="title">CANDIDATE SCORECARD · NEW.MOAT</span>
        <span className="live"><span className="d"></span>LIVE</span>
      </div>
      <div className="pc-body">
        <div className="pc-section">
          <div className="pc-row">
            <span className="k">ROLE</span>
            <span className="v">Head of Growth</span>
          </div>
          <div className="pc-row">
            <span className="k">STAGE</span>
            <span className="v">Seed · B2B SaaS</span>
          </div>
          <div className="pc-row">
            <span className="k">STATUS</span>
            <span className="pc-tag">REVIEWED · PERFECT FIT</span>
          </div>
        </div>

        <div className="pc-section">
          <div style={{fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", color: "var(--ink-500)", textTransform: "uppercase", marginBottom: 10}}>
            EVALUATED AGAINST THE BAR
          </div>
          <div className="eval-row">
            <span className="ek">Real output</span>
            <span className="ev"><strong>100M MAU</strong> handled</span>
            <span className="et">Top 5%</span>
          </div>
          <div className="eval-row">
            <span className="ek">AI fluency</span>
            <span className="ev">Builds agents · automates marketing ops</span>
            <span className="et">Native</span>
          </div>
          <div className="eval-row">
            <span className="ek">Stage fit</span>
            <span className="ev">Seed → Series A</span>
            <span className="et">Perfect fit</span>
          </div>
          <div className="eval-row">
            <span className="ek">Soft skill</span>
            <span className="ev">Discussion-style · ships in public</span>
            <span className="et">Great</span>
          </div>

          <div className="pc-report">
            <span className="rl">FULL REPORT · 4-PAGE BREAKDOWN</span>
            <span className="rb">View →</span>
          </div>
        </div>

        <div className="pc-section">
          <div className="pc-row">
            <span className="k">NEXT</span>
            <span className="v acc">90-min interview · scheduled</span>
          </div>
        </div>
      </div>
      <div className="pc-overlay">
        <div className="lab">FOUNDING-COHORT RATE</div>
        <div className="line">11% placement fee. <strong>Permanent.</strong></div>
      </div>
    </div>
  );
}

function RecentActivity() {
  // Synthetic but realistic activity — projects the "live" feel.
  const items = [
    { who: "Founder · Pre-seed B2B SaaS",      what: "talked to our AI",        when: "2 min ago" },
    { who: "Founder · Seed · YC W26",          what: "scheduled candidate intro", when: "11 min ago" },
    { who: "Founder · Series A · Devtools",    what: "hired Head of Growth",    when: "1 hr ago" },
    { who: "Founder · Seed · Vertical SaaS",   what: "completed 5-min intake",  when: "2 hr ago" },
    { who: "Founder · Pre-seed · AI infra",    what: "talked to our AI",        when: "3 hr ago" },
    { who: "Founder · Series A · Fintech",     what: "reviewed 3 candidates",   when: "5 hr ago" },
  ];
  const loop = [...items, ...items];
  return (
    <div className="ticker" data-reveal>
      <div className="ticker-head">
        <span><span className="dot"></span>FOUNDERS USING NEW.MOAT — LAST WEEK</span>
        <span style={{fontFamily: "var(--font-mono)", color: "var(--ink-400)"}}>SF · NYC · REMOTE</span>
      </div>
      <div className="ticker-list">
        <div className="ticker-track">
          {loop.map((it, i) => (
            <div key={i} className="ticker-item">
              <span className="who">{it.who}</span>
              <span className="what">{it.what}</span>
              <span className="when">{it.when}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function useInView(ref, opts = { threshold: 0.3 }) {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current || seen) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); io.disconnect(); }
    }, opts);
    io.observe(ref.current);
    return () => io.disconnect();
  }, [ref, seen]);
  return seen;
}

function AnimatedNumber({ to, prefix = "", suffix = "", duration = 1400, format = (n) => Math.round(n).toLocaleString() }) {
  const ref = React.useRef(null);
  const seen = useInView(ref);
  const [val, setVal] = useState(0);
  useEffect(() => {
    if (!seen) return;
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const p = Math.min(1, (t - start) / duration);
      const e = 1 - Math.pow(1 - p, 3);
      setVal(to * e);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seen, to, duration]);
  return <span ref={ref} className="counter">{prefix}{format(val)}{suffix}</span>;
}

function MarketUrgency() {
  const cardRef = React.useRef(null);
  const seen = useInView(cardRef);
  return (
    <section className="section">
      <div className="wrap">
        <p className="eyebrow" data-reveal>02 · Market</p>
        <h2 className="h2" data-reveal style={{marginTop: 14}}>
          Every company is competing for the same marketers and salespeople. Job openings grew <em className="acc">12×.</em> The talent pool didn't.
        </h2>

        <div className="market-card" data-reveal ref={cardRef}>
          <div className="market-card-head">
            <span><span className="dot"></span>LINKEDIN JOB POSTINGS · 2024</span>
            <span>SOURCE: LINKEDIN ECONOMIC GRAPH</span>
          </div>
          <div className="market-card-body">
            <div>
              <div className="market-num">
                <AnimatedNumber to={1261} prefix="+" suffix="%" />
              </div>
              <div className="market-num-cap">
                More startups are posting marketing<br/>
                and sales jobs than ever — but the<br/>
                number of great candidates hasn't changed.¹
              </div>
            </div>
            <div className="demand-supply">
              <div className={"ds-row" + (seen ? " in" : "")} style={{"--w": "100%"}}>
                <div className="ds-label"><span>STARTUPS HIRING FOR THIS ROLE</span><span className="ds-val">+1,261%</span></div>
                <div className="ds-bar"><div className="ds-fill"></div></div>
              </div>
              <div className={"ds-row" + (seen ? " in" : "")} style={{"--w": "8%"}}>
                <div className="ds-label"><span>GREAT CANDIDATES AVAILABLE</span><span className="ds-val">~200 in SF</span></div>
                <div className="ds-bar"><div className="ds-fill supply"></div></div>
              </div>
              <div style={{
                fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-500)",
                letterSpacing: "0.04em", marginTop: 4,
              }}>
                THE TALENT POOL DIDN'T GROW.
              </div>
            </div>
          </div>
        </div>

        <div className="tercet" data-reveal>
          <div>14,000+ funded startups all want the same person.</div>
          <div>Expectations are higher than ever.</div>
          <div>There are only ~200 truly senior candidates in SF.</div>
        </div>

        <p className="punchline" data-reveal>
          This hire is <strong>12× more competitive</strong> than it was 12 months ago.
        </p>

        <div className="footnote" data-reveal>
          <sup>¹</sup> LinkedIn job postings data, 2024. 14,000+ funded startups<br/>
          competing for ~200 senior new-media marketers in SF alone.
        </div>
      </div>
    </section>
  );
}

function BlindSpot() {
  return (
    <section className="section">
      <div className="wrap">
        <p className="eyebrow" data-reveal>03 · The blind spot</p>
        <h2 className="h2" data-reveal style={{marginTop: 14, fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 1.15, letterSpacing: "-0.025em"}}>
          <span style={{color: "var(--accent)", fontWeight: 700}}>95%</span> of founders get this{" "}
          <span style={{color: "var(--crimson)"}}>wrong.</span> They've never hired a marketer or salesperson before.
        </h2>

        <div className="blind-grid">
          <div data-reveal>
            <span className="giant-num"><AnimatedNumber to={95} suffix="" format={(n) => Math.round(n)} /><span className="pct">%</span></span>
            <div style={{fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-500)", letterSpacing: "0.08em", textTransform: "uppercase", marginTop: 12}}>
              first-time hire
            </div>
            <div className="role-list">
              <div className="role-row">
                <span>Engineers</span>
                <span className="role-stat"><span className="mark">✓</span>HIRED</span>
              </div>
              <div className="role-row">
                <span>Product Designers</span>
                <span className="role-stat"><span className="mark">✓</span>HIRED</span>
              </div>
              <div className="role-row miss">
                <span>GTM</span>
                <span className="role-stat"><span className="mark">✗</span>NEVER</span>
              </div>
              <div className="role-row miss">
                <span>Marketing</span>
                <span className="role-stat"><span className="mark">✗</span>NEVER</span>
              </div>
              <div className="role-row miss">
                <span>Sales</span>
                <span className="role-stat"><span className="mark">✗</span>NEVER</span>
              </div>
              <div className="role-row miss">
                <span>Business Development</span>
                <span className="role-stat"><span className="mark">✗</span>NEVER</span>
              </div>
            </div>
          </div>

          <div>
            <div className="body" data-reveal>
              <p>Most founders have hired engineers before. They know what good looks like. They can interview for it. They have a template.</p>
              <p>But hiring a marketer, a salesperson, or a growth lead? Most founders have never done it. You've never been one. You've never managed one. You don't know what "great" looks like in practice.</p>
              <p>So you're making one of the most important hires of your company's early life — with no experience to draw from.</p>
            </div>
          </div>
        </div>

        <div className="coda coda-center" data-reveal>
          <div>Most first marketing and sales hires fail within 6 months.</div>
          <div style={{color: "var(--ink-700)"}}>Not because the marketer or salesperson was bad.</div>
          <div>Because the founder had no idea what they were hiring for.</div>
        </div>
      </div>
    </section>
  );
}

const MISTAKES = [
  {
    n: "Mistake 1",
    title: "You can't define what you actually need.",
    body: [
      `"I need a marketer" is not a job description.`,
      `Do you need someone to create content? Run paid ads? Build a sales pipeline? Own partnerships? Define the brand?`,
      `Marketing, sales, and growth are three completely different jobs. Until you know which one you're hiring for, every candidate looks like a fit — and none of them are.`,
    ],
  },
  {
    n: "Mistake 2",
    title: "You hire someone who looks right, but isn't.",
    body: [
      `A senior marketer from a 500-person company is used to budget, a team, and an established brand. Your company has none of those.`,
      `A consultant from a big firm knows how to build decks. You need someone who writes the copy, runs the ads, and closes the deals themselves — every week.`,
      `The marketer who thrived at a Series C company will often fail at your stage. Experience at the wrong company is not the same as the right experience.`,
    ],
  },
  {
    n: "Mistake 3",
    title: "You post the job listing and wait.",
    body: [
      `The best marketers and salespeople aren't on job boards. They already have a job they're good at.`,
      `They get DMs from 10 different founders every week. Most go unanswered.`,
      `Job listings attract people who are actively looking for work. That's usually not the person you want.`,
    ],
  },
  {
    n: "Mistake 4",
    title: "You hire on gut feeling, not actual evidence.",
    body: [
      `They interviewed well. They seemed smart and confident. You liked them.`,
      `But you never saw their actual work. You never tested whether they could handle your specific problem. You never dug hard enough to find the gaps.`,
      `Six months later, the marketer or salesperson is gone and you're starting over. The cost isn't just the fee — it's 6 months of lost time at the stage when time matters most.`,
    ],
  },
];

// Shared state between Mistakes (Fold 4) and TheWayOut (Fold 5) — the spec calls
// for a visible 1:1 mapping between the 4 mistakes and the 4 steps. Clicking a
// mistake highlights the matching step (and vice versa).
const PairContext = React.createContext({ active: 0, setActive: () => {} });

function PairProvider({ children }) {
  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused) return;
    const t = setInterval(() => {
      setActive((a) => (a + 1) % 4);
    }, 1500);
    return () => clearInterval(t);
  }, [paused]);

  const setActiveManual = (i) => {
    setPaused(true);
    setActive(i);
  };

  return <PairContext.Provider value={{ active, setActive: setActiveManual }}>{children}</PairContext.Provider>;
}

function MistakesAndFixes() {
  const { active, setActive } = React.useContext(PairContext);
  const m = MISTAKES[active];
  const s = STEPS[active];
  return (
    <section className="section" id="fold4-anchor">
      <div className="wrap">
        <p className="eyebrow" data-reveal>04 · The pattern</p>
        <h2 className="h2" data-reveal style={{marginTop: 14}}>
          90% of founders make the same four mistakes.
        </h2>
        <p className="subhead" data-reveal style={{marginTop: 16, fontSize: 18, color: "var(--ink-700)"}}>
          We've seen this play out 100+ times — and built a fix for each one.
        </p>

        <div className="pair-tabs" data-reveal role="tablist">
          {MISTAKES.map((mi, i) => (
            <button
              key={i}
              role="tab"
              aria-selected={active === i}
              className={"pair-tab" + (active === i ? " active" : "")}
              onClick={() => setActive(i)}
            >
              <span className="ptn">MISTAKE</span>
              #{i+1}
            </button>
          ))}
        </div>

        <div className="contrast-panel" key={active}>
          <div className="contrast-side contrast-problem">
            <div className="contrast-label">
              <span className="badge badge-err">MISTAKE 0{active+1}</span>
              <span>The problem</span>
            </div>
            <h3 className="contrast-title">{m.title}</h3>
            <div className="contrast-copy">
              {m.body.map((line, j) => <p key={j}>{line}</p>)}
            </div>
          </div>
          <div className="contrast-side contrast-fix">
            <div className="contrast-label">
              <span className="badge badge-ok">STEP 0{active+1}</span>
              <span>How we fix it</span>
            </div>
            <h3 className="contrast-title">{s.title}</h3>
            <div className="contrast-copy">
              {s.body.map((line, j) => <p key={j}>{line}</p>)}
            </div>
          </div>
        </div>

        <div className="climax-grid" data-reveal style={{gridTemplateColumns: "1fr", marginTop: 40}}>
          <div className="climax-content">
            <div className="quote" style={{fontSize: 20, fontStyle: "italic"}}>"We tried two recruiters. New.Moat placed our Head of Growth in 18 days. She's still here."</div>
            <div className="by" style={{fontStyle: "italic"}}>— FOUNDER · SEED · B2B SAAS · PLACED 2025</div>
          </div>
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  {
    n: "01",
    title: "Clarify exactly what marketing or sales role you need.",
    body: [
      `You talk to our AI for 5 minutes. That's it.`,
      `It asks about your company stage, your current team, the revenue problems you're trying to solve, and what success looks like in 6 months.`,
      `You walk away knowing whether you need a content marketer, a demand gen lead, an AE, a growth hire — and what that person needs to do in their first 90 days.`,
    ],
  },
  {
    n: "02",
    title: "Match to the right type of person.",
    body: [
      `We match your needs against 100+ hiring frameworks built across two B2B companies scaled to $15M ARR.`,
      `We look at company stage, team size, what "good" looks like at your specific moment — not just job titles and logos.`,
      `The candidate who's perfect for a Series B company is often the wrong person for you right now.`,
    ],
  },
  {
    n: "03",
    title: "Go find the right marketer or salesperson — don't wait.",
    body: [
      `We don't post a job listing. We reach out directly to the specific people who fit your needs.`,
      `The marketers and salespeople you actually want are already working somewhere. They're not refreshing job boards.`,
      `We contact them directly — so you get candidates who weren't looking, but are exactly the right fit for your stage and problem.`,
    ],
  },
  {
    n: "04",
    title: "Verify with real work, not just interviews.",
    body: [
      `We score each candidate's actual published work — not just what they say in interviews.`,
      `We test their ability to use AI tools on a live screen share.`,
      `We run a 90-minute deep interview focused on your specific problem.`,
      `Every candidate is evaluated against the same bar — so you compare on evidence, not gut feeling.`,
    ],
  },
];

// Old TheWayOut removed — replaced by linked-accordion version above.

function ChatPreview() {
  return (
    <div className="chat-preview">
      <div className="pc-head">
        <span className="dots"><span></span><span></span><span></span></span>
        <span className="title">NEW.MOAT AI · 5-MIN INTAKE</span>
        <span className="live"><span className="d"></span>LIVE</span>
      </div>
      <div className="chat-body">
        <div className="bubble ai">
          <span className="who">NEW.MOAT AI</span>
          Tell me where you're stuck on this hire. The role you can't define, the candidates you've already rejected, or the deals slipping.
        </div>
        <div className="bubble you">
          <span className="who">YOU</span>
          Need someone to run growth. Tried 2 hires from Series C SaaS. Neither worked.
        </div>
        <div className="bubble ai" style={{padding: "10px 14px"}}>
          <span className="who">NEW.MOAT AI</span>
          <span className="typing"><span></span><span></span><span></span></span>
        </div>
      </div>
      <div className="chat-foot">
        <input placeholder="Type your message…" disabled />
        <button className="send-btn" aria-label="Send">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <path d="M2 7H12M12 7L7 2M12 7L7 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
      </div>
    </div>
  );
}

function ZeroFrictionCTA({ onTalk }) {
  return (
    <section className="section fold6">
      <div className="wrap-wide">
        <div className="fold6-grid">
          <div>
            <p className="eyebrow" data-reveal>06 · Zero friction</p>
            <h2 className="h2" data-reveal style={{marginTop: 14}}>
              Start with 5 minutes. No commitment.
            </h2>

            <div className="body" data-reveal style={{marginTop: 28}}>
              <p>Leave your company name and email. We'll send you a private link — usually within a few hours.</p>
              <p>That link opens a 5-minute conversation with our AI. It asks about the marketing or sales role you're trying to fill, your team today, and what success looks like. It takes "I need a marketer" and turns it into a specific, hireable job.</p>
              <p>No sales call. No follow-up pressure. We only move forward with founders we're confident we can help — and if that's not you, we'll tell you directly.</p>
            </div>

            <div className="standalone" data-reveal>
              We reach out. You don't chase us.
            </div>

            <div className="cta-row" data-reveal>
              <button className="btn btn-primary btn-lg" onClick={() => onTalk("fold6")}>
                Get your link <span className="arrow">→</span>
              </button>
            </div>

            <p className="below-cta" data-reveal>
              No sales call. No pitch deck.<br/>
              Just your private link — sent within a few hours.
            </p>
          </div>

          <div data-reveal>
            <ChatPreview />
          </div>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section className="section">
      <div className="wrap" style={{maxWidth: 640}}>
        <p className="eyebrow" data-reveal>07 · Pricing</p>
        <h2 data-reveal style={{
          fontSize: 28, fontWeight: 500, letterSpacing: "-0.01em",
          lineHeight: 1.2, color: "var(--ink)", marginTop: 14,
        }}>
          First in, forever discount.
        </h2>

        <div className="body" data-reveal style={{marginTop: 24}}>
          <p>Founding members lock in <strong>11% placement fee — permanently.</strong> The standard rate after the first cohort is 25%.</p>
          <p>On a $150K hire, that's a <strong>$21,000 difference. Per placement. Forever.</strong> Most founders make 3–5 GTM hires in their first two years. That's $100K+ in savings — compounding every time you hire.</p>
        </div>

        <div className="pricing-table" data-reveal>
          <div className="pricing-row featured">
            <span className="label">
              Founding member rate
              <span className="pricing-tag">Locked in</span>
            </span>
            <span className="value">11%</span>
          </div>
          <div className="pricing-row">
            <span className="label">Standard rate (after first cohort)</span>
            <span className="value">25%</span>
          </div>
          <div className="pricing-row">
            <span className="label">No fee until your hire's first day</span>
            <span className="value"><span className="check">✓</span></span>
          </div>
          <div className="pricing-row">
            <span className="label">60-day replacement guarantee</span>
            <span className="value"><span className="check">✓</span></span>
          </div>
        </div>

        <div className="pricing-meta" data-reveal>
          <span className="ok-dot"></span>
          <span>FOUNDING COHORT · 18 OF 25 SPOTS OPEN</span>
          <span className="dot">·</span>
          <span>CLOSES JULY 1, 2026</span>
        </div>
      </div>
    </section>
  );
}

function Filter({ onTalk }) {
  const yes = [
    "You need a marketer, salesperson, or growth hire in the next 60 days.",
    "You've tried finding this person yourself — and it hasn't worked.",
    "You know getting this hire right will directly impact your revenue.",
    "You can move fast and make an offer when the right person shows up.",
  ];
  const no = [
    "You're not sure yet if you need a marketer or salesperson at all.",
    "You want to browse candidates with no real hiring timeline.",
    "You haven't thought about what this person needs to actually do.",
    "You need months of internal alignment before making an offer.",
  ];
  return (
    <section className="section">
      <div className="wrap">
        <p className="eyebrow" data-reveal>08 · The filter</p>
        <h2 className="h2" data-reveal style={{marginTop: 14}}>
          Is this you?
        </h2>
        <p className="body" data-reveal style={{marginTop: 16, marginBottom: 36}}>
          We turn down founders who aren't in the right position to hire. Not to be difficult — a bad-fit engagement wastes your time and ours, and ends with the wrong person in the seat. Be honest with yourself.
        </p>

        <div className="filter-grid" data-reveal>
          <div className="filter-col filter-yes">
            <div className="filter-col-head">This is you</div>
            {yes.map((t, i) => (
              <div key={i} className="filter-row">
                <span className="filter-icon">✓</span>
                <span>{t}</span>
              </div>
            ))}
          </div>
          <div className="filter-col filter-no">
            <div className="filter-col-head">This isn't you</div>
            {no.map((t, i) => (
              <div key={i} className="filter-row">
                <span className="filter-icon">✗</span>
                <span>{t}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="filter-cta" data-reveal>
          <div className="punch">If the left column describes you — get your link.</div>
          <button className="btn btn-primary" onClick={() => onTalk("fold8")} style={{marginTop: 16}}>
            Get your link <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  const teams = [
    { n: "Harvard",       c: "EDU" },
    { n: "Uber",          c: "MOBILITY" },
    { n: "Yale",          c: "EDU" },
    { n: "Google",        c: "TECH" },
    { n: "UC Berkeley",   c: "EDU" },
    { n: "McKinsey",      c: "CONSULTING" },
    { n: "NYU",           c: "EDU" },
    { n: "Delivery Hero", c: "MARKETPLACE" },
    { n: "ATOMS",         c: "DTC" },
    { n: "CloudKitchens", c: "OPS" },
  ];
  const loop = [...teams, ...teams];
  return (
    <section className="section">
      <div className="wrap-wide">
        <p className="eyebrow" data-reveal style={{textAlign: "center"}}>09 · Operators</p>
        <p className="fold9-cap-top" data-reveal style={{marginTop: 16}}>
          People we've hired came from teams like:
        </p>

        <div className="proof-stats" data-reveal>
          <div className="proof-stat">
            <div className="ps-num"><AnimatedNumber to={100} suffix="+" format={(n) => Math.round(n)} /></div>
            <div className="ps-cap">Operators hired</div>
          </div>
          <div className="proof-stat">
            <div className="ps-num"><span className="acc">$<AnimatedNumber to={15} format={(n) => Math.round(n)} />M</span></div>
            <div className="ps-cap">ARR scaled</div>
          </div>
          <div className="proof-stat">
            <div className="ps-num"><AnimatedNumber to={2} format={(n) => Math.round(n)} /></div>
            <div className="ps-cap">B2B companies built</div>
          </div>
          <div className="proof-stat">
            <div className="ps-num"><AnimatedNumber to={5} suffix="%" format={(n) => Math.round(n)} /></div>
            <div className="ps-cap">Top operators sourced</div>
          </div>
        </div>

        <div className="logo-strip" data-reveal aria-label="Companies our hires came from">
          <div className="logo-track">
            {loop.map((t, i) => (
              <span key={i} className="logo-chip-wm" aria-label={`${t.n} — one of the teams we hired from.`}>
                <span className="lc-name">{t.n}</span>
                <span className="lc-cat">{t.c}</span>
              </span>
            ))}
          </div>
        </div>

        <p className="fold9-cap-bot" data-reveal>
          Different companies. Same thing we look for: people who actually do the work, not just talk about it.
        </p>
      </div>
    </section>
  );
}

function FinalCTA({ onTalk }) {
  return (
    <section className="section">
      <div className="wrap final">
        <p className="eyebrow" data-reveal>10 · One last thing</p>
        <h2 className="h2" data-reveal style={{marginTop: 14, fontSize: 40}}>
          You read this far. Good.
        </h2>
        <p className="lede" data-reveal>
          Five minutes. A private AI session. You'll know if we're the right fit.
        </p>
        <div className="cta-row" data-reveal>
          <button className="btn btn-primary btn-lg" onClick={() => onTalk("footer")}>
            Get your link <span className="arrow">→</span>
          </button>
        </div>

        <div className="final-vis" data-reveal>
          <div className="fv-head">
            <span className="lab">AI INTAKE · NEXT 24 HOURS</span>
            <span className="live"><span className="d"></span>LIVE</span>
          </div>
          <div className="slots">
            <div className="slot full">21:00</div>
            <div className="slot full">22:00</div>
            <div className="slot open">23:00</div>
            <div className="slot open">00:00</div>
            <div className="slot full">07:00</div>
            <div className="slot open">08:00</div>
            <div className="slot open">09:00</div>
            <div className="slot open">10:00</div>
          </div>
          <div className="fv-foot">7 of 8 slots open · before bed tonight</div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <span className="nav-logo">
            <svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="32" height="32" rx="7" fill="#0E2A1F"/>
              <rect x="10" y="10" width="12" height="12" rx="2.5" fill="#A8862F"/>
            </svg>
            NewMoat
          </span>
          <div className="footer-tag">
            The AI talent studio for B2B distribution hires.<br/>
            Built in San Francisco.
          </div>
        </div>
        <div className="footer-col">
          <div className="footer-col-title">Product</div>
          <a href="#hero">Home</a>
          <a href="how-we-evaluate.html">How we evaluate</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div className="footer-col">
          <div className="footer-col-title">Contact</div>
          <a href="mailto:hire@newmoat.co">hire@newmoat.co</a>
          <span className="text">newmoat.co</span>
          <span className="text">San Francisco, CA</span>
        </div>
        <div className="footer-col">
          <div className="footer-col-title">Status</div>
          <span className="text">
            <span style={{
              display: "inline-block", width: 6, height: 6, borderRadius: "50%",
              background: "var(--live)", marginRight: 6, verticalAlign: "middle",
            }}></span>
            All systems live
          </span>
          <span className="text">v5 · May 2026</span>
          <span className="text">Founding cohort open</span>
        </div>
      </div>

      <div className="footer-thesis">
        <div className="thesis">
          Company = Product × Distribution.<br/>
          We hire the people who run the multiplier.
        </div>
        <div className="copyright">© 2026 NEW.MOAT</div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Hero, Interlude, MarketUrgency, BlindSpot, MistakesAndFixes, PairProvider,
  ZeroFrictionCTA, Pricing, Filter, SocialProof, FinalCTA, Footer,
});