// Header.jsx — sticky 72px, hamburger on mobile, scroll progress bar, Build + Convert nav
const Header = ({ active = 'platform' }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 4);
      const h = document.documentElement;
      const max = h.scrollHeight - h.clientHeight;
      setProgress(max > 0 ? Math.min(1, window.scrollY / max) : 0);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    if (menuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const items = [
    { id: 'platform', label: 'Overview', href: '/' },
    { id: 'build', label: 'Build', href: '/build' },
    { id: 'convert', label: 'Convert', href: '/convert' },
    { id: 'apply', label: 'Apply', href: '/apply' },
  ];

  return (
    <>
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        height: 72,
        background: 'rgba(255,255,255,0.85)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
        transition: 'border-color 220ms cubic-bezier(0.2,0,0,1)'
      }}>
        <div className="container" style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          {/* Logo + Desktop Nav */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
            <a href="/" style={{ display: 'inline-flex', alignItems: 'center' }}>
              <img src="/assets/logo.png" alt="503.health" style={{ height: 22, width: 'auto', display: 'block' }} />
            </a>
            <nav className="desktop-only" style={{ display: 'flex', gap: 24 }}>
              {items.map(it => (
                <a key={it.id} href={it.href} style={{
                  fontSize: 14,
                  fontWeight: active === it.id ? 500 : 400,
                  color: active === it.id ? 'var(--navy)' : 'var(--fg)',
                  textDecoration: 'none'
                }}>{it.label}</a>
              ))}
            </nav>
          </div>

          {/* Desktop CTA */}
          <div className="desktop-only" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <a href="/apply" className="btn btn-primary" style={{ padding: '10px 20px', fontSize: 14, textDecoration: 'none', width: 'auto' }}>Book a call</a>
          </div>

          {/* Mobile Hamburger */}
          <button
            className="mobile-only"
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Toggle menu"
            style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: 8, display: 'flex', flexDirection: 'column',
              gap: 5, justifyContent: 'center', alignItems: 'center',
              width: 40, height: 40
            }}
          >
            <span style={{
              display: 'block', width: 22, height: 2, background: 'var(--fg)',
              borderRadius: 1, transition: 'transform 200ms ease, opacity 200ms ease',
              transform: menuOpen ? 'rotate(45deg) translateY(3.5px)' : 'none'
            }}></span>
            <span style={{
              display: 'block', width: 22, height: 2, background: 'var(--fg)',
              borderRadius: 1, transition: 'transform 200ms ease, opacity 200ms ease',
              opacity: menuOpen ? 0 : 1
            }}></span>
            <span style={{
              display: 'block', width: 22, height: 2, background: 'var(--fg)',
              borderRadius: 1, transition: 'transform 200ms ease, opacity 200ms ease',
              transform: menuOpen ? 'rotate(-45deg) translateY(-3.5px)' : 'none'
            }}></span>
          </button>
        </div>

        {/* Progress bar */}
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: -1, height: 1,
          background: 'var(--navy)', transformOrigin: '0% 50%',
          transform: `scaleX(${progress})`,
          transition: 'transform 80ms linear', pointerEvents: 'none'
        }}></div>
      </header>

      {/* Mobile Menu Overlay */}
      <div style={{
        position: 'fixed', inset: 0, zIndex: 49,
        background: 'rgba(255,255,255,0.98)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        display: 'flex', flexDirection: 'column',
        justifyContent: 'center', alignItems: 'center',
        gap: 28, padding: 32,
        opacity: menuOpen ? 1 : 0,
        pointerEvents: menuOpen ? 'auto' : 'none',
        transition: 'opacity 250ms cubic-bezier(0.2,0,0,1)',
        paddingTop: 96
      }}>
        {items.map(it => (
          <a key={it.id} href={it.href}
            onClick={() => setMenuOpen(false)}
            style={{
              fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em',
              color: active === it.id ? 'var(--navy)' : 'var(--fg)',
              textDecoration: 'none'
            }}>{it.label}</a>
        ))}
        <a href="/apply" onClick={() => setMenuOpen(false)}
          className="btn btn-primary"
          style={{ marginTop: 16, textDecoration: 'none', width: '100%', maxWidth: 280 }}>
          Book a call
        </a>
      </div>
    </>
  );
};
window.Header = Header;