// Header — desktop top nav + mobile sticky bottom bar.
// CSS in home-v2/depth.css decides which is visible per breakpoint.

function Header() {
  return (
    <>
      {/* Desktop top nav */}
      <nav className="site-nav-desktop" style={{
        position: 'sticky', top: 0, zIndex: 50,
        height: 72, padding: '0 48px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'rgba(10, 46, 34, 0.72)',
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
        boxShadow: '0 8px 24px -6px rgba(0, 0, 0, 0.48), 8px 14px 32px -10px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.06)',
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 16, textDecoration: 'none' }}>
          <img src="/assets/logo-mark.svg" width="30" height="30" alt=""/>
          <span className="wordmark" style={{ fontSize: 18 }}>
            <span style={{ color: 'var(--accent)' }}>Eight</span>
            <span style={{ color: '#FFFFFF' }}>by</span>
            <span style={{ color: 'var(--accent)' }}>Zero</span>
          </span>
        </a>
        <div className="nav-links">
          <AskAgentLauncher/>
          <a className="nav-cta" href="https://calendar.app.google/9eoXfoSh692Xr7ks9" target="_blank" rel="noopener">Book a demo →</a>
          <a className="nav-link" href="#" onClick={(e) => { e.preventDefault(); window.dispatchEvent(new Event('sign-in:open')); }}>Sign in</a>
        </div>
      </nav>

      {/* Mobile sticky bottom bar — visible only on phones (CSS controls). */}
      <nav className="mobile-bottom-bar" aria-label="Primary mobile navigation">
        <button className="mb-menu" aria-label="Open menu"
          onClick={() => window.dispatchEvent(new Event('nav-drawer:open'))}>
          <span className="mb-menu-icon"><span/></span>
        </button>
        <button className="mb-ask" aria-label="Ask 8/0"
          onClick={() => window.dispatchEvent(new Event('ask-agent:open'))}>
          Ask <span className="bn"><span style={{ color: 'var(--accent)' }}>8</span><span style={{ color: '#FFFFFF' }}>/</span><span style={{ color: 'var(--accent)' }}>0</span></span>
        </button>
        <a className="mb-book" href="https://calendar.app.google/9eoXfoSh692Xr7ks9" target="_blank" rel="noopener">
          Book a demo →
        </a>
      </nav>
    </>
  );
}
window.Header = Header;