const TLMaps = () => (
  <section id="ubicacion" style={{ background: '#F5F5F7', padding: '100px 40px' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.8fr', gap: 64, alignItems: 'center' }}>
        {/* Info */}
        <div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Ubicación</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.5vw, 44px)', color: '#1D1D1F', letterSpacing: -1.5, margin: '0 0 20px', lineHeight: 1.1 }}>
            Cancún<br/>y la Riviera Maya.
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: '#6E6E73', lineHeight: 1.75, margin: '0 0 36px', letterSpacing: -0.1 }}>
            Operamos desde Cancún atendiendo la Riviera Maya. En expansión hacia Puerto Morelos, Playa del Carmen, Tulum y Mérida.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              {
                city: 'Cancún, Quintana Roo',
                desc: 'Oficina operativa · Riviera Maya',
                tel: '(998) 385 4149',
                contact: 'Ing. Arturo Monroy Blanco',
                href: 'tel:9983854149',
              },
              {
                city: 'Próxima expansión',
                desc: 'Puerto Morelos · Playa del Carmen · Tulum · Mérida',
                tel: '(55) 2908 6846',
                contact: 'Misma calidad · Mayor cobertura',
                href: 'tel:5529086846',
              },
            ].map(loc => (
              <div key={loc.city} style={{ background: '#fff', border: '1px solid #E5E5EA', borderRadius: 16, padding: 20, transition: 'all 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.06)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; }}
              >
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, color: '#1D1D1F', marginBottom: 3 }}>{loc.city}</div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#9E9EA3', marginBottom: 10 }}>{loc.desc}</div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#6E6E73', marginBottom: 4 }}>{loc.contact}</div>
                    <a href={loc.href} style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, color: '#1D1D1F', textDecoration: 'none' }}>{loc.tel}</a>
                  </div>
                  <div style={{ width: 36, height: 36, borderRadius: 10, background: '#F5F5F7', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1D1D1F" strokeWidth="2" strokeLinecap="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <a href="mailto:contacto@torreland.com.mx" style={{
            marginTop: 24, display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14, color: '#1D1D1F',
            textDecoration: 'none', transition: 'opacity 0.2s',
          }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.6'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            contacto@torreland.com.mx
          </a>
        </div>

        {/* Map */}
        <div style={{ borderRadius: 24, overflow: 'hidden', border: '1px solid #E5E5EA', boxShadow: '0 4px 40px rgba(0,0,0,0.06)', aspectRatio: '16/9' }}>
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119745.57703570649!2d-87.09059383046875!3d21.161908!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8f4c2b14f3e2b8bf%3A0x7e5c0e0a0a0a0a0a!2sCancún%2C+Quintana+Roo!5e0!3m2!1ses!2smx!4v1745000000000!5m2!1ses!2smx"
            width="100%"
            height="100%"
            style={{ border: 'none', display: 'block' }}
            allowFullScreen=""
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            title="Torre Land — Cancún, Quintana Roo"
          />
        </div>
      </div>
    </div>
  </section>
);

// Visit CTA — keep a subtle dark strip for Apple-style contrast
const TLVisitCTA = () => {
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); };
  return (
    <section style={{ background: '#1D1D1F', padding: '80px 40px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -120, right: -120, width: 400, height: 400, background: 'radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%)', borderRadius: '50%' }} />
      </div>
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#9E9EA3', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Sin costo · Sin compromiso</div>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 52px)', color: '#F5F5F7', letterSpacing: -2, margin: '0 0 20px', lineHeight: 1.08 }}>
          Agenda tu visita técnica<br/>y recibe evaluación profesional.
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: '#9E9EA3', margin: '0 0 40px', lineHeight: 1.65, letterSpacing: -0.2 }}>
          Nuestro equipo evalúa tu proyecto sin costo y te entrega un diagnóstico claro con propuesta.
        </p>
        <div style={{ display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button onClick={() => scrollTo('cotizar')} style={{
            background: '#fff', color: '#1D1D1F', border: 'none', cursor: 'pointer',
            fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 16,
            padding: '18px 40px', borderRadius: 100, transition: 'all 0.25s',
          }}
          onMouseEnter={e => { e.target.style.transform = 'translateY(-2px)'; e.target.style.background = '#F5F5F7'; }}
          onMouseLeave={e => { e.target.style.transform = 'none'; e.target.style.background = '#fff'; }}
          >
            Solicitar visita técnica
          </button>
          <a href="https://wa.me/5529086846?text=Hola, quiero agendar una visita técnica" target="_blank" rel="noopener noreferrer" style={{
            background: 'transparent', color: '#F5F5F7',
            border: '1.5px solid rgba(255,255,255,0.2)',
            fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 16,
            padding: '18px 36px', borderRadius: 100,
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'all 0.25s',
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)'; e.currentTarget.style.background = 'rgba(255,255,255,0.05)'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)'; e.currentTarget.style.background = 'transparent'; }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            WhatsApp directo
          </a>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TLMaps, TLVisitCTA });