// ─── Clientes y Alianzas ───────────────────────────────────────────────────
const TL_MEDIA_BASE = 'https://media.torreland.com.mx';
const DREAM_LAGOONS_MEDIA = [
  '2026-04-30_cliente_dream-lagoons-cancun_001',
  '2026-04-30_cliente_dream-lagoons-cancun_002',
  '2026-04-30_cliente_dream-lagoons-cancun_003',
  '2026-04-24_cliente_dream-lagoons-cancun_004',
  '2026-04-24_cliente_dream-lagoons-cancun_005',
  '2026-04-24_cliente_dream-lagoons-cancun_006',
  '2026-04-24_cliente_dream-lagoons-cancun_007',
  '2026-04-24_cliente_dream-lagoons-cancun_008',
  '2026-04-24_cliente_dream-lagoons-cancun_009',
  '2026-04-24_cliente_dream-lagoons-cancun_010',
  '2026-04-24_cliente_dream-lagoons-cancun_011',
].map(name => ({
  webp: `${TL_MEDIA_BASE}/torreland/clientes/dream-lagoons-cancun/${name}.webp`,
  fallback: `/uploads/clientes/dream-lagoons-cancun/${name}.jpg`,
}));

const GRUPO_ARA_DEVS = [
  {
    name: 'Dreams Lagoons Cancún',
    area: 'Cancún, Q. Roo',
    services: ['Pintura', 'Impermeabilizado', 'Mantenimiento'],
    maps: 'https://www.google.com/maps/search/Dreams+Lagoons+Cancun+Quintana+Roo',
    images: DREAM_LAGOONS_MEDIA,
  },
  {
    name: 'Izamal Residencial',
    area: 'Cancún, Q. Roo',
    services: ['Pintura', 'Impermeabilizado'],
    maps: 'https://www.google.com/maps/search/Izamal+Residencial+Cancun',
  },
  {
    name: 'Paseos de Zazil',
    area: 'Cancún, Q. Roo',
    services: ['Pintura', 'Construcción'],
    maps: 'https://www.google.com/maps/search/Paseos+de+Zazil+Cancun',
  },
  {
    name: 'Cuyan Residencial',
    area: 'Cancún, Q. Roo',
    services: ['Pintura', 'Mantenimiento'],
    maps: 'https://www.google.com/maps/search/Cuyan+Residencial+Cancun',
  },
  {
    name: 'Privada Balam',
    area: 'Cancún, Q. Roo',
    services: ['Pintura', 'Jardinería'],
    maps: 'https://www.google.com/maps/search/Privada+Balam+Cancun',
  },
];

const ACTIVE_PRIVADAS = [
  {
    name: 'Privada Ámbar',
    area: 'Fracc. Astoria · Cancún',
    services: ['Mantenimiento Integral', 'Conservación'],
    maps: 'https://www.google.com/maps/search/Privada+Ambar+Astoria+Cancun',
  },
  {
    name: 'Privada Columbus',
    area: 'Fracc. Astoria · Cancún',
    services: ['Mantenimiento Integral', 'Conservación'],
    maps: 'https://www.google.com/maps/search/Privada+Columbus+Astoria+Cancun',
  },
];

const MapPinIcon = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="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>
);

const ArrowIcon = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
);

