// Top-level app + nav + scroll progress
function Nav() {
  const [section, setSection] = useState('overview');
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const ids = ['overview','benefits','viewpoint','environment','landuse','faq'];
    const onScroll = () => {
      setScrolled(window.scrollY > 60);
      const y = window.scrollY + 140;
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) cur = id;
      }
      setSection(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const link = (id, label) => (
    <a href={`#${id}`} className={section === id ? 'active' : ''}>{label}</a>
  );
  return (
    <nav className={`topnav ${scrolled ? 'scrolled' : 'transparent'}`}>
      <div className="brand">
        <LogoMark size={22} color={scrolled ? 'var(--ink)' : 'var(--cream-50)'} />
        <span>Piedmont Technology Park</span>
      </div>
      {link('overview','Overview')}
      {link('benefits','Benefits')}
      {link('viewpoint','Viewpoint')}
      {link('environment','Environment')}
      {link('landuse','Land use')}
      {link('faq','FAQ')}
      <a href="#contact" className="cta">Contact</a>
    </nav>
  );
}

function ScrollProgress() {
  useEffect(() => {
    const fill = document.getElementById('scrollbar-fill');
    const onScroll = () => {
      const h = document.documentElement;
      const pct = (h.scrollTop) / (h.scrollHeight - h.clientHeight) * 100;
      if (fill) fill.style.width = pct + '%';
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return null;
}

function App() {
  return (
    <>
      <ScrollProgress />
      <Nav />
      <Hero />
      <Benefits />
      <Radar />
      <DayNight />
      <Environment />
      <Comparison />
      <Power />
      <Dividend />
      <FAQ />
      <Contact />
      <Tweaks />
    </>
  );
}

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