// Header.jsx — Dra. Ana Carolina Grillo — Navigation Header
const Header = ({ activePage, onNavigate }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const nav = [
    { id: 'sobre', label: 'Sobre' },
    { id: 'especialidades', label: 'Especialidades' },
    { id: 'depoimentos', label: 'Depoimentos' },
    { id: 'contato', label: 'Contato' },
  ];

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(51,57,91,0.97)' : '#33395B',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(184,150,12,0.25)' : '1px solid transparent',
      transition: 'all 0.3s ease',
      padding: '0 40px',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 96 }}>
        {/* Logo — real brand asset */}
        <button onClick={() => onNavigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}>
          <img
            src="assets/logo-monogram.png"
            alt="Dra. Ana Carolina Grillo"
            style={{ height: 76, width: 'auto', display: 'block' }}
          />
        </button>

        {/* Desktop nav */}
        <nav style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
          {nav.map(item => (
            <button key={item.id} onClick={() => onNavigate(item.id)} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: "'Montserrat',sans-serif", fontSize: 12, fontWeight: 500,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: activePage === item.id ? '#B8960C' : 'rgba(255,255,255,0.8)',
              borderBottom: activePage === item.id ? '1px solid #B8960C' : '1px solid transparent',
              paddingBottom: 2, transition: 'color 0.2s',
            }}>{item.label}</button>
          ))}
          <button onClick={() => onNavigate('contato')} style={{
            fontFamily: "'Montserrat',sans-serif", fontSize: 12, fontWeight: 500,
            letterSpacing: '0.08em', padding: '10px 22px',
            background: '#B8960C', color: '#fff', border: 'none',
            borderRadius: 4, cursor: 'pointer', transition: 'background 0.2s',
          }}>Agendar Consulta</button>
        </nav>
      </div>
    </header>
  );
};

Object.assign(window, { Header });