// Top nav — transparente no topo, sólido ao rolar
const WHATSAPP = 'https://wa.me/5541998061344?text=Ol%C3%A1%2C%20Patricya!%20Vi%20seu%20site%20e%20gostaria%20de%20saber%20mais%20sobre%20o%20atendimento.';
const GOOGLE_MAPS = 'https://www.google.com/maps/search/?api=1&query=Psic%C3%B3loga%20e%20Psicanalista%20-%20Patricya%20de%20Assun%C3%A7%C3%A3o&query_place_id=ChIJ4REqU97j3JQRhpa7xjQ0G58';
const INSTAGRAM = 'https://instagram.com/psi_patricyaassuncao';

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(250,246,241,.86)' : '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: 26 }}>
          {[['Sobre', '#sobre'], ['Como eu trabalho', '#abordagem'], ['Como funciona', '#como'], ['Investimento', '#precos'], ['Contato', '#contato']].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={WHATSAPP} target="_blank" rel="noopener" className="btn btn-primary" style={{ padding: '10px 20px', fontSize: 14 }}>Agendar conversa</a>
      </div>
    </header>
  );
}

function Wordmark() {
  return (
    <a href="#topo" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <span aria-hidden="true" style={{
        width: 42, height: 42, borderRadius: 12, flex: 'none',
        backgroundImage: 'linear-gradient(135deg, #b4694a, #8c4e36)', backgroundColor: '#b4694a',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 600, fontSize: 18, color: '#fff', letterSpacing: '-.03em',
      }}>PA</span>
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-.01em', color: 'var(--ink-2)' }}>Patricya de Assunção</span>
        <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 500, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 3 }}>Psicóloga e Psicanalista</span>
      </span>
    </a>
  );
}

window.Nav = Nav;
window.Wordmark = Wordmark;
window.WHATSAPP = WHATSAPP;
window.GOOGLE_MAPS = GOOGLE_MAPS;
window.INSTAGRAM = INSTAGRAM;
