// Sticky navigation bar
function Nav({ onCta }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(244,239,230,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(8px)' : 'none',
      borderBottom: scrolled ? '1.5px solid var(--ink)' : '1.5px solid transparent',
      transition: 'background 180ms ease, border-color 180ms ease',
    }}>
      <div className="wrap" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 72,
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none', color: 'var(--ink)' }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10,
            border: '2px solid var(--ink)',
            overflow: 'hidden',
            boxShadow: '2px 2px 0 var(--ink)',
            background: '#fff',
            display: 'grid', placeItems: 'center',
          }}>
            <img src="images/ios_app_icon.png" alt="" style={{ width: 40, height: 40, objectFit: 'cover' }}/>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 16, letterSpacing: '-0.01em' }}>ROAST MY SNACK</span>
            <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.18em', color: 'var(--mute)', marginTop: 3 }}>DR. HAWLEY DDS · SMILE PATROL</span>
          </div>
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <a href="#how" className="nav-link">How it works</a>
          <a href="#styles" className="nav-link">Styles</a>
          <a href="#science" className="nav-link">For parents</a>
          <a href="#faq" className="nav-link">FAQ</a>
          <button className="btn flame sm" onClick={onCta}>
            {window.RMS.Icon.flame(14)} NOTIFY ME
          </button>
        </nav>
      </div>
      <style>{`
        .nav-link {
          font-family: var(--font-body);
          font-weight: 600;
          font-size: 14px;
          color: var(--ink-2);
          text-decoration: none;
          padding: 6px 2px;
          border-bottom: 1.5px solid transparent;
        }
        .nav-link:hover { border-bottom-color: var(--ink); }
        @media (max-width: 820px) {
          .nav-link { display: none; }
        }
      `}</style>
    </header>
  );
}

window.RMS.Nav = Nav;