// TAO Design System — Header Component
// ui_kits/tao-website/Header.jsx

function Header({ currentPage, onNavigate }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navItems = [
    { label: 'Services', page: 'services' },
    { label: 'About', page: 'about' },
    { label: 'Our Work', page: 'work' },
    { label: 'Contact', page: 'contact' },
  ];
  return (
    <header style={{ background: TAO_COLORS.bgSurface, borderBottom: `1px solid ${TAO_COLORS.border}`, position: 'sticky', top: 0, zIndex: 100 }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px', height: 72, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <button onClick={() => onNavigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <Logo variant="dark" size="sm" />
        </button>
        <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          {navItems.map(item => (
            <button key={item.page} onClick={() => onNavigate(item.page)} style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '4px 0',
              fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 500,
              color: currentPage === item.page ? TAO_COLORS.primary : TAO_COLORS.muted,
              borderBottom: currentPage === item.page ? `2px solid ${TAO_COLORS.primary}` : '2px solid transparent',
              transition: 'all 200ms ease-out',
            }}>
              {item.label}
            </button>
          ))}
          <Btn size="sm" onClick={() => onNavigate('contact')}>Book a Consultation</Btn>
        </nav>
      </div>
    </header>
  );
}

Object.assign(window, { Header });