/* App root — composes all sections */

const SECTIONS = [
  { id: 'hero', label: 'The Pitch' },
  { id: 'forecast', label: 'The Model' },
  { id: 'lane-recruit', label: 'Lane 01 · Recruits' },
  { id: 'lane-dtc', label: 'Lane 02 · DTC' },
  { id: 'lane-biz', label: 'Lane 03 · Alumni Biz' },
  { id: 'partnership', label: 'Partnership' },
  { id: 'next', label: 'Next Steps' },
  { id: 'bonus', label: 'Bonus · Data' },
  { id: 'cta', label: 'The Ask' },
];

function SectionNav() {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    function onScroll() {
      const sections = SECTIONS.map(s => document.getElementById(s.id)).filter(Boolean);
      const offset = window.innerHeight * 0.45;
      let idx = 0;
      for (let i = 0; i < sections.length; i++) {
        const top = sections[i].getBoundingClientRect().top;
        if (top - offset <= 0) idx = i;
      }
      setActive(idx);
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className="fixed right-5 top-1/2 -translate-y-1/2 z-[150] hidden md:flex flex-col gap-3" aria-label="Section nav">
      {SECTIONS.map((s, i) => (
        <a key={s.id} href={`#${s.id}`} className="group flex items-center gap-3 justify-end" title={s.label}>
          <span
            className="font-mono text-[9px] tracking-[0.2em] uppercase text-paper opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 bg-garnet px-2 py-1 whitespace-nowrap pointer-events-none shadow-md"
          >
            {String(i + 1).padStart(2, '0')} · {s.label}
          </span>
          <span
            className={"block transition-all duration-300 " +
              (active === i
                ? 'w-5 h-px bg-garnet'
                : 'w-2 h-px bg-garnet/30 group-hover:bg-garnet/70 group-hover:w-4')}
          />
        </a>
      ))}
    </nav>
  );
}

function App() {
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    function onScroll() {
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? h.scrollTop / max : 0);
    }
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <div className="fixed top-0 left-0 right-0 h-[2px] bg-garnet/10 z-[200]">
        <div className="h-full bg-garnet" style={{ width: `${progress * 100}%`, transition: 'width 60ms linear' }} />
      </div>

      <SectionNav />

      <div id="hero"><Hero /></div>
      <div id="forecast"><Forecast /></div>
      <div id="lane-recruit"><LaneRecruit /></div>
      <div id="lane-dtc"><LaneDTC /></div>
      <div id="lane-biz"><LaneAlumniBiz /></div>
      <div id="partnership"><Partnership /></div>
      <div id="next"><NextSteps /></div>
      <div id="bonus"><BonusData /></div>
      <div id="cta"><CTAFooter /></div>
    </>
  );
}

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