// GSP — Nosotros (Historia, Misión y Valores) page sections. Canonical design system.

function NosReveal({ 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.12, 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 NosImg({ icon = 'shield', label, className = '', src, alt }) {
  const Icon = window.Icon;
  if (src) {
    return (
      <div className={'img-ph ' + className} style={{ overflow: 'hidden' }}>
        <img src={src} alt={alt || label} loading="lazy" decoding="async" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
    );
  }
  return (
    <div className={'img-ph ' + className}>
      <div className="img-ph-icon"><Icon name={icon} size={32} /></div>
      <span className="img-ph-label">{label}</span>
    </div>
  );
}

// ── HERO ──
function NosHero() {
  return (
    <section className="hero hero--editorial">
      <video className="hero-video" muted playsInline preload="metadata">
        <source src="hero-baja-res3.mp4#t=0.1" type="video/mp4" />
      </video>
      <div className="hero-overlay" />
      <div className="hero-editorial-inner">
        <div className="hero-editorial-col">
          <div className="hero-eyebrow">Nosotros · Desde 2003</div>
          <h1 className="hero-title">Historia, Misión<br />y <span className="hero-accent">Valores</span></h1>
          <p className="hero-subtitle hero-subtitle--left">Más de 20 años protegiendo personas, instalaciones y activos críticos en Buenos Aires, bajo el modelo de seguridad basada en riesgos.</p>
          <div className="hero-stats">
            <div className="hero-stat"><div className="hero-stat-num"><span className="hl">+20</span></div><div className="hero-stat-label">Años</div></div>
            <div className="hero-stat"><div className="hero-stat-num">4</div><div className="hero-stat-label">Centrales</div></div>
            <div className="hero-stat"><div className="hero-stat-num">ISO 9001</div><div className="hero-stat-label">Certificación</div></div>
            <div className="hero-stat"><div className="hero-stat-num">ASIS</div><div className="hero-stat-label">Estándar int'l</div></div>
          </div>
          <div className="hero-cta-group">
            <Button as="a" href="#contacto" variant="primary" size="lg">Contactanos</Button>
            <Button as="a" href="index.html" variant="outline" size="lg">Ir a la home</Button>
          </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>
  );
}
window.NosHero = NosHero;

// ── INTRO (Nosotros) ──
function NosIntro() {
  return (
    <section className="section nos-intro">
      <div className="section-inner">
        <div className="nos-intro-grid">
          <NosReveal>
            <div className="nos-intro-text">
              <span className="nos-pill">Nosotros</span>
              <p>Somos una empresa argentina de seguridad privada, vigilancia física y monitoreo de alarmas con más de 20 años de trayectoria protegiendo personas, instalaciones y activos críticos en la provincia de Buenos Aires y la Ciudad Autónoma de Buenos Aires.</p>
              <p>Brindamos a nuestros clientes un respaldo operativo, financiero y administrativo sólido, clave para la continuidad y confiabilidad de un servicio de seguridad profesional.</p>
              <p>Creemos que la seguridad no es solo presencia, sino gestión, planificación y respuesta efectiva. Por eso trabajamos bajo los principios de la seguridad basada en riesgos, alineados con estándares internacionales, integrando personas, tecnología y procedimientos en un mismo sistema de protección.</p>
            </div>
          </NosReveal>
          <NosReveal delay={0.1}>
            <div className="nos-intro-img"><NosImg icon="navigation" label="Operación en ruta — flota GSP" src="nos-flota.webp" alt="Flota de móviles identificados de GSP Seguridad estacionados en un predio: dos pickups y un utilitario" /></div>
          </NosReveal>
        </div>
      </div>
    </section>
  );
}
window.NosIntro = NosIntro;

// ── Semicircular risk-management diagram ──
function RiskDiagram() {
  const cx = 300, cy = 300, Ro = 210, Ri = 140, gap = 3;
  const polar = (r, t) => [cx + r * Math.cos(t * Math.PI / 180), cy - r * Math.sin(t * Math.PI / 180)];
  const seg = (t0, t1) => {
    const [aox, aoy] = polar(Ro, t0), [box, boy] = polar(Ro, t1), [cix, ciy] = polar(Ri, t1), [dix, diy] = polar(Ri, t0);
    return `M${aox} ${aoy} A${Ro} ${Ro} 0 0 0 ${box} ${boy} L${cix} ${ciy} A${Ri} ${Ri} 0 0 1 ${dix} ${diy} Z`;
  };
  const labels = [
    'Monitoreo y mejora continua',
    'Comunicación y colaboración continua',
    'Desarrollo de estrategias de mitigación',
    'Identificación y evaluación de riesgos',
    'Identificación de activos críticos',
  ];
  const segs = [0, 1, 2, 3, 4].map(i => seg(i * 36 + gap / 2, (i + 1) * 36 - gap / 2));
  const Rl = 235;
  return (
    <div className="nos-diagram">
      <svg className="ring" viewBox="0 0 600 330" xmlns="http://www.w3.org/2000/svg">
        <path d={`M${cx - (Ro + 14)} ${cy} A${Ro + 14} ${Ro + 14} 0 0 1 ${cx + (Ro + 14)} ${cy}`} fill="none" stroke="rgba(255,255,255,.25)" strokeWidth="2" />
        {segs.map((d, i) => <path key={i} d={d} fill="#2e3a53" stroke="#E71A21" strokeWidth="1.5" />)}
      </svg>
      {labels.map((l, i) => {
        const tm = i * 36 + 18;
        const [x, y] = polar(Rl, tm);
        return <div key={l} className="ndg-label" style={{ left: (x / 600 * 100) + '%', top: (y / 330 * 100) + '%' }}>{l}</div>;
      })}
      <img className="ndg-shield" src="gsp-logo.svg" alt="GSP" />
    </div>
  );
}

// ── GESTIÓN DE RIESGOS (red section) ──
function NosGestion() {
  return (
    <section className="section nos-gestion">
      <div className="section-inner">
        <div className="nos-gestion-grid">
          <NosReveal>
            <div>
              <h2>Gestión de riesgos de seguridad</h2>
              <p>En GSP Seguridad trabajamos bajo el modelo de gestión de riesgos, un enfoque moderno que integra la seguridad al negocio y a los objetivos estratégicos de cada organización. Este modelo nos permite entender la seguridad no como un servicio aislado, sino como una función clave para la continuidad operativa, la protección de activos y la toma de decisiones.</p>
              <p>Aplicar este modelo nos permite diseñar soluciones de seguridad a medida, combinando vigilancia física, tecnología, procedimientos y gestión, siempre en función del nivel de riesgo real de cada cliente. De esta manera, logramos sistemas de protección eficientes, escalables y alineados con estándares internacionales, enfocando los recursos donde realmente generan valor y reducen la exposición al riesgo.</p>
            </div>
          </NosReveal>
          <NosReveal delay={0.1}><RiskDiagram /></NosReveal>
        </div>
        <NosReveal>
          <div className="nos-compromiso">
            <p>Nuestro compromiso es ofrecer soluciones a medida, adaptadas a la realidad y necesidades de cada cliente, con foco en la prevención y la mejora continua.</p>
          </div>
        </NosReveal>
      </div>
    </section>
  );
}
window.NosGestion = NosGestion;

// ── CALIDAD CERTIFICADA ──
function NosCalidad() {
  return (
    <section className="section nos-calidad">
      <div className="section-inner">
        <div className="nos-calidad-grid">
          <NosReveal>
            <div>
              <span className="nos-pill">Calidad certificada</span>
              <h3>Certificación ISO 9001:2015</h3>
              <div className="nos-iso-badges">
                <div className="nos-iso-cert"><img src="cert-iram-iqnet.png" alt="Certificación IRAM-IQNet ISO 9001:2015 · Gestión de la calidad · RI 9000-10334/I" width="851" height="315" loading="lazy" decoding="async" /></div>
              </div>
              <p>En GSP Seguridad contamos con certificación ISO 9001:2015, que respalda nuestro Sistema de Gestión de la Calidad.</p>
              <p>Esta certificación avala que nuestros procesos están orientados a:</p>
              <ul>
                <li>La satisfacción del cliente</li>
                <li>La mejora continua</li>
                <li>La gestión eficiente y controlada de cada servicio</li>
                <li>El cumplimiento de estándares internacionales de calidad</li>
              </ul>
              <p>Para nuestros clientes, esto se traduce en mayor previsibilidad, transparencia y confianza, desde la planificación del servicio hasta su ejecución diaria.</p>
            </div>
          </NosReveal>
          <NosReveal delay={0.1}>
            <div className="nos-calidad-img"><NosImg icon="shield-check" label="Personal y flota certificados" src="costa-intro.webp" alt="Vigilador de GSP junto al móvil rojo identificado de la empresa, personal y flota certificados" /></div>
          </NosReveal>
        </div>
      </div>
    </section>
  );
}
window.NosCalidad = NosCalidad;

// ── CREDENCIALES (organismos) ──
function NosCredenciales() {
  const creds = ['Gobierno de la Pcia. de Buenos Aires', 'Buenos Aires Ciudad', 'ANMaC', 'Prefectura Naval Argentina', 'ASIS International'];
  return (
    <section className="section nos-creds" style={{ paddingTop: 'var(--space-12)', paddingBottom: 'var(--space-12)' }}>
      <div className="section-inner">
        <NosReveal>
          <div className="nos-creds-row">
            {creds.map(c => <div className="nos-cred" key={c}>{c}</div>)}
          </div>
        </NosReveal>
      </div>
    </section>
  );
}
window.NosCredenciales = NosCredenciales;