// AlignSpace landing — Header
const DS_H = window.AlignSpaceDesignSystem_d3d6d6;

function Header() {
  const { Button } = DS_H;
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);

  const links = [
    { href: '#offer',   label: 'What You Get' },
    { href: '#process', label: 'How It Works' },
    { href: '#intake',  label: 'Free Audit' },
    { href: '#contact', label: 'Contact' },
  ];

  const linkStyle = {
    fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)',
    letterSpacing: 'var(--tracking-wide)', color: 'var(--text-on-dark-muted)', transition: 'color .2s',
  };

  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--as-navy)' }}>
      <div className="as-wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: '68px' }}>

        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
          <img src="../../assets/logos/Logo002.png" alt="AlignSpace" style={{ height: '34px', width: 'auto', boxShadow: '0 0 0 1px rgba(220,221,223,0.22)' }} />
          <span style={{ fontFamily: 'var(--font-display)', fontSize: '20px', letterSpacing: '0.02em', color: 'var(--as-mist)' }}>AlignSpace</span>
        </a>

        {/* Desktop nav */}
        <nav className="as-nav-desktop" style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
          {links.map((l) => (
            <a key={l.href} href={l.href} style={linkStyle}
               onMouseEnter={(e) => e.currentTarget.style.color = 'var(--as-mist)'}
               onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-on-dark-muted)'}>
              {l.label}
            </a>
          ))}
          <Button variant="secondary" onDark size="sm" href="#intake">Request a Consultation</Button>
        </nav>

        {/* Hamburger — mobile only, hidden by default via CSS */}
        <button className="as-nav-hamburger" onClick={() => setOpen(o => !o)}
          style={{ display: 'none', flexDirection: 'column', justifyContent: 'center', gap: '5px', background: 'none', border: 'none', cursor: 'pointer', padding: '8px' }}>
          {open ? (
            <span style={{ color: 'var(--as-mist)', fontSize: '20px', lineHeight: 1, width: '22px', textAlign: 'center' }}>✕</span>
          ) : (
            <>
              <span style={{ display: 'block', width: '22px', height: '2px', background: 'var(--as-mist)' }} />
              <span style={{ display: 'block', width: '22px', height: '2px', background: 'var(--as-mist)' }} />
              <span style={{ display: 'block', width: '22px', height: '2px', background: 'var(--as-mist)' }} />
            </>
          )}
        </button>
      </div>

      {/* Mobile dropdown */}
      {open && (
        <nav style={{ background: 'var(--as-navy)', borderTop: '1px solid rgba(220,221,223,0.1)', padding: '8px 0 24px' }}>
          <div className="as-wrap" style={{ display: 'flex', flexDirection: 'column' }}>
            {links.map((l) => (
              <a key={l.href} href={l.href} onClick={close}
                style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-base)', letterSpacing: 'var(--tracking-wide)', color: 'var(--text-on-dark-muted)', padding: '14px 0', borderBottom: '1px solid rgba(220,221,223,0.08)', display: 'block' }}>
                {l.label}
              </a>
            ))}
            <div style={{ marginTop: '20px' }}>
              <Button variant="secondary" onDark href="#intake" onClick={close}>Request a Consultation</Button>
            </div>
          </div>
        </nav>
      )}
    </header>
  );
}
window.Header = Header;