// Scrollable one-page home: Home → Work → About, nav anchors smooth-scroll

function ScrollHome({ fonts }) {
  const f = fonts || { display: 'Faustina, serif', displayWeight: 500, body: 'Faustina, serif', ui: 'Outfit, sans-serif' };
  const [active, setActive] = React.useState('Home');
  const lockRef = React.useRef(null);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const navH = document.querySelector('.scroll-nav')?.offsetHeight || 0;
    const top = id === 'home' ? 0 : el.getBoundingClientRect().top + window.scrollY - navH - (id === 'contact' ? 24 : 0);
    const sec = id === 'contact' ? 'About' : id.charAt(0).toUpperCase() + id.slice(1);
    setActive(sec);
    lockRef.current = Date.now();
    window.scrollTo({ top, behavior: 'smooth' });
    history.replaceState(null, '', id === 'home' ? location.pathname : '#' + id);
  };

  React.useEffect(() => {
    const ids = ['home', 'work', 'about'];
    const onScroll = () => {
      if (lockRef.current && Date.now() - lockRef.current < 900) return;
      const navH = document.querySelector('.scroll-nav')?.offsetHeight || 0;
      let cur = 'home';
      ids.forEach((id) => { const el = document.getElementById(id); if (el && el.getBoundingClientRect().top - navH <= 120) cur = id; });
      if (window.scrollY <= 4) cur = 'home';
      else if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 4) cur = 'about';
      setActive(cur.charAt(0).toUpperCase() + cur.slice(1));
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    const h = location.hash.slice(1);
    if (h) setTimeout(() => scrollTo(h), 60);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const anchor = (id) => (e) => { e.preventDefault(); scrollTo(id); };

  return (
    <div className="scroll-shell">
      <div className="scroll-nav">
        <TopNav active={active} variant="compact" anchors onNavigate={scrollTo} />
      </div>

      <section id="home" className="scroll-section" data-screen-label="Home">
        <div className="home-identity" style={{ padding: '40px 40px 36px', display: 'flex', flexDirection: 'column' }}>
          <div className="home-identity__row" style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 18 }}>
            <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
              <h1 style={{ fontFamily: f.display, fontSize: 50, fontWeight: f.displayWeight, lineHeight: 0.95, letterSpacing: '-0.03em', color: 'var(--platinum)', margin: '0 0 6px', whiteSpace: 'nowrap' }}>Jason Yu</h1>
              <div style={{ fontFamily: f.ui, fontSize: 17, fontWeight: 500, color: 'var(--orange)', letterSpacing: '0.01em' }}>Lead Product Designer</div>
            </div>
          </div>
          <p style={{ fontFamily: f.body, fontSize: 17, lineHeight: 1.5, color: 'var(--text-body)', margin: '0 0 20px', textWrap: 'pretty' }}>
            My work tends to find the problems nobody chartered me to solve: scope gaps,
            missing infrastructure, features that would have shipped wrong. Across enterprise
            data platforms, public health systems, automotive operations, and AI security
            design, I've challenged siloed research approaches, built trust with resistant
            stakeholders, and consistently delivered more than what was asked without
            exceeding what was budgeted.
          </p>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
            <a href="#contact" onClick={anchor('contact')} className="btn-ghost">Get in touch</a>
          </div>
        </div>
      </section>

      <section id="work" className="scroll-section" data-screen-label="Work">
        <WorkMain spacer={false} />
      </section>

      <section id="about" className="scroll-section" data-screen-label="About">
        <AboutMain />
      </section>

      <SiteFooter />
    </div>
  );
}

window.ScrollHome = ScrollHome;