const NAV_ITEMS = [
  { id: 'accueil', label: 'Accueil' },
  { id: 'commune', label: 'La Commune' },
  { id: 'administration', label: 'Administration', children: [
    { id: 'maire', label: 'Le Maire' },
    { id: 'adjoints', label: 'Les Adjoints' },
    { id: 'conseillers', label: 'Les Conseillers' },
    { id: 'services', label: 'Les Services' },
  ]},
  { id: 'services-ligne', label: 'Services en ligne', children: [
    { id: 'etat-civil', label: 'État Civil' },
    { id: 'courrier', label: 'Courrier' },
    { id: 'manifestation', label: 'Autorisation de Manifestation' },
    { id: 'emploi', label: "Emploi pour Tous" },
  ]},
  { id: 'actualites', label: 'Actualités' },
  { id: 'galerie', label: 'Galerie' },
  { id: 'infos', label: 'Infos Pratiques' },
  { id: 'contact', label: 'Contact' },
];

function Header({ page, setPage, mobileOpen, setMobileOpen }) {
  const [openDropdown, setOpenDropdown] = React.useState(null);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const handler = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', handler);
    return () => window.removeEventListener('scroll', handler);
  }, []);

  const navigate = (id) => {
    setPage(id);
    setOpenDropdown(null);
    setMobileOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      background: scrolled ? 'rgba(15,50,25,0.97)' : '#0f3219',
      backdropFilter: 'blur(8px)',
      boxShadow: scrolled ? '0 2px 20px rgba(0,0,0,0.3)' : 'none',
      transition: 'all 0.3s',
    }}>
      {/* Top bar */}
      <div style={{ background: '#e07020', padding: '4px 0', fontSize: 12, color: '#fff', textAlign: 'center', letterSpacing: 1 }}>
        <span>🌐 mairiesoubre.net — Côte d'Ivoire, Région de la Nawa</span>
      </div>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' }} onClick={() => navigate('accueil')}>
          <img src="assets/image4.jpg" alt="Blason Soubré" style={{ height: 48, width: 'auto', borderRadius: 4 }} />
          <div>
            <div style={{ color: '#fff', fontFamily: "'Playfair Display', serif", fontWeight: 700, fontSize: 17, lineHeight: 1.1 }}>Mairie de Soubré</div>
            <div style={{ color: 'rgba(255,255,255,0.6)', fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase' }}>Commune de Soubré</div>
          </div>
        </div>

        {/* Desktop Nav */}
        <nav style={{ display: 'flex', gap: 4, alignItems: 'center' }} className="desktop-nav">
          {NAV_ITEMS.map(item => (
            <div key={item.id} style={{ position: 'relative' }}
              onMouseEnter={() => item.children && setOpenDropdown(item.id)}
              onMouseLeave={() => setOpenDropdown(null)}>
              <button onClick={() => !item.children && navigate(item.id)}
                style={{
                  background: page === item.id || (item.children && item.children.some(c => c.id === page)) ? 'rgba(224,112,32,0.25)' : 'transparent',
                  border: 'none', color: '#fff', padding: '6px 10px', borderRadius: 4,
                  cursor: 'pointer', fontSize: 13, fontFamily: "'Source Sans 3', sans-serif",
                  fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4,
                  transition: 'background 0.2s',
                }}
                onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
                onMouseLeave={e => e.currentTarget.style.background = page === item.id ? 'rgba(224,112,32,0.25)' : 'transparent'}>
                {item.label}
                {item.children && <span style={{ fontSize: 9, opacity: 0.7 }}>▾</span>}
              </button>
              {item.children && openDropdown === item.id && (
                <div style={{
                  position: 'absolute', top: '100%', left: 0, background: '#0f3219',
                  borderTop: '2px solid #e07020', minWidth: 220, borderRadius: '0 0 8px 8px',
                  boxShadow: '0 8px 24px rgba(0,0,0,0.3)', overflow: 'hidden', zIndex: 200,
                }}>
                  {item.children.map(child => (
                    <button key={child.id} onClick={() => navigate(child.id)}
                      style={{
                        display: 'block', width: '100%', textAlign: 'left',
                        padding: '10px 16px', background: 'transparent',
                        border: 'none', color: 'rgba(255,255,255,0.85)',
                        fontSize: 13, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif",
                        borderBottom: '1px solid rgba(255,255,255,0.06)',
                        transition: 'background 0.15s',
                      }}
                      onMouseEnter={e => { e.currentTarget.style.background = 'rgba(224,112,32,0.2)'; e.currentTarget.style.color = '#fff'; }}
                      onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'rgba(255,255,255,0.85)'; }}>
                      {child.label}
                    </button>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>

        {/* Mobile burger */}
        <button onClick={() => setMobileOpen(!mobileOpen)}
          style={{ display: 'none', background: 'none', border: 'none', color: '#fff', fontSize: 24, cursor: 'pointer' }}
          className="mobile-burger">☰</button>
      </div>

      {/* Mobile menu */}
      {mobileOpen && (
        <div style={{ background: '#0a2615', borderTop: '1px solid rgba(255,255,255,0.1)', padding: '8px 0 16px' }}>
          {NAV_ITEMS.map(item => (
            <div key={item.id}>
              <button onClick={() => !item.children ? navigate(item.id) : null}
                style={{ display: 'block', width: '100%', textAlign: 'left', padding: '10px 24px', background: 'none', border: 'none', color: '#fff', fontSize: 14, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif", fontWeight: 600 }}>
                {item.label}
              </button>
              {item.children && item.children.map(c => (
                <button key={c.id} onClick={() => navigate(c.id)}
                  style={{ display: 'block', width: '100%', textAlign: 'left', padding: '8px 40px', background: 'none', border: 'none', color: 'rgba(255,255,255,0.7)', fontSize: 13, cursor: 'pointer', fontFamily: "'Source Sans 3', sans-serif" }}>
                  {c.label}
                </button>
              ))}
            </div>
          ))}
        </div>
      )}
    </header>
  );
}

Object.assign(window, { Header });