const PRODUCTS = [
  { name: 'Tarjetero RFID Hotelero', cat: 'Acceso Inteligente', desc: 'Sistema de control de acceso para habitaciones hoteleras. Compatible con tarjetas Mifare, llave magnética y app.', badge: 'Popular', color: '#EDE9FE', textColor: '#7C3AED' },
  { name: 'Equipos para Alberca', cat: 'Albercas', desc: 'Bombas, filtros, dosificadores de cloro, calentadores y automatización para albercas residenciales y hoteleras.', badge: null, color: '#E0F9FF', textColor: '#0891B2' },
  { name: 'Kit Panel Solar Residencial', cat: 'Energía Solar', desc: 'Paneles fotovoltaicos de alta eficiencia, inversor, batería y sistema de monitoreo remoto. Instalación incluida.', badge: 'Nuevo', color: '#FEF9C3', textColor: '#A16207' },
  { name: 'Minisplit Inverter Premium', cat: 'Climatización', desc: 'Equipos de alta eficiencia energética con tecnología inverter, control WiFi y filtros de purificación de aire.', badge: null, color: '#F0FDF4', textColor: '#166534' },
  { name: 'Kit Mantenimiento Profesional', cat: 'Mantenimiento', desc: 'Insumos y materiales especializados para mantenimiento preventivo de condominios, privadas y hoteles.', badge: null, color: '#FFF7ED', textColor: '#C2410C' },
  { name: 'Sistema de Automatización', cat: 'Domótica', desc: 'Control inteligente de iluminación, acceso, climatización y seguridad integrados en una sola plataforma.', badge: 'Premium', color: '#F5F3FF', textColor: '#6D28D9' },
];

const TLProducts = () => {
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); };

  return (
    <section id="productos" style={{ background: '#F5F5F7', padding: '100px 40px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#1D1D1F', letterSpacing: 3, textTransform: 'uppercase', marginBottom: 16 }}>Catálogo</div>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 48px)', color: '#1D1D1F', letterSpacing: -1.5, margin: '0 0 20px', lineHeight: 1.1 }}>Productos y equipos</h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: '#9E9EA3', maxWidth: 500, margin: '0 auto', lineHeight: 1.7 }}>Suministramos, instalamos y garantizamos los equipos que utilizamos. Calidad en cada componente.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 20 }}>
          {PRODUCTS.map((p, i) => (
            <div key={p.name} style={{
              background: '#fff', borderRadius: 20,
              border: '1px solid #F3F4F6',
              overflow: 'hidden', transition: 'all 0.3s',
            }}
            onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 20px 60px rgba(0,0,0,0.08)'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
            onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}
            >
              {/* Product image placeholder */}
              <div style={{ height: 180, background: `linear-gradient(145deg, ${p.color}, #f8f9fb)`, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                <div style={{ textAlign: 'center' }}>
                  <div style={{ fontFamily: 'monospace', fontSize: 11, color: p.textColor, opacity: 0.5, letterSpacing: 1 }}>[ imagen del producto ]</div>
                  <div style={{ fontFamily: 'monospace', fontSize: 10, color: p.textColor, opacity: 0.35, marginTop: 4 }}>{p.cat}</div>
                </div>
                {p.badge && (
                  <div style={{
                    position: 'absolute', top: 14, right: 14,
                    background: p.textColor, color: '#fff',
                    borderRadius: 100, padding: '4px 12px',
                    fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 11,
                  }}>{p.badge}</div>
                )}
              </div>
              <div style={{ padding: 24 }}>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 11, color: p.textColor, fontWeight: 600, letterSpacing: 0.5, marginBottom: 8, textTransform: 'uppercase' }}>{p.cat}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 17, color: '#1D1D1F', marginBottom: 12, lineHeight: 1.3 }}>{p.name}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: '#9E9EA3', lineHeight: 1.65, marginBottom: 24 }}>{p.desc}</div>
                <div style={{ display: 'flex', gap: 10 }}>
                  <button onClick={() => scrollTo('contacto')} style={{
                    flex: 1, background: '#F5F5F7', border: '1px solid #E5E5EA', cursor: 'pointer',
                    fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, color: '#3D3D3F',
                    padding: '11px 0', borderRadius: 10, transition: 'all 0.2s',
                  }}
                  onMouseEnter={e => { e.target.style.background = '#F3F4F6'; }}
                  onMouseLeave={e => { e.target.style.background = '#F5F5F7'; }}
                  >Información</button>
                  <button onClick={() => scrollTo('cotizar')} style={{
                    flex: 1, background: '#1D1D1F', border: 'none', cursor: 'pointer',
                    fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13, color: '#fff',
                    padding: '11px 0', borderRadius: 10, transition: 'all 0.2s',
                  }}
                  onMouseEnter={e => { e.target.style.background = '#1D1D1F'; }}
                  onMouseLeave={e => { e.target.style.background = '#1D1D1F'; }}
                  >Cotizar</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// Visit CTA Banner
const TLVisitCTA = () => {
  const scrollTo = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); };
  return (
    <section style={{ background: 'linear-gradient(135deg, #1D1D1F 0%, #1D1D1F 100%)', padding: '80px 40px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
        <div style={{ position: 'absolute', top: -100, right: -100, width: 400, height: 400, background: 'radial-gradient(circle, rgba(96,165,250,0.12) 0%, transparent 70%)', borderRadius: '50%' }} />
      </div>
      <div style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 12, color: '#6E6E73', letterSpacing: 3, textTransform: 'uppercase', marginBottom: 20 }}>Diagnóstico sin costo</div>
        <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 4vw, 48px)', color: '#fff', letterSpacing: -1.5, margin: '0 0 20px', lineHeight: 1.1 }}>
          Agenda una visita técnica<br/>y recibe evaluación profesional
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: 'rgba(255,255,255,0.65)', margin: '0 0 40px', lineHeight: 1.7 }}>
          Nuestro equipo evalúa tu proyecto, instalación o mantenimiento sin costo. Te entregamos un diagnóstico profesional y una propuesta clara.
        </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,
            boxShadow: '0 8px 32px rgba(255,255,255,0.2)',
            transition: 'all 0.25s',
          }}
          onMouseEnter={e => { e.target.style.transform = 'translateY(-2px)'; e.target.style.boxShadow = '0 16px 48px rgba(255,255,255,0.3)'; }}
          onMouseLeave={e => { e.target.style.transform = 'none'; e.target.style.boxShadow = '0 8px 32px rgba(255,255,255,0.2)'; }}
          >
            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: '#fff',
            border: '1px solid rgba(255,255,255,0.3)',
            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.background = 'rgba(255,255,255,0.06)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.6)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.3)'; }}
          >
            <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, { TLProducts, TLVisitCTA });