const Nav = ({ activeSection }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 6);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#features', label: 'Features' },
    { href: '#how', label: 'How it works' },
    { href: '#ecosystem', label: 'Ecosystem' },
    { href: '#roadmap', label: 'Roadmap' },
    { href: '#faq', label: 'FAQ' },
  ];

  const close = () => setOpen(false);

  return (
    <header className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="#top" className="brand" onClick={close}>
          <div className="brand-mark"><span>A</span></div>
          <div className="brand-text">
            <span className="brand-name">Arogya Bite</span>
            <span className="brand-tag">Preventive health, intelligently.</span>
          </div>
        </a>

        <nav className="nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href}
              className={`nav-link ${activeSection === l.href.slice(1) ? 'active' : ''}`}
            >{l.label}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <a href="#signup" className="btn btn-primary btn-sm nav-cta-desktop">
            Get early access
            <Icon name="arrowRight" size={14} />
          </a>
          <button className="nav-mobile-toggle" onClick={() => setOpen(o => !o)} aria-label="Menu">
            <Icon name={open ? 'close' : 'menu'} size={18} />
          </button>
        </div>
      </div>

      <div className={`nav-mobile-sheet ${open ? 'open' : ''}`}>
        {links.map(l => (
          <a key={l.href} href={l.href} onClick={close}>{l.label}</a>
        ))}
        <a href="#signup" className="btn btn-primary" style={{ marginTop: 24, justifyContent: 'center' }} onClick={close}>
          Get early access <Icon name="arrowRight" size={14} />
        </a>
      </div>
    </header>
  );
};

Object.assign(window, { Nav });