// SiteHeader
const SiteHeader = ({ active = 'home' }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navItems = [
    { id: 'gentle-spay', label: 'העיקור העדין', href: '/gentle-spay.html' },
    { id: 'procedures', label: 'פרוצדורות', href: '/procedures.html' },
    { id: 'about', label: 'ד״ר דניאל', href: '/about.html' },
    { id: 'vets', label: 'לווטרינרים', href: '/vets.html' },
    { id: 'blog', label: 'בלוג', href: '/blog.html' },
  ];
  return (
    <header className="site-header">
      <div className="container">
        <a href="/index.html" className="logo" aria-label="לומיווט - דף הבית">
          <img src="assets/logo-horizontal.png" alt="LumiVet" />
        </a>
        <nav className="nav">
          {navItems.map(n => (
            <a key={n.id} href={n.href} className={active === n.id ? 'active' : ''}>{n.label}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <a href="https://wa.me/97233035033" className="btn btn-primary btn-sm" style={{ paddingInline: 20 }}>
            <WhatsappIcon size={18} />
            <span className="header-cta-text">שלחו הודעה</span>
          </a>
          <button className="hamburger" onClick={() => setMenuOpen(!menuOpen)} aria-label="תפריט">
            {menuOpen ? <XIcon /> : <MenuIcon />}
          </button>
        </div>
      </div>
      {menuOpen && (
        <div style={{ background: '#fff', borderTop: '1px solid #eee', padding: '20px 24px' }}>
          {navItems.map(n => (
            <a key={n.id} href={n.href} onClick={() => setMenuOpen(false)}
               style={{ display: 'block', padding: '14px 0', color: '#000E34', fontWeight: 500, fontSize: 17, borderBottom: '1px solid #F3F5F9' }}>{n.label}</a>
          ))}
        </div>
      )}
    </header>
  );
};
window.SiteHeader = SiteHeader;