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

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

  const links = [
    { href: '#como-funciona', label: 'Como funciona' },
    { href: '#recursos', label: 'Recursos' },
    { href: '#diferenciais', label: 'Diferenciais' },
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(250, 250, 247, 0.85)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all 0.25s ease',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 72,
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Logo size={22} />
        </a>

        <nav style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="header-nav">
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              padding: '8px 14px',
              fontSize: 14.5,
              color: 'var(--ink-2)',
              fontWeight: 500,
              borderRadius: 8,
              transition: 'color 0.15s, background 0.15s',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--ink)'; e.currentTarget.style.background = 'var(--bg-soft)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--ink-2)'; e.currentTarget.style.background = 'transparent'; }}
            >{l.label}</a>
          ))}
        </nav>

        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} className="header-cta">
          <a href="https://app.econome.com.br" className="btn btn-ghost btn-sm">Entrar</a>
          <a href="https://app.econome.com.br/register" className="btn btn-primary btn-sm">
            Criar conta grátis
          </a>
        </div>

        <button
          aria-label="Menu"
          className="header-menu"
          onClick={() => setMobileOpen(v => !v)}
          style={{ display: 'none', padding: 10, borderRadius: 10, background: 'var(--bg-elevated)', border: '1px solid var(--line)' }}
        >
          <Icon.Menu />
        </button>
      </div>

      {mobileOpen && (
        <div style={{
          background: 'var(--bg-elevated)',
          borderTop: '1px solid var(--line)',
          padding: '16px 20px 24px',
        }}>
          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setMobileOpen(false)} style={{
                padding: '14px 12px', fontSize: 16, color: 'var(--ink)', fontWeight: 500,
                borderRadius: 10,
              }}>{l.label}</a>
            ))}
          </nav>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 16 }}>
            <a href="https://app.econome.com.br" className="btn btn-outline">Entrar</a>
            <a href="https://app.econome.com.br/register" className="btn btn-primary">Criar conta grátis</a>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 880px) {
          .header-nav, .header-cta { display: none !important; }
          .header-menu { display: flex !important; }
        }
      `}</style>
    </header>
  );
}

window.Header = Header;