// Localização — endereço + mapa + contato
function Localizacao() {
  return (
    <section id="contato" className="section">
      <div className="container">
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
          <Reveal>
            <h2 className="h-section">Consultório no <span className="em">Bigorrilho.</span></h2>
            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <Icon name="map" size={22} color="var(--brand)" />
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-2)' }}>Av. Cândido Hartmann, 570</div>
                  <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 2 }}>Bigorrilho, Curitiba · CEP 80730-350</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <Icon name="whatsapp" size={22} color="var(--brand)" />
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-2)' }}>(41) 99806-1344</div>
                  <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 2 }}>A Patricya responde pessoalmente</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <Icon name="instagram" size={22} color="var(--brand)" />
                <div>
                  <a href={window.INSTAGRAM} target="_blank" rel="noopener" style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-2)', textDecoration: 'none' }}>@psi_patricyaassuncao</a>
                  <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 2 }}>Conteúdo sobre saúde mental e psicanálise</div>
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <a href={window.WHATSAPP} target="_blank" rel="noopener" className="btn btn-wa">
                <Icon name="whatsapp" size={17} color="#fff" /> Conversar no WhatsApp
              </a>
              <a href={window.GOOGLE_MAPS} target="_blank" rel="noopener" className="btn btn-ghost">
                <Icon name="map" size={17} /> Ver no Google
              </a>
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <div style={{ position: 'relative', borderRadius: 'var(--r-2xl)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', aspectRatio: '4/3', background: '#e9ddd1' }}>
              <iframe
                title="Consultório Patricya de Assunção — Av. Cândido Hartmann 570, Bigorrilho, Curitiba"
                src="https://www.google.com/maps?q=Av.+C%C3%A2ndido+Hartmann,+570+-+Bigorrilho,+Curitiba&output=embed"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
              <a href={window.GOOGLE_MAPS} target="_blank" rel="noopener"
                style={{ position: 'absolute', bottom: 14, right: 14, padding: '10px 16px', background: 'rgba(255,255,255,.96)', color: 'var(--ink-2)', borderRadius: 999, fontSize: 13, fontWeight: 600, textDecoration: 'none', boxShadow: 'var(--shadow-md)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Icon name="map" size={15} color="var(--brand)" /> Abrir no Maps
              </a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.Localizacao = Localizacao;