/* Top sticky nav. Becomes opaque after a small scroll, collapses to a
   hamburger drawer at ≤960px. */
const { useState: useState_nav, useEffect: useEffect_nav } = React;

const Nav = () => {
  const { useViewport } = window.AAS;
  const { isMd, isSm } = useViewport();
  const [scrolled, setScrolled] = useState_nav(false);
  const [open, setOpen] = useState_nav(false);

  useEffect_nav(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  // Auto-close the mobile menu when crossing the breakpoint upward.
  useEffect_nav(() => { if (!isMd && open) setOpen(false); }, [isMd, open]);

  const navLinks = [
    { href:'#eligible', label:'AM I ELIGIBLE?' },
    { href:'#build',    label:'WHAT YOU CAN BUILD' },
    { href:'#how',      label:'HOW IT WORKS' },
  ];

  return (
    <header className={`nav${scrolled || open ? ' is-active' : ''}`}>
      <div className="container nav-inner">
        <a href="#" className="nav-logo">
          <img src="scraps/logo-angels-1.png" alt="Angel App Studio" className="nav-logo-img"/>
          <span className="nav-logo-text">Angel <span className="it">App Studio</span></span>
        </a>

        {!isMd ? (
          <nav className="nav-links">
            {navLinks.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
            <a href="https://tally.so/r/NpM1RW" target="_blank" rel="noopener" className="pill-btn nav-cta">APPLY NOW</a>
          </nav>
        ) : (
          <div className="nav-actions">
            {!isSm && <a href="https://tally.so/r/NpM1RW" target="_blank" rel="noopener" className="pill-btn nav-cta-sm">APPLY</a>}
            <button
              type="button"
              className={`nav-toggle${open ? ' is-open' : ''}`}
              aria-label={open ? 'Close menu' : 'Open menu'}
              aria-expanded={open}
              onClick={() => setOpen(o => !o)}
            >
              <svg width="16" height="12" viewBox="0 0 16 12" fill="none">
                {open ? (
                  <path d="M2 2L14 10M14 2L2 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                ) : (
                  <path d="M1 1H15M1 6H15M1 11H15" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                )}
              </svg>
            </button>
          </div>
        )}
      </div>

      {isMd && open && (
        <div className="container nav-drawer">
          <nav className="nav-drawer-list">
            {navLinks.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="nav-drawer-link">{l.label}</a>
            ))}
            <a href="https://tally.so/r/NpM1RW" target="_blank" rel="noopener" onClick={() => setOpen(false)} className="pill-btn nav-drawer-cta">APPLY NOW</a>
          </nav>
        </div>
      )}
    </header>
  );
};

window.AAS = window.AAS || {};
window.AAS.Nav = Nav;