// ===== MAPA / Endereço =====
function Mapa() {
  return (
    <section className="relative overflow-hidden py-24 md:py-32" style={{ background: C.ink, color: C.cream }}>
      <div className="absolute inset-0 pointer-events-none" style={{
        backgroundImage: `radial-gradient(ellipse at 20% 30%, rgba(255,139,122,0.1) 0%, transparent 55%)`
      }}></div>

      <div className="relative max-w-[1100px] mx-auto px-5 md:px-8">
        <Pill dark>onde estamos</Pill>
        <h2 className="font-display mt-6" style={{ fontSize: 'clamp(30px, 4.2vw, 52px)', lineHeight: 1.05, fontWeight: 700, letterSpacing: '-0.025em' }}>
          Estamos no <em className="neon-text" style={{ fontStyle: 'italic', fontWeight: 900 }}>Rio Vermelho,</em> Salvador.
        </h2>
        <div className="grid md:grid-cols-12 gap-8 mt-10 items-start">
          <div className="md:col-span-5">
            <p className="text-base" style={{ color: 'rgba(244,237,227,0.78)', lineHeight: 1.6 }}>
              Rua Ilhéus, 187 · Rio Vermelho<br />Salvador / BA · CEP 41940-590
            </p>
            <p className="mt-5 text-sm" style={{ color: 'rgba(244,237,227,0.6)', lineHeight: 1.6 }}>
              A Nubelle fica em uma das regiões mais vibrantes de Salvador. Fácil acesso, estacionamento próximo e um ambiente criado para que você se sinta bem desde a chegada.
            </p>
            <div className="mt-7">
              <a href="https://maps.google.com/?q=Nubelle+Salvador+Rio+Vermelho" target="_blank" rel="noopener" className="inline-flex items-center gap-3 px-6 py-3 rounded-full font-display transition hover:scale-[1.03]" style={{ background: C.neon, color: C.inkDeep, fontWeight: 700, fontSize: 14, boxShadow: '0 8px 24px -6px rgba(255,139,122,0.5)' }}>
                Ver no Google Maps →
              </a>
            </div>
            <div className="mt-8 space-y-3">
              {[
                ['Seg a Sex', '09h às 18h'],
                ['Sábado', '09h às 18h'],
                ['Domingo', 'Fechado'],
              ].map(([d, h], i) => (
                <div key={i} className="flex items-center justify-between text-sm pb-3" style={{ borderBottom: '1px solid rgba(244,237,227,0.1)' }}>
                  <span style={{ color: 'rgba(244,237,227,0.65)' }}>{d}</span>
                  <span className="font-display" style={{ fontWeight: 700 }}>{h}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="md:col-span-7">
            <div className="aspect-[4/3] rounded-[28px] overflow-hidden relative neon-glow" style={{ background: C.inkDeep, border: '1px solid rgba(255,139,122,0.2)' }}>
              <iframe
                src="https://www.openstreetmap.org/export/embed.html?bbox=-38.5025%2C-13.0152%2C-38.4825%2C-12.9952&layer=mapnik&marker=-13.0052%2C-38.4925"
                style={{ width: '100%', height: '100%', border: 0, filter: 'invert(0.92) hue-rotate(180deg) saturate(0.4)' }}
                loading="lazy"
              ></iframe>
              {/* pin overlay */}
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-full pointer-events-none">
                <div className="w-12 h-12 rounded-full flex items-center justify-center neon-glow" style={{ background: C.neon, color: C.inkDeep, animation: 'bob 3s ease-in-out infinite' }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8 2 5 5 5 9c0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Mapa });