// New.Moat — entry. Composes nav, all 10 folds, footer, and the intake modal.

const { useState, useEffect } = React;

function CohortBar() {
  return (
    <div className="cohortbar" role="status" aria-live="polite">
      <div className="cohortbar-inner">
        <span className="cb-item"><span className="dot" aria-hidden="true"></span><span className="label">FOUNDING COHORT —&nbsp;</span><span className="val">18 OF 25 SPOTS OPEN</span></span>
        <span className="cb-item cb-hide-md">
          <span className="meter-track"><span className="meter-fill"></span></span>
          <span className="label">28% CLAIMED · CLOSES JUL&nbsp;1</span>
        </span>
        <span className="sep cb-hide-sm">·</span>
        <span className="cb-item cb-hide-sm"><span className="label">RATE —&nbsp;</span><span className="val">11% LIFETIME</span></span>
        <span className="sep cb-hide-md">·</span>
        <span className="cb-item cb-hide-md"><span className="label">UPDATED —&nbsp;</span><span className="val">MAY&nbsp;11,&nbsp;2026</span></span>
      </div>
    </div>
  );
}

function Nav({ onTalk }) {
  const wrapRef = React.useRef(null);
  const pillRef = React.useRef(null);

  const move = (e) => {
    const link = e.currentTarget;
    const wrap = wrapRef.current;
    const pill = pillRef.current;
    if (!wrap || !pill) return;
    const wr = wrap.getBoundingClientRect();
    const lr = link.getBoundingClientRect();
    pill.style.transform = `translateX(${lr.left - wr.left}px)`;
    pill.style.width = `${lr.width}px`;
    pill.classList.add("visible");
  };
  const leave = () => {
    const pill = pillRef.current;
    if (!pill) return;
    pill.classList.remove("visible");
  };

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-logo" href="#hero">
          <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"}
        </a>
        <div className="nav-links" ref={wrapRef} onMouseLeave={leave}>
          <span className="nav-pill" ref={pillRef}></span>
          <a className="nav-link hide-sm" href="#fold4" onMouseEnter={move}>The pattern</a>
          <a className="nav-link hide-sm" href="#fold7" onMouseEnter={move}>Pricing</a>
          <a className="nav-link hide-sm" href="how-we-evaluate.html" onMouseEnter={move}>How we evaluate</a>
          <span className="nav-cta-wrap">
            <button className="nav-cta" onClick={() => onTalk("nav")}>
              Get your link →
            </button>
          </span>
        </div>
      </div>
    </nav>
  );
}

function useReveal() {
  useEffect(() => {
    if (typeof IntersectionObserver === "undefined") {
      document.querySelectorAll("[data-reveal]").forEach((el) => el.classList.add("in"));
      return;
    }
    const els = document.querySelectorAll("[data-reveal]");
    let staggerMap = new Map();
    // Find siblings and stagger their reveal
    els.forEach((el) => {
      const parent = el.parentElement;
      if (!staggerMap.has(parent)) staggerMap.set(parent, 0);
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const parent = e.target.parentElement;
          const idx = staggerMap.get(parent) || 0;
          staggerMap.set(parent, idx + 1);
          const delay = Math.min(idx, 4) * 100;
          e.target.style.transitionDelay = delay + "ms";
          requestAnimationFrame(() => e.target.classList.add("in"));
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: "0px 0px -6% 0px", threshold: 0.04 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function FoldNav() {
  const items = [
    ["hero",   "Hero"],
    ["fold2",  "Market"],
    ["fold3",  "Blind spot"],
    ["fold4",  "Mistakes & fixes"],
    ["fold6",  "Talk to AI"],
    ["fold7",  "Pricing"],
    ["fold8",  "The filter"],
    ["fold9",  "Operators"],
    ["fold10", "Final"],
  ];
  const [active, setActive] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      let cur = 0;
      items.forEach(([id], i) => {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 200) cur = i;
      });
      setActive(cur);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className="foldnav" aria-label="Page sections">
      {items.map(([id, label], i) => (
        <a key={id} href={"#"+id} className={"fn-row" + (active === i ? " active" : "")}>
          <span className="fn-label">{String(i+1).padStart(2,"0")} · {label}</span>
          <span className="fn-dot"></span>
        </a>
      ))}
    </nav>
  );
}

function App() {
  const [modal, setModal] = useState({ open: false, source: null });
  const openTalk = (src) => setModal({ open: true, source: src });
  const close = () => setModal((m) => ({ ...m, open: false }));

  useReveal();

  useEffect(() => {
    document.body.classList.add("js-loaded");
    // Open modal if hash #talk is present
    if (window.location.hash === "#talk") openTalk("hash");
  }, []);

  return (
    <>
      <CohortBar />
      <Nav onTalk={openTalk} />
      <FoldNav />

      <main>
        <div id="hero"></div>
        <Hero onTalk={openTalk} />
        <div id="fold2"></div>
        <MarketUrgency />
        <div id="fold3"></div>
        <BlindSpot />
        <Interlude />
        <div id="fold4"></div>
        <PairProvider>
          <MistakesAndFixes />
        </PairProvider>
        <div id="fold6"></div>
        <ZeroFrictionCTA onTalk={openTalk} />
        <div id="fold7"></div>
        <div id="pricing"></div>
        <Pricing />
        <div id="fold8"></div>
        <Filter onTalk={openTalk} />
        <div id="fold9"></div>
        <SocialProof />
        <div id="fold10"></div>
        <FinalCTA onTalk={openTalk} />
      </main>

      <Footer />

      <IntakeModal open={modal.open} onClose={close} source={modal.source} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);