// Header.jsx — EPB sticky top navigation
const { useState } = React;

function Header({ onNavigate, current }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const items = [
    { id: 'home', label: 'Accueil' },
    { id: 'formations', label: 'Formations' },
    { id: 'alternance', label: 'L\'alternance' },
    { id: 'ecole', label: 'L\'école' },
    { id: 'actualites', label: 'Actualités' },
  ];
  return (
    <header style={headerStyles.bar}>
      <div style={headerStyles.inner}>
        <a href="#" onClick={(e) => { e.preventDefault(); onNavigate('home'); }} style={headerStyles.logoLink}>
          <span style={headerStyles.logo}>EPB<span style={headerStyles.dot}>.</span></span>
          <span style={headerStyles.tag}>L'ÉCOLE DE L'ALTERNANCE</span>
        </a>
        <nav style={headerStyles.nav}>
          {items.map(it => (
            <a key={it.id} href="#"
               onClick={(e) => { e.preventDefault(); onNavigate(it.id); }}
               style={{ ...headerStyles.navLink, ...(current === it.id ? headerStyles.navLinkActive : {}) }}>
              {it.label}
            </a>
          ))}
        </nav>
        <button style={headerStyles.cta} onClick={() => onNavigate('candidature')}>CANDIDATER</button>
      </div>
    </header>
  );
}

const headerStyles = {
  bar: {
    position: 'sticky', top: 0, zIndex: 50,
    background: '#ffffff',
    borderBottom: '1px solid #E5E9F0',
  },
  inner: {
    maxWidth: 1240, margin: '0 auto', padding: '16px 32px',
    display: 'flex', alignItems: 'center', gap: 24,
  },
  logoLink: { display: 'flex', alignItems: 'baseline', gap: 12, textDecoration: 'none' },
  logo: { fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: 28, color: '#07294D', letterSpacing: '-0.02em', lineHeight: 1 },
  dot: { color: '#EA6927' },
  tag: { fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 9, letterSpacing: '0.18em', color: '#2F4A6B', textTransform: 'uppercase' },
  nav: { display: 'flex', gap: 28, marginLeft: 'auto' },
  navLink: { fontFamily: 'Montserrat, sans-serif', fontWeight: 500, fontSize: 14, color: '#07294D', textDecoration: 'none', paddingBottom: 4, borderBottom: '2px solid transparent' },
  navLinkActive: { borderBottomColor: '#07294D' },
  cta: {
    marginLeft: 16,
    background: '#EA6927', color: '#fff', border: 'none',
    fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 13,
    textTransform: 'uppercase', letterSpacing: '0.08em',
    padding: '12px 18px', borderRadius: 6, cursor: 'pointer',
  },
};

window.Header = Header;