// Plenitude — main app composition
const { useState: useS, useEffect: useE, useRef: useR } = React;

function App() {
  const hostRef = useR(null);
  const progress = useScrollProgress(hostRef);
  const [active, setActive] = useS('top');
  useReveal();

  // After the hero, hide the phase pill
  useE(() => {
    const onScroll = () => {
      const sections = ['about','therapies','schedule','therapists','courses','contact'];
      let cur = 'top';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 200) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
 
  const onNav = (id) => {
    if (id === 'top') {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };

  // Hide nav until hero progress > 0.5 (so it doesn't fight the dispersing logo)
  const navHidden = progress < 0.5 && progress < 0.99;
  // Actually show nav once user has scrolled past 60% of hero, OR once they've left the hero entirely
  const showNav = progress > 0.6 || (hostRef.current && (-hostRef.current.getBoundingClientRect().top > hostRef.current.offsetHeight - window.innerHeight));

  return (
    <>
      <ProgressBar />
      <TopNav active={active} onNav={onNav} hidden={!showNav} />

      {/* Long sticky scroll host that drives the hero */}
      <div ref={hostRef} className="scroll-host">
        <div className="scroll-stage">
          <HeroStage progress={progress} />
        </div>
      </div>

      <PhasePill progress={progress} visible={progress < 0.95} />

      <Manifesto />
      <Marquee />
      <Therapies />
      <Schedule />
      <Therapists />
      <PatternBand />
      <Courses />
      <Motivacional />
      <Gallery />
      <CtaBand />
      <Footer />
    </>
  );
}

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