const SERVICES = [
  { icon: 'M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z M9 22V12h6v10', label: 'Construcción y Remodelación', desc: 'Proyectos residenciales, comerciales y de condominio con acabados de alta calidad y supervisión profesional.' },
  { icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z', label: 'Mantenimiento Integral', desc: 'Programas de mantenimiento preventivo y correctivo para condominios, privadas y desarrollos residenciales.' },
  { icon: 'M12 22s-8-6-8-12a8 8 0 0116 0c0 6-8 12-8 12z M12 10a2 2 0 100 4 2 2 0 000-4z', label: 'Albercas', desc: 'Construcción, remodelación y mantenimiento especializado de albercas residenciales y hoteleras.' },
  { icon: 'M12 22V12m0 0C12 7 17 5 17 5M12 12C12 7 7 5 7 5M5 20s2-3 7-3 7 3 7 3', label: 'Jardinería', desc: 'Diseño, instalación y mantenimiento de áreas verdes, jardines y exteriores para proyectos de cualquier escala.' },
  { icon: 'M13 10V3L4 14h7v7l9-11h-7z', label: 'Electricidad', desc: 'Instalaciones eléctricas, mantenimiento preventivo, tableros, plantas de emergencia y regularización.' },
  { icon: '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 110-5 2.5 2.5 0 010 5z', label: 'Plomería', desc: 'Instalación y reparación de redes hidráulicas, sanitarias, cisterna y sistemas de bombeo profesional.' },
  { icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6', label: 'Limpieza Profesional', desc: 'Servicios de limpieza profunda, áreas comunes, fachadas, cisternas y mantenimiento de inmuebles.' },
  { icon: 'M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', label: 'Aires Acondicionados', desc: 'Instalación, mantenimiento y reparación de equipos split, minisplit y sistemas centralizados.' },
  { icon: 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z', label: 'Paneles Solares', desc: 'Diseño e instalación de sistemas fotovoltaicos residenciales y comerciales. Reduce hasta 90% tu factura eléctrica.' },
  { icon: 'M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z', label: 'Tarjeteros RFID Hoteleros', desc: 'Suministro e instalación de sistemas de acceso inteligente RFID para hoteles, suites y desarrollos.' },
  { icon: 'M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18', label: 'Automatización', desc: 'Domótica, control de acceso, cámaras y sistemas inteligentes integrados bajo una sola plataforma.' },
  { icon: 'M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7 M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z', label: 'Pintura', desc: 'Pintura aérea en edificios, fachadas exteriores, interiores residenciales, oficinas y áreas comunes. Acabados de alta calidad.' },
  { icon: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z', label: 'Impermeabilizado', desc: 'Impermeabilización de azoteas, terrazas, muros y superficies expuestas. Protección duradera contra humedad y filtraciones.' },
];

const ServiceCard = ({ service, idx }) => {
  const [hover, setHover] = React.useState(false);
  const [visible, setVisible] = React.useState(false);
  const ref = React.useRef();

  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVisible(true); }, { threshold: 0.08 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

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

  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      background: hover ? '#fff' : '#FAFAFA',
      border: `1px solid ${hover ? '#D1D1D6' : '#E5E5EA'}`,
      borderRadius: 20, padding: 28, cursor: 'pointer',
      boxShadow: hover ? '0 12px 40px rgba(0,0,0,0.07)' : 'none',
      transform: visible ? (hover ? 'translateY(-3px)' : 'none') : 'translateY(20px)',
      transition: `opacity 0.5s cubic-bezier(0.16,1,0.3,1) ${idx * 0.04}s, transform 0.3s ease, box-shadow 0.3s ease, background 0.2s ease, border-color 0.2s ease`,
      display: 'flex', flexDirection: 'column', gap: 14,
    }}
    onMouseEnter={() => setHover(true)}
    onMouseLeave={() => setHover(false)}
    >
      <div style={{
        width: 44, height: 44, borderRadius: 12,
        background: hover ? '#1D1D1F' : '#F5F5F7',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transition: 'all 0.25s', flexShrink: 0,
      }}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
          stroke={hover ? '#fff' : '#1D1D1F'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d={service.icon}/>
        </svg>
      </div>
      <div>
        <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 15, color: '#1D1D1F', marginBottom: 7, lineHeight: 1.3 }}>
          {service.label}
        </div>
        <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 400, fontSize: 13.5, color: '#9E9EA3', lineHeight: 1.65 }}>
          {service.desc}
        </div>
      </div>
      <button onClick={(e) => { e.stopPropagation(); scrollTo('cotizar'); }} style={{
        marginTop: 'auto', background: 'none', border: 'none', cursor: 'pointer',
        fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13,
        color: hover ? '#1D1D1F' : '#9E9EA3',
        padding: 0, display: 'flex', alignItems: 'center', gap: 5, transition: 'color 0.25s',
      }}>
        Solicitar cotización
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </button>
    </div>
  );
};

const TLServices = () => (
  <section id="servicios" style={{ background: '#FBFBFD', 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: '#6E6E73', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 16 }}>Nuestras Especialidades</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 }}>
          Soluciones integrales<br/>para tu proyecto.
        </h2>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: '#6E6E73', maxWidth: 520, margin: '0 auto', lineHeight: 1.7, letterSpacing: -0.1 }}>
          Trece especialidades bajo un solo proveedor de confianza. Eficiencia, coordinación y calidad garantizada en cada intervención.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(270px, 1fr))', gap: 14 }}>
        {SERVICES.map((s, i) => <ServiceCard key={s.label} service={s} idx={i} />)}
      </div>
    </div>
  </section>
);

Object.assign(window, { TLServices });