function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const nav = [
    { label: 'Início', id: 'hero' },
    { label: 'Serviços', id: 'services' },
    { label: 'Projetos', id: 'projects' },
    { label: 'Vantagens', id: 'advantages' },
    { label: 'FAQ', id: 'faq' },
    { label: 'Contato', id: 'contact' },
  ];

  const go = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
    setOpen(false);
  };

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-smooth ${
        scrolled ? 'bg-primary shadow-elegant' : 'bg-primary/95 backdrop-blur'
      }`}
    >
      <div className="container mx-auto px-4">
        <div className="flex items-center justify-between h-20">
          <img src={window.LOGO_WHITE} alt="Casa Bella Construtora" className="h-14 w-auto" />

          <nav className="hidden md:flex items-center gap-8">
            {nav.map((n) => (
              <button
                key={n.id}
                onClick={() => go(n.id)}
                className="text-white/90 hover:text-accent transition-smooth text-sm font-medium"
              >
                {n.label}
              </button>
            ))}
          </nav>

          <button
            onClick={() => go('contact')}
            className="hidden md:inline-flex items-center gap-2 bg-accent hover:bg-accent/90 transition-smooth text-white font-semibold rounded-lg px-5 py-2.5 shadow-glow text-sm"
          >
            Solicite um orçamento
          </button>

          <button
            className="md:hidden text-white p-2"
            onClick={() => setOpen((v) => !v)}
            aria-label="Menu"
          >
            <Icon name={open ? 'x' : 'menu'} size={24} />
          </button>
        </div>

        {open && (
          <nav className="md:hidden pb-4 animate-fade-in flex flex-col gap-1">
            {nav.map((n) => (
              <button
                key={n.id}
                onClick={() => go(n.id)}
                className="text-left py-3 text-white/90 hover:text-accent transition-smooth font-medium border-b border-white/10"
              >
                {n.label}
              </button>
            ))}
            <button
              onClick={() => go('contact')}
              className="mt-3 inline-flex items-center justify-center gap-2 bg-accent text-white font-semibold rounded-lg px-5 py-3"
            >
              Solicite um orçamento
            </button>
          </nav>
        )}
      </div>
    </header>
  );
}

window.Header = Header;