// Top nav: sempre visível. Transparente no topo, sólido (blur + borda) ao rolar.
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 30,
      transition: 'background .35s var(--ease-out), border-color .35s var(--ease-out), backdrop-filter .35s var(--ease-out)',
      background: scrolled ? 'rgba(246,244,238,.82)' : 'transparent',
      backdropFilter: scrolled ? 'saturate(160%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(160%) blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <Wordmark />
        <nav className="nav-links" style={{ display: 'flex', gap: 28 }}>
          {[['Como funciona', '#como'], ['Casos', '#casos'], ['Planos', '#planos'], ['FAQ', '#faq']].map(([l, h]) => (
            <a key={l} href={h} style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-2)', textDecoration: 'none' }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--brand)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-2)'}>{l}</a>
          ))}
        </nav>
        <a href="#previa" className="btn btn-primary" style={{ padding: '10px 20px', fontSize: 14 }}>Prévia grátis</a>
      </div>
    </header>
  );
}

function Wordmark({ dark = false }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
      <span style={{ width: 26, height: 26, borderRadius: 8, background: 'var(--grad-brand)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-sm)' }}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="16" rx="2" /><path d="M3 9h18M8 20V9" />
        </svg>
      </span>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 21, fontWeight: 600, letterSpacing: '-.01em', color: dark ? '#fff' : 'var(--ink-2)' }}>Vitrini</span>
    </span>
  );
}

window.Nav = Nav;
window.Wordmark = Wordmark;