const TLClients = () => {
  const [visibleMain, setVisibleMain] = React.useState(false);
  const [modal, setModal] = React.useState(null);
  const ref = React.useRef();
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisibleMain(true); }, { threshold: 0.06 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={ref} id="clientes" style={{ background: '#FBFBFD', padding: '100px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>

        {/* Header */}
        <div style={{
          opacity: visibleMain ? 1 : 0, transform: visibleMain ? 'none' : 'translateY(20px)',
          transition: 'all 0.7s ease', textAlign: 'center', marginBottom: 64,
        }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 16 }}>Alianzas y Clientes</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4vw, 52px)', color: '#1D1D1F', letterSpacing: -2, margin: '0 0 20px', lineHeight: 1.08 }}>
            Desarrolladores que<br/>confían en nosotros.
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: '#6E6E73', maxWidth: 520, margin: '0 auto', lineHeight: 1.7, letterSpacing: -0.1 }}>
            Más de 6 años siendo contratistas de obra para los desarrollos residenciales más importantes de Cancún.
          </p>
        </div>

        {/* Grupo ARA featured banner */}
        <div style={{
          opacity: visibleMain ? 1 : 0, transform: visibleMain ? 'none' : 'translateY(20px)',
          transition: 'all 0.7s ease 0.1s',
          background: '#1D1D1F', borderRadius: 24, padding: '36px 44px', marginBottom: 32,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', top: -60, right: -60, width: 300, height: 300, background: 'radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            <div style={{ width: 64, height: 64, borderRadius: 16, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 900, fontSize: 22, color: '#fff', letterSpacing: -1 }}>ARA</span>
            </div>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 20, color: '#fff', letterSpacing: -0.5 }}>Grupo ARA</span>
                <span style={{ background: '#34C759', color: '#fff', borderRadius: 100, padding: '3px 12px', fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 11 }}>Alianza activa</span>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.55)', lineHeight: 1.5 }}>
                Contratistas de obra en 5 desarrollos residenciales · Cancún, Q. Roo
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 32, flexWrap: 'wrap' }}>
            {[['6+', 'Años de alianza'], ['5', 'Desarrollos'], ['100s', 'Viviendas entregadas']].map(([n, l]) => (
              <div key={l} style={{ textAlign: 'center' }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 28, color: '#fff', letterSpacing: -1 }}>{n}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: 'rgba(255,255,255,0.4)', marginTop: 2 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Grupo ARA developments grid */}
        <div style={{
          opacity: visibleMain ? 1 : 0, transform: visibleMain ? 'none' : 'translateY(20px)',
          transition: 'all 0.7s ease 0.2s',
          display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 14, marginBottom: 40,
        }}>
          {GRUPO_ARA_DEVS.map((dev, i) => (
            <a key={dev.name} href={dev.maps} target="_blank" rel="noopener noreferrer"
              style={{ background: '#fff', border: '1px solid #E5E5EA', borderRadius: 18, padding: 22, textDecoration: 'none', display: 'block', transition: 'all 0.25s' }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.07)'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = '#AEAEB2'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; e.currentTarget.style.borderColor = '#E5E5EA'; }}
            >
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: '#F5F5F7', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#1D1D1F" strokeWidth="1.5" strokeLinecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z M9 22V12h6v10"/></svg>
                </div>
                <div style={{ color: '#9E9EA3' }}><ArrowIcon /></div>
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 14, color: '#1D1D1F', marginBottom: 5, lineHeight: 1.3 }}>{dev.name}</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#9E9EA3', marginBottom: 12 }}>
                <MapPinIcon />{dev.area}
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: dev.images && dev.images.length ? 12 : 0 }}>
                {dev.services.map(s => (
                  <span key={s} style={{ background: '#F5F5F7', borderRadius: 6, padding: '2px 8px', fontFamily: 'Inter, sans-serif', fontSize: 10, color: '#6E6E73', fontWeight: 600 }}>{s}</span>
                ))}
              </div>
              {dev.images && dev.images.length ? (
                <button
                  onClick={e => { e.preventDefault(); e.stopPropagation(); setModal({ title: dev.name, loc: dev.area, images: dev.images, idx: 0 }); }}
                  style={{ background: '#1D1D1F', color: '#fff', border: 'none', borderRadius: 8, padding: '6px 12px', fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 11, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 }}
                >
                  Ver fotos →
                </button>
              ) : null}
            </a>
          ))}
        </div>

        {/* Privadas activas section */}
        <div style={{
          opacity: visibleMain ? 1 : 0, transform: visibleMain ? 'none' : 'translateY(20px)',
          transition: 'all 0.7s ease 0.3s',
        }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 16 }}>
            Clientes actuales · Mantenimiento y Conservación
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 14 }}>
            {ACTIVE_PRIVADAS.map((p) => (
              <a key={p.name} href={p.maps} target="_blank" rel="noopener noreferrer"
                style={{ background: '#fff', border: '1.5px solid #E5E5EA', borderRadius: 18, padding: 24, textDecoration: 'none', display: 'flex', gap: 18, alignItems: 'center', transition: 'all 0.25s' }}
                onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.06)'; e.currentTarget.style.borderColor = '#AEAEB2'; }}
                onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.borderColor = '#E5E5EA'; }}
              >
                <div style={{ width: 44, height: 44, borderRadius: 12, background: '#F0FDF4', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#166534" strokeWidth="1.5" strokeLinecap="round"><path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                    <span style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, color: '#1D1D1F' }}>{p.name}</span>
                    <span style={{ background: '#F0FDF4', color: '#166534', borderRadius: 100, padding: '2px 8px', fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 10 }}>Activo</span>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#9E9EA3', marginBottom: 8 }}>
                    <MapPinIcon />{p.area}
                  </div>
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
                    {p.services.map(s => (
                      <span key={s} style={{ background: '#F5F5F7', borderRadius: 6, padding: '2px 8px', fontFamily: 'Inter, sans-serif', fontSize: 10, color: '#6E6E73', fontWeight: 600 }}>{s}</span>
                    ))}
                  </div>
                </div>
                <div style={{ color: '#9E9EA3' }}><ArrowIcon /></div>
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* Modal galería */}
      {modal && (
        <div
          onClick={() => setModal(null)}
          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 9999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}
        >
          <div
            onClick={e => e.stopPropagation()}
            style={{ background: '#1D1D1F', borderRadius: 24, maxWidth: 900, width: '100%', maxHeight: '90vh', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}
          >
            {/* Modal header */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '20px 24px', borderBottom: '1px solid rgba(255,255,255,0.08)', flexShrink: 0 }}>
              <div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 17, color: '#F5F5F7' }}>{modal.title}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>{modal.loc}</div>
              </div>
              <button
                onClick={() => setModal(null)}
                style={{ background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: 100, width: 36, height: 36, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#F5F5F7', fontSize: 16, fontFamily: 'Inter, sans-serif' }}
              >✕</button>
            </div>

            {/* Imagen principal */}
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 64px', position: 'relative', minHeight: 0, overflow: 'hidden' }}>
              <button
                onClick={() => setModal(m => ({ ...m, idx: (m.idx - 1 + m.images.length) % m.images.length }))}
                style={{ position: 'absolute', left: 16, background: 'rgba(255,255,255,0.12)', border: 'none', borderRadius: 100, width: 44, height: 44, cursor: 'pointer', color: '#fff', fontSize: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1 }}
              >‹</button>
              <img
                src={modal.images[modal.idx].webp || modal.images[modal.idx]}
                alt={modal.title + ' ' + (modal.idx + 1)}
                onError={e => {
                  const fallback = modal.images[modal.idx].fallback;
                  if (fallback && e.currentTarget.src !== new URL(fallback, window.location.origin).href) {
                    e.currentTarget.src = fallback;
                  }
                }}
                style={{ maxHeight: '52vh', maxWidth: '100%', borderRadius: 16, objectFit: 'contain', display: 'block' }}
              />
              <button
                onClick={() => setModal(m => ({ ...m, idx: (m.idx + 1) % m.images.length }))}
                style={{ position: 'absolute', right: 16, background: 'rgba(255,255,255,0.12)', border: 'none', borderRadius: 100, width: 44, height: 44, cursor: 'pointer', color: '#fff', fontSize: 22, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1 }}
              >›</button>
            </div>

            {/* Contador */}
            <div style={{ textAlign: 'center', fontFamily: 'Inter, sans-serif', fontSize: 12, color: 'rgba(255,255,255,0.35)', marginBottom: 12 }}>
              {modal.idx + 1} / {modal.images.length}
            </div>

            {/* Miniaturas */}
            <div style={{ display: 'flex', gap: 8, padding: '0 24px 24px', overflowX: 'auto', justifyContent: 'center', flexShrink: 0 }}>
              {modal.images.map((img, i) => (
                <img
                  key={i}
                  src={img.webp || img}
                  alt={'Miniatura ' + (i + 1)}
                  onError={e => {
                    if (img.fallback && e.currentTarget.src !== new URL(img.fallback, window.location.origin).href) {
                      e.currentTarget.src = img.fallback;
                    }
                  }}
                  onClick={() => setModal(m => ({ ...m, idx: i }))}
                  style={{ width: 60, height: 60, objectFit: 'cover', borderRadius: 10, cursor: 'pointer', opacity: i === modal.idx ? 1 : 0.45, border: i === modal.idx ? '2px solid #fff' : '2px solid transparent', flexShrink: 0, transition: 'opacity 0.2s, border-color 0.2s' }}
                />
              ))}
            </div>
          </div>
        </div>
      )}
    </section>
  );
};

