// Header.jsx — Leandro Rafael Website
const Header = ({ activeSection, onNav }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const links = [
    { id: 'sobre', label: 'Sobre' },
    { id: 'atuacao', label: 'Atuação' },
    { id: 'cases', label: 'Cases' },
    { id: 'publicacoes', label: 'Publicações' },
    { id: 'aulas', label: 'Aulas' },
    { id: 'portfolio', label: 'Portfólio', external: 'portfolio.html' },
  ];

  return React.createElement('header', {
    role: 'banner',
    style: {
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: '#0B2447',
      borderBottom: scrolled ? '1px solid rgba(201,169,97,0.2)' : '1px solid transparent',
      transition: 'border-color 300ms ease',
    }
  },
    React.createElement('div', {
      style: {
        maxWidth: 1280, margin: '0 auto', padding: '0 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 68,
      }
    },
      // Logo
      React.createElement('div', {
        style: { display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer' },
        onClick: () => onNav('hero'),
        role: 'link', 'aria-label': 'Leandro Rafael — início'
      },
        React.createElement('img', { src: 'assets/logo.png', alt: 'Logo LR', style: { height: 38 } }),
        React.createElement('span', {
          style: {
            fontFamily: "'Playfair Display', serif", fontSize: 16, fontWeight: 700,
            color: '#F7F5F0', letterSpacing: '0.01em'
          }
        }, 'Leandro Rafael')
      ),
      // Desktop nav
      React.createElement('nav', {
        style: { display: 'flex', gap: 32, alignItems: 'center' },
        className: 'desktop-nav',
        'aria-label': 'Navegação principal'
      },
        ...links.map(l =>
          React.createElement('a', {
            key: l.id,
            href: l.external ? l.external : `#${l.id}`,
            target: l.external ? '_blank' : undefined,
            rel: l.external ? 'noopener noreferrer' : undefined,
            onClick: l.external ? undefined : (e) => { e.preventDefault(); onNav(l.id); },
            style: {
              fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 500,
              letterSpacing: '0.03em', textDecoration: 'none',
              color: activeSection === l.id ? '#C9A961' : 'rgba(247,245,240,0.72)',
              transition: 'color 200ms ease',
              borderBottom: activeSection === l.id ? '1px solid #C9A961' : '1px solid transparent',
              paddingBottom: 2,
            }
          }, l.label)
        ),
        React.createElement('a', {
          href: '#contato',
          onClick: (e) => { e.preventDefault(); onNav('contato'); },
          style: {
            fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 500,
            letterSpacing: '0.04em', textDecoration: 'none',
            color: '#C9A961', border: '1px solid #C9A961',
            padding: '8px 20px', borderRadius: 2,
            transition: 'background 200ms ease, color 200ms ease',
          },
          onMouseEnter: e => { e.target.style.background = '#C9A961'; e.target.style.color = '#0B2447'; },
          onMouseLeave: e => { e.target.style.background = 'transparent'; e.target.style.color = '#C9A961'; },
        }, 'Contato')
      ),
      // Mobile hamburger
      React.createElement('button', {
        className: 'mobile-menu-btn',
        onClick: () => setMenuOpen(!menuOpen),
        'aria-label': menuOpen ? 'Fechar menu' : 'Abrir menu',
        'aria-expanded': menuOpen,
        style: {
          background: 'none', border: 'none', cursor: 'pointer',
          display: 'none', flexDirection: 'column', gap: 5, padding: 4
        }
      },
        ...[0,1,2].map(i => React.createElement('span', {
          key: i, style: {
            display: 'block', width: 22,
            height: 1.5,
            background: '#F7F5F0',
            transition: 'transform 200ms',
          }
        }))
      )
    ),
    // Mobile menu
    menuOpen && React.createElement('nav', {
      style: {
        background: '#0B2447', borderTop: '1px solid rgba(201,169,97,0.2)',
        padding: '20px 24px 28px'
      },
      'aria-label': 'Menu mobile'
    },
      ...links.map(l =>
        React.createElement('div', { key: l.id, style: { marginBottom: 20 } },
          React.createElement('a', {
            href: l.external ? l.external : `#${l.id}`,
            target: l.external ? '_blank' : undefined,
            rel: l.external ? 'noopener noreferrer' : undefined,
            onClick: l.external ? () => setMenuOpen(false) : (e) => { e.preventDefault(); setMenuOpen(false); onNav(l.id); },
            style: {
              fontFamily: "'Inter', sans-serif", fontSize: 16, fontWeight: 500,
              color: 'rgba(247,245,240,0.85)', textDecoration: 'none', display: 'block'
            }
          }, l.label)
        )
      ),
      React.createElement('a', {
        href: '#contato',
        onClick: (e) => { e.preventDefault(); setMenuOpen(false); onNav('contato'); },
        style: {
          fontFamily: "'Inter', sans-serif", fontSize: 14, fontWeight: 500,
          color: '#C9A961', border: '1px solid #C9A961', padding: '10px 20px',
          borderRadius: 2, textDecoration: 'none', display: 'inline-block', marginTop: 4
        }
      }, 'Contato')
    )
  );
};

Object.assign(window, { Header });