// Localização — endereço + mapa estilizado + 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)' }}>Rua Fernando Simas, 705 · Sala 14</div>
                  <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 2 }}>Bigorrilho, Curitiba · CEP 80430-190</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) 99671-5556</div>
                  <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 2 }}>Resposta em horário comercial</div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <Icon name="instagram" size={22} color="var(--brand)" />
                <div>
                  <a href="https://www.instagram.com/mfernandapsico/" target="_blank" rel="noopener" style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink-2)', textDecoration: 'none' }}>@mfernandapsico</a>
                  <div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 2 }}>Conteúdo semanal sobre relações e saúde mental</div>
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
              <a href={window.DOCTORALIA} target="_blank" rel="noopener" className="btn btn-primary">
                <Icon name="calendar" size={17} color="#fff" /> Agendar agora
              </a>
              <a href={window.WHATSAPP} target="_blank" rel="noopener" className="btn btn-wa">
                <Icon name="whatsapp" size={17} color="#fff" /> Conversar
              </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: '#e6e2d8' }}>
              <iframe
                title="Consultório Maria Fernanda Ribas — Rua Fernando Simas 705, Bigorrilho, Curitiba"
                src="https://www.google.com/maps?q=Rua+Fernando+Simas+705+Bigorrilho+Curitiba+PR&z=16&output=embed"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen
              />
              <a href="https://www.google.com/maps/search/?api=1&query=Rua+Fernando+Simas+705+Bigorrilho+Curitiba+PR" 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;