// Top nav — transparente no topo, sólido ao rolar
const DOCTORALIA = 'https://www.doctoralia.com.br/maria-fernanda-sebastiani-ribas/psicologo/curitiba';
const WHATSAPP = 'https://wa.me/5541996715556?text=Ol%C3%A1%2C%20Maria%20Fernanda.%20Vim%20pelo%20site%20e%20gostaria%20de%20agendar%20uma%20consulta.';

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,247,242,.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'], ['Abordagem', '#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={DOCTORALIA} target="_blank" rel="noopener" className="btn btn-primary" style={{ padding: '10px 20px', fontSize: 14 }}>Agendar consulta</a>
      </div>
    </header>
  );
}

function Wordmark() {
  return (
    <a href="#topo" style={{ textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <img src="logo-mf-symbol-sm.png" alt="" width="42" height="67" style={{ display: 'block', height: 42, width: 'auto', flex: 'none' }} />
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 500, letterSpacing: '-.01em', color: 'var(--ink-2)' }}>Maria Fernanda Ribas</span>
        <span style={{ fontFamily: 'var(--font-ui)', fontSize: 11, fontWeight: 500, letterSpacing: '.1em', textTransform: 'uppercase', color: 'var(--muted)', marginTop: 3 }}>Psicóloga · CRP 08/11383</span>
      </span>
    </a>
  );
}

window.Nav = Nav;
window.Wordmark = Wordmark;
window.DOCTORALIA = DOCTORALIA;
window.WHATSAPP = WHATSAPP;