// Header.jsx — The Ferals site header + nav
const Header = ({ activePage = 'home', onNav, isMobile }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const navItems = [
    { id: 'home', label: 'Home' },
    { id: 'news', label: 'News' },
    { id: 'contact', label: 'Contact' },
  ];
  const handleNav = (id) => { setMenuOpen(false); onNav && onNav(id); };

  return (
    <header style={headerStyles.root}>
      <div style={{ ...headerStyles.inner, padding: isMobile ? '0 16px' : '0 32px' }}>
        <a href="#" onClick={(e) => { e.preventDefault(); handleNav('home'); }} style={headerStyles.logoLink}>
          <img src="/assets/ferals-logo-full.png" alt="The Ferals" style={{ ...headerStyles.logo, height: isMobile ? 36 : 44 }} />
        </a>

        {/* Desktop nav */}
        {!isMobile && (
          <nav style={headerStyles.nav}>
            {navItems.map(item => (
              <a key={item.id} href="#"
                onClick={(e) => { e.preventDefault(); handleNav(item.id); }}
                style={{ ...headerStyles.navLink, ...(activePage === item.id ? headerStyles.navLinkActive : {}) }}
              >
                {item.label}
              </a>
            ))}
          </nav>
        )}

        {/* Desktop CTA — hidden on contact page */}
        {!isMobile && activePage !== 'contact' && (
          <a href="#" onClick={(e) => { e.preventDefault(); handleNav('contact'); }}
            style={headerStyles.cta}
            onMouseEnter={e => e.currentTarget.style.background='#2690BC'}
            onMouseLeave={e => e.currentTarget.style.background='#3AAFDF'}
          >
            Buy BNG Units
          </a>
        )}

        {/* Mobile: hamburger */}
        {isMobile && (
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            style={headerStyles.menuBtn}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
          >
            <span style={{ ...headerStyles.menuBar, transform: menuOpen ? 'rotate(45deg) translate(5px,5px)' : 'none' }}></span>
            <span style={{ ...headerStyles.menuBar, opacity: menuOpen ? 0 : 1 }}></span>
            <span style={{ ...headerStyles.menuBar, transform: menuOpen ? 'rotate(-45deg) translate(5px,-5px)' : 'none' }}></span>
          </button>
        )}
      </div>

      {/* Mobile drawer */}
      {isMobile && menuOpen && (
        <div style={headerStyles.mobileMenu}>
          {navItems.map(item => (
            <a key={item.id} href="#"
              onClick={(e) => { e.preventDefault(); handleNav(item.id); }}
              style={{ ...headerStyles.mobileLink, ...(activePage === item.id ? { color: '#3AAFDF', background: '#F5F0E6' } : {}) }}
            >
              {item.label}
            </a>
          ))}
          {activePage !== 'contact' && (
            <div style={{ padding: '12px 16px 20px' }}>
              <a href="#" onClick={(e) => { e.preventDefault(); handleNav('contact'); }} style={headerStyles.mobileCta}>
                Buy BNG Units
              </a>
            </div>
          )}
        </div>
      )}
    </header>
  );
};

const headerStyles = {
  root: { background: '#fff', borderBottom: '1px solid rgba(26,58,74,0.08)', position: 'sticky', top: 0, zIndex: 100, boxShadow: '0 1px 4px rgba(26,58,74,0.06)' },
  inner: { maxWidth: 1200, margin: '0 auto', height: 64, display: 'flex', alignItems: 'center', gap: 16 },
  logoLink: { textDecoration: 'none', flexShrink: 0 },
  logo: { display: 'block' },
  nav: { display: 'flex', gap: 2, flex: 1, justifyContent: 'center', flexWrap: 'nowrap' },
  navLink: { fontFamily: "'Nunito',sans-serif", fontWeight: 600, fontSize: 13, color: '#756D62', textDecoration: 'none', padding: '6px 10px', borderRadius: 6, whiteSpace: 'nowrap', transition: 'color 0.15s, background 0.15s' },
  navLinkActive: { color: '#1A3A4A', background: '#F5F0E6' },
  cta: { fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 13, background: '#3AAFDF', color: '#fff', padding: '9px 16px', borderRadius: 100, textDecoration: 'none', whiteSpace: 'nowrap', transition: 'background 0.2s', flexShrink: 0 },
  menuBtn: { marginLeft: 'auto', display: 'flex', flexDirection: 'column', gap: 5, background: 'none', border: 'none', cursor: 'pointer', padding: '8px 4px' },
  menuBar: { display: 'block', width: 22, height: 2, background: '#1A3A4A', borderRadius: 2, transition: 'transform 0.2s, opacity 0.2s' },
  mobileMenu: { background: '#fff', borderTop: '1px solid rgba(26,58,74,0.08)', boxShadow: '0 4px 20px rgba(26,58,74,0.10)' },
  mobileLink: { fontFamily: "'Nunito',sans-serif", fontWeight: 600, fontSize: 15, color: '#1A3A4A', padding: '14px 20px', display: 'block', textDecoration: 'none', borderBottom: '1px solid rgba(26,58,74,0.06)' },
  mobileCta: { display: 'block', background: '#3AAFDF', color: '#fff', fontFamily: "'Nunito',sans-serif", fontWeight: 700, fontSize: 15, padding: '13px 20px', borderRadius: 100, textDecoration: 'none', textAlign: 'center' },
};

Object.assign(window, { Header });