// GSP marketing sections: Services, Credentials, Clients, WhyGsp, Testimonials.
function Reveal({ children, delay = 0, style = {} }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    const ob = new IntersectionObserver((es) => es.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); }), { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
    ob.observe(el);
    return () => ob.disconnect();
  }, []);
  return <div ref={ref} className="reveal" style={{ transitionDelay: delay + 's', ...style }}>{children}</div>;
}

function Services() {
  const items = [
    ['vigilancia', 'svc-vigilancia.webp', 'Guardia de seguridad de GSP junto a móvil patrullero en barrio privado', 'Vigilancia Privada', 'Guardias capacitados, custodias y control de accesos para empresas, barrios privados y eventos. Operamos con personal propio y supervisión en tiempo real.', [
      ['Empresas e Industrias', 'empresas-industrias.html'],
      ['Barrios Privados', 'barrios-privados.html'],
      ['Guardias en CABA', 'guardias-caba.html'],
      ['Guardias en GBA', 'guardias-gba.html'],
      ['Guardias en Costa Atlántica', 'guardias-costa-atlantica.html'],
      ['Guardias en La Plata', 'guardias-la-plata.html'],
    ]],
    ['alarmas', 'svc-alarmas.webp', 'Kit de alarma inalámbrico: panel, teclado, control remoto, sirena y sensores', 'Alarmas', 'Sistemas hogareños AX Home y profesionales AX Pro con monitoreo 24/7. Disponibles en comodato o venta con planes accesibles.', [
      ['Alarma Hogar — AX Home', 'alarmas-axhome.html'],
      ['Alarma Profesional — AX Pro', 'axpro.html'],
      ['Upgrade Smart (migración DSC)', 'upgrade-smart.html'],
    ]],
    ['camaras', 'svc-camaras.webp', 'Cámara de seguridad domo PTZ para videovigilancia en exterior', 'Cámaras de Seguridad', 'CCTV IP con inteligencia artificial, cámaras WiFi autónomas y sistemas analógicos. Visualización remota desde tu celular.', [
      ['Cámaras Wi-Fi', 'camaras-wifi.html'],
      ['IP Profesional (IA)', 'cctv-ip.html'],
      ['Analógico Residencial', 'cctv-analogico.html'],
    ]],
    ['accesos', 'svc-accesos.webp', 'Persona ingresando por molinete con control de acceso electrónico', 'Control de Accesos', 'Biometría, cerraduras smart y gestión de ingresos corporativo y residencial. Integración con cámaras y alarmas.', [
      ['Accesos — Empresas', 'accesos-empresas.html'],
      ['Accesos — Residencial', 'accesos-residencial.html'],
      ['Geolocalización de Flotas', 'geolocalizacion.html'],
    ]],
  ];
  return (
    <section className="section services" id="servicios">
      <div className="section-inner">
        <Reveal><SectionHeading overline="Soluciones" title="¿Qué solución necesitás?" description="Soluciones integrales de seguridad adaptadas a cada necesidad. Desde vigilancia humana hasta tecnología de última generación." /></Reveal>
        <div className="services-grid">
          {items.map((item, i) => (
            <Reveal key={item[3]} delay={0.1 * (i + 1)}>
              <ServiceCard item={item} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Services = Services;

function ServiceCard({ item }) {
  const Icon = window.Icon;
  const [cls, img, alt, title, desc, links] = item;
  const [open, setOpen] = React.useState(false);
  return (
    <Card hoverable className="service-card">
      <div className="service-img">
        <img className="service-img-photo" src={'' + img} alt={alt} width="1180" height="400" loading="lazy" decoding="async" />
        <div className="service-img-overlay" />
      </div>
      <div className="service-body">
        <h3>{title}</h3>
        <p>{desc}</p>
        {links ? (
          <div className={'svc-dropdown' + (open ? ' open' : '')}>
            <Button variant="primary" size="sm" style={{ alignSelf: 'flex-start' }}
                    aria-expanded={open} onClick={() => setOpen(o => !o)}>
              Conocer más <span className="svc-dropdown-caret"><Icon name="chevron" size={14} /></span>
            </Button>
            {open && (
              <div className="svc-dropdown-menu">
                {links.map(([label, href]) => (
                  <a key={href} className="svc-dropdown-item" href={href}>
                    <Icon name="arrow" size={14} /> {label}
                  </a>
                ))}
              </div>
            )}
          </div>
        ) : (
          <Button variant="primary" size="sm" style={{ alignSelf: 'flex-start' }}>Conocer más →</Button>
        )}
      </div>
    </Card>
  );
}
window.ServiceCard = ServiceCard;

function Credentials() {
  const Icon = window.Icon;
  const items = [
    ['award', 'RI 9000-10334/I', 'IRAM-ISO 9001:2015', 'cred-iram.png'],
    ['shield-check', 'ANMAC', 'Habilitación nacional', 'cred-anmac.png'],
    ['globe', 'ASIS International', 'Estándar global de seguridad', 'cred-asis.png'],
    ['bell', 'Prefectura Naval', 'Seguridad portuaria y fluvial', 'cred-prefectura.png'],
  ];
  return (
    <section className="section credentials">
      <div className="section-inner">
        <Reveal><SectionHeading onDark overline="Respaldo" title="Las credenciales que nos avalan" description="Certificaciones y habilitaciones que garantizan el más alto estándar de calidad y cumplimiento normativo." /></Reveal>
        <div className="cred-grid">
          {items.map(([icon, h, p, logo], i) => (
            <Reveal key={h} delay={0.1 * (i + 1)}>
              <div className="cred-item">
                <div className={'cred-icon' + (logo ? ' has-logo' : '')}>{logo ? <img src={'' + logo} alt={h} width="48" height="48" loading="lazy" decoding="async" /> : <Icon name={icon} size={26} />}</div>
                <h4>{h}</h4><p>{p}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Credentials = Credentials;

function Clients() {
  const names = ['Movistar', 'Banco Provincia', 'INCAA', 'IVECO', 'Quilmes', 'Mostaza', 'Los Grobo', 'Costa Esmeralda'];
  return (
    <section className="section clients" id="clientes">
      <div className="section-inner"><Reveal><SectionHeading overline="Portfolio" title="Confían en nosotros" /></Reveal></div>
      <div className="clients-track">
        {[...names, ...names].map((n, i) => <div className="client-logo" key={i}>{n}</div>)}
      </div>
    </section>
  );
}
window.Clients = Clients;

function WhyGsp() {
  const Icon = window.Icon;
  const blocks = [
    ['shield', '01', 'Seguridad basada en riesgos', 'Evaluamos amenazas reales para diseñar un plan a medida, no soluciones genéricas. Cada operación comienza con un análisis profesional de riesgos.', 'why-riesgo.webp', 'Analistas de GSP evaluando un mapa de riesgo de CABA y GBA en la central operativa'],
    ['monitor', '02', 'Tecnología + factor humano', 'Combinamos vigilancia capacitada con sistemas electrónicos de última generación. IA, videoverificación y monitoreo 24/7 integrados.', 'why-tecnologia.webp', 'Operador de seguridad GSP monitoreando cámaras en central operativa 24/7'],
    ['map-pin', '03', 'Cobertura con presencia real', 'Presentes en CABA, GBA, La Plata y Costa Atlántica con centrales operativas propias. No somos intermediarios: operamos directamente.', 'caba-detail.webp', 'Vigilador de GSP junto al móvil rojo identificado de la empresa en un predio de Buenos Aires', 'center var(--why-img-focus-3, 40%)'],
  ];
  return (
    <section className="section why-gsp" id="why">
      <div className="section-inner">
        <Reveal><SectionHeading overline="Diferencial" title="+20 años de experiencia nos respaldan" /></Reveal>
        <div style={{ marginTop: '3rem', display: 'flex', flexDirection: 'column', gap: 'var(--why-gap, 3rem)' }}>
          {blocks.map(([icon, num, h, p, image, imageAlt, objPos]) => (
            <Reveal key={num}>
              <div className="why-block">
                <div className="why-img">{image
                  ? <img className="why-img-photo" src={image} alt={imageAlt} loading="lazy" style={objPos ? { objectPosition: objPos } : undefined} />
                  : <Icon name={icon} size={48} sw={1} />}</div>
                <div className="why-text">
                  <div className="why-number">{num}</div>
                  <h3>{h}</h3><p>{p}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyGsp = WhyGsp;

function Testimonials() {
  const data = [
    ['GSP nos brindó una solución integral que transformó la seguridad de nuestro barrio. Profesionalismo, respuesta inmediata y un equipo que realmente entiende las necesidades del cliente.', 'Director de Seguridad', 'Costa Esmeralda'],
    ['Migramos toda la vigilancia de nuestras plantas a GSP. La supervisión en tiempo real y los reportes de rondas nos dieron una trazabilidad que no teníamos.', 'Gerente de Operaciones', 'Industria alimenticia'],
    ['El análisis de riesgos previo marcó la diferencia. No nos vendieron un servicio enlatado, diseñaron un esquema para nuestro caso.', 'Administración', 'Barrio privado, GBA'],
  ];
  const [i, setI] = React.useState(0);
  return (
    <section className="section testimonials">
      <div className="section-inner">
        <div className="testimonial-content">
          <div className="testimonial-quote-mark">&ldquo;</div>
          <p className="testimonial-text">{data[i][0]}</p>
          <p className="testimonial-author"><strong>{data[i][1]}</strong> — {data[i][2]}</p>
          <div className="testimonial-dots">
            {data.map((_, j) => <button key={j} className={'testimonial-dot' + (j === i ? ' active' : '')} onClick={() => setI(j)} aria-label={'Testimonio ' + (j + 1)} />)}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;
window.Reveal = Reveal;