function Header() {
  const [open, setOpen] = React.useState(false);
  const [navOpacity, setNavOpacity] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      const opacity = Math.min(window.scrollY / 80, 1);
      setNavOpacity(opacity);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const linkStyle = { color: '#000', textDecoration: 'none', fontWeight: 500, fontSize: 20 };
  const mobileLinkStyle = { ...linkStyle, padding: '14px 0', borderBottom: '1px solid #F2F2F2', fontSize: 20 };
  const links = [
    { href: '/how-it-works.html', label: 'How it works' },
    { href: '/book-preview.html', label: 'Book' },
    { href: '/faqs.html', label: 'FAQs' },
  ];
  return (
    <header style={{
      background: `rgba(255,255,255,${navOpacity})`,
      borderBottom: `1px solid rgba(242,242,242,${navOpacity})`,
      position: 'sticky', top: 0, zIndex: 50,
    }}>
      <style>{`
        .eivi-header-inner {
          max-width: 1440px; margin: 0 auto;
          display: flex; align-items: center; justify-content: space-between;
          padding: 26px clamp(20px, 5vw, 48px);
          gap: 16px;
        }
        .eivi-nav-desktop { display: none; gap: 32px; }
        .eivi-cta-desktop { display: none; }
        .eivi-menu-button { display: flex; align-items: center; background: none; border: none; cursor: pointer; padding: 4px; color: var(--teal); -webkit-tap-highlight-color: transparent; }
        .eivi-mobile-drawer {
          background: #fff; border-top: 1px solid #F2F2F2;
          padding: 8px clamp(20px, 5vw, 48px) 24px;
        }
        @media (min-width: 640px) {
          .eivi-nav-desktop { display: flex; }
          .eivi-cta-desktop { display: inline-block; }
          .eivi-menu-button { display: none; }
          .eivi-mobile-drawer { display: none !important; }
        }
      `}</style>
      <div className="eivi-header-inner">
        <a href="/" style={{ display: 'flex', alignItems: 'center', flexShrink: 0 }}>
          <img src="./assets/logos/eivi-logo.svg" alt="Eivi" style={{ height: 37 }} />
        </a>
        <nav className="eivi-nav-desktop">
          {links.map(l => <a key={l.href} href={l.href} style={linkStyle}>{l.label}</a>)}
        </nav>
        <a href="/join.html" className="btn btn-primary eivi-cta-desktop">Join the waitlist</a>
        <button className="eivi-menu-button" aria-label={open ? 'Close menu' : 'Open menu'} onClick={() => setOpen(!open)}>
          {open ? (
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="5" y1="5" x2="19" y2="19"/><line x1="19" y1="5" x2="5" y2="19"/>
            </svg>
          ) : (
            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="16" x2="20" y2="16"/>
            </svg>
          )}
        </button>
      </div>
      {open && (
        <div className="eivi-mobile-drawer">
          <nav style={{ display: 'flex', flexDirection: 'column' }}>
            {links.map(l => (
              <a key={l.href} href={l.href} style={mobileLinkStyle} onClick={() => setOpen(false)}>{l.label}</a>
            ))}
          </nav>
          <a href="/join.html" className="btn btn-primary" style={{ marginTop: 20, width: '100%', textAlign: 'center' }} onClick={() => setOpen(false)}>
            Join the waitlist
          </a>
        </div>
      )}
    </header>
  );
}
window.Header = Header;