// GSP — Certificaciones y Habilitaciones. Hero "vitrina de galardones" + detalle.
function CertHero() {
  const Icon = window.Icon;
  const creds = [
    ['ISO 9001:2015', 'Gestión de calidad'],
    ['ANMaC', 'Habilitación nacional'],
    ['Prefectura Naval', 'Registro vigente'],
    ['ASIS International', 'Estándar global'],
    ['Pcia. Buenos Aires', 'Habilitación provincial'],
    ['Buenos Aires Ciudad', 'Habilitación CABA'],
  ];
  return (
    <section className="cert-hero">
      <div className="cert-hero-glow" />
      <div className="cert-hero-inner">
        <div className="hero-eyebrow">Respaldo</div>
        <h1 className="cert-hero-title">Las credenciales<br />que nos <span className="hero-accent">avalan</span></h1>
        <p className="cert-hero-sub">En seguridad, la confianza no se declara: se certifica. Operamos bajo los estándares y habilitaciones que exige el rubro.</p>
        <div className="cert-medallions">
          {creds.map(([name, tag]) => (
            <div className="cert-medallion" key={name}>
              <div className="cert-medal-ring"><Icon name="award" size={32} /></div>
              <div className="cert-medal-name">{name}</div>
              <div className="cert-medal-tag">{tag}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="hero-diagonal">
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0 80L1440 0V80H0Z" fill="#fff" /></svg>
      </div>
    </section>
  );
}

function CertBody() {
  const Icon = window.Icon;
  const items = [
    ['ISO 9001:2015', 'Gestión de calidad auditada: procesos documentados, mejora continua y trazabilidad en cada servicio que prestamos.'],
    ['ANMaC', 'Agencia Nacional de Materiales Controlados: habilitación nacional para la gestión de los recursos que requiere la vigilancia privada.'],
    ['Prefectura Naval Argentina', 'Registro y habilitación operativa vigente ante la autoridad, con personal capacitado y reglamentado.'],
    ['ASIS International', 'Miembros de la asociación global de profesionales de la seguridad: estándares, buenas prácticas y formación de nivel internacional.'],
    ['Gobierno de la Pcia. de Buenos Aires', 'Habilitación provincial para prestar servicios de seguridad privada en todo el territorio bonaerense.'],
    ['Buenos Aires Ciudad', 'Habilitación para operar servicios de seguridad en la Ciudad Autónoma de Buenos Aires.'],
  ];
  return (
    <section className="section cert-body">
      <div className="section-inner">
        <window.Reveal><SectionHeading overline="Habilitaciones" title="Qué respalda cada credencial" /></window.Reveal>
        <div className="cert-grid">
          {items.map(([h, p], i) => (
            <window.Reveal key={h} delay={0.07 * (i + 1)}>
              <Card hoverable style={{ height: '100%' }}>
                <div className="cert-card-ic"><Icon name="award" size={24} /></div>
                <h3 className="cert-card-h">{h}</h3>
                <p className="cert-card-p">{p}</p>
              </Card>
            </window.Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function CertClose() {
  return (
    <section className="section prod-cta">
      <div className="prod-cta-inner">
        <window.Reveal>
          <h2>Las certificaciones son el piso, no el techo</h2>
          <p>+20 años protegiendo empresas, barrios e industrias. La confianza se construye con trayectoria y se respalda con estándares.</p>
          <Button as="a" href="#contacto" variant="primary" size="lg">Solicitar cotización</Button>
        </window.Reveal>
      </div>
    </section>
  );
}

function Certificaciones() {
  return (
    <React.Fragment>
      <CertHero />
      <CertBody />
      <CertClose />
    </React.Fragment>
  );
}
window.Certificaciones = Certificaciones;