// ─── Sección de Reseñas con QR ────────────────────────────────────────────
const TLReviews = () => {
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); };

  // REEMPLAZAR: sustituir esta URL con el enlace real de tu perfil de Google Business
  // Formato: https://search.google.com/local/writereview?placeid=TU_PLACE_ID
  // O bien: el link de "Escríbenos una reseña" desde tu Google Business Profile
  const REVIEW_URL = 'https://g.page/r/CbaIt_5pvCzLEBM/review';

  return (
    <section style={{ background: '#1D1D1F', padding: '100px 40px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -100, left: -100, width: 400, height: 400, background: 'radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: -60, right: -60, width: 300, height: 300, background: 'radial-gradient(circle, rgba(255,255,255,0.02) 0%, transparent 70%)', borderRadius: '50%', pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', position: 'relative' }}>

        {/* Left: copy */}
        <div>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#9E9EA3', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 20 }}>Reseñas</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.5vw, 44px)', color: '#F5F5F7', letterSpacing: -1.5, margin: '0 0 20px', lineHeight: 1.1 }}>
            Tu opinión<br/>nos hace crecer.
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: 'rgba(255,255,255,0.5)', lineHeight: 1.75, margin: '0 0 36px', letterSpacing: -0.1 }}>
            Si hemos trabajado en tu privada o propiedad, nos ayuda mucho que compartas tu experiencia. Escanea el QR o haz clic en el botón — solo toma 2 minutos.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 36 }}>
            {[
              { icon: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z', text: 'Tu reseña ayuda a otros propietarios a confiar en nuestro trabajo.' },
              { icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z', text: 'Solo toma 2 minutos. Puedes hacerlo desde tu celular ahora mismo.' },
              { icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z', text: 'Cada reseña real fortalece nuestra reputación en Google Maps.' },
            ].map((item) => (
              <div key={item.text} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.6)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d={item.icon}/></svg>
                </div>
                <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'rgba(255,255,255,0.5)', lineHeight: 1.65, margin: 0 }}>{item.text}</p>
              </div>
            ))}
          </div>

          <a href={REVIEW_URL} target="_blank" rel="noopener noreferrer"
            style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: '#fff', color: '#1D1D1F', fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, padding: '16px 32px', borderRadius: 100, textDecoration: 'none', boxShadow: '0 8px 32px rgba(255,255,255,0.1)', transition: 'all 0.25s' }}
            onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 16px 48px rgba(255,255,255,0.15)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 8px 32px rgba(255,255,255,0.1)'; }}
          >
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
            Dejar reseña en Google
          </a>
        </div>

        {/* Right: QR card */}
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div style={{ background: '#fff', borderRadius: 28, padding: 40, textAlign: 'center', maxWidth: 320, width: '100%', boxShadow: '0 24px 80px rgba(0,0,0,0.3)' }}>
            <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13, color: '#1D1D1F', marginBottom: 6 }}>Torre Land S.A. de C.V.</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#9E9EA3', marginBottom: 24 }}>Escanea para dejar tu reseña</div>

            <div style={{ width: 200, height: 200, margin: '0 auto 24px', borderRadius: 16, overflow: 'hidden', border: '2px solid #E5E5EA' }}>
              <img
                src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https%3A%2F%2Fg.page%2Fr%2FCbaIt_5pvCzLEBM%2Freview&margin=12&color=1D1D1F&bgcolor=FFFFFF"
                alt="QR reseña Google — Torre Land"
                width="200" height="200"
                style={{ display: 'block', width: '100%', height: '100%' }}
              />
            </div>

            <div style={{ display: 'flex', gap: 4, justifyContent: 'center', marginBottom: 16 }}>
              {[...Array(5)].map((_, i) => (
                <svg key={i} width="18" height="18" viewBox="0 0 24 24" fill="#F59E0B">
                  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                </svg>
              ))}
            </div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#9E9EA3', lineHeight: 1.6 }}>
              ¿Trabajamos en tu privada?<br/>Cuéntanos cómo fue tu experiencia.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { TLClients, TLReviews });