/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* seguridad.jsx — landing "Empresa" para /seguridad (redesign 2026-09).
   Textos definitivos del handoff (compliance-sensitive: no reescribir,
   no resumir — fuente de verdad: docs.teramot.com/compliance/about).
   Español únicamente, mismo criterio que el resto de las páginas nuevas.
   Reusa product.css/hero-nav.css para todo lo compartido (nav, botones,
   FAQ, tipografía/color/animación de la home); los patrones propios de
   esta página (posture cards, grid numerado, stat tiles, flow de
   incident response) van inline, como ya se hizo con los mockups de
   cierre-mensual/rentabilidad. */

const COMPLIANCE_POSTURE = [
  { meta: 'Certificado · Dic 2025', metaColor: '#253DE5', title: 'SOC 2 Type I', body: 'Reporte completo del criterio de Seguridad, auditado por firma de auditoría US. Disponible bajo NDA a security@teramot.com.', highlighted: true },
  { meta: 'Observation period en curso', metaColor: '#9CA3AF', title: 'SOC 2 Type II', body: 'Período de observación en curso con la misma firma auditora. Reporte esperado al cierre del período.' },
  { meta: 'En preparación · Target 2026', metaColor: '#9CA3AF', title: 'ISO 27001', body: 'Documentación y evidencia en curso (sync con Vanta). Certificación proyectada para 2026.' },
  { meta: 'Cumplimiento vigente', metaColor: '#9CA3AF', title: 'Ley 25.326 · Argentina', body: 'Protección de datos personales bajo marco argentino. Revisión anual (próxima Q1 2026).' },
];

const TECH_CONTROLS = [
  { n: '01', title: 'Cifrado', body: 'AES-256 en reposo. TLS 1.3 en tránsito. Sin excepciones.' },
  { n: '02', title: 'Identity & Access', body: 'MFA obligatorio en AWS, GitHub y Vanta. IAM con least-privilege. Bitwarden con políticas org-scoped.' },
  { n: '03', title: 'Cloud security', body: 'AWS GuardDuty, CloudTrail, WAF y CloudWatch para detección y alertas continuas.' },
  { n: '04', title: 'Endpoint protection', body: 'Bitdefender GravityZone sobre todos los dispositivos del equipo.' },
  { n: '05', title: 'Compliance monitoring', body: 'Vanta corre 24/7 sobre la superficie de ataque, con remediación validada por pentesting.' },
  { n: '06', title: 'Aislamiento y hosting', body: 'AWS us-east-1. 100% cloud, sin on-premises. Tenant único por cliente.' },
];

const SSDLC_CARDS = [
  { title: 'Pull Requests con revisión', body: 'Feature branches + peer review obligatorio antes del merge.' },
  { title: 'CI/CD automatizado', body: 'GitHub Actions con tests automatizados en cada cambio.' },
  { title: 'Deploys progresivos', body: 'dev → stg → prd sobre AWS ECS. Rollback automático ante fallas.' },
  { title: 'Infraestructura como código', body: 'Terraform validado. Cambios de infra revisables y auditables.' },
  { title: 'Gestión de dependencias', body: 'Dependabot para actualizaciones de seguridad automáticas.' },
  { title: 'Acceso con MFA + IAM', body: 'Least-privilege en todos los ambientes. Sin credenciales compartidas.' },
];

const IR_STEPS = [
  { title: 'Detección', body: 'AWS GuardDuty, CloudWatch Alarms, Bitdefender y AWS WAF corriendo en continuo.' },
  { title: 'Respuesta', body: 'Equipo interno de Cybersecurity y DevOps con playbooks documentados.' },
  { title: 'Notificación', body: 'Clientes informados apenas se valida un evento de seguridad.' },
  { title: 'RCA', body: 'Root Cause Analysis documentado internamente, disponible bajo NDA.' },
];

const FAQ_ITEMS = [
  { q: '¿Puedo acceder al reporte SOC 2 Type I?', a: 'Sí, bajo NDA. Escribí a <b>security@teramot.com</b> y coordinamos el envío del reporte completo del criterio de Seguridad, auditado por una firma de auditoría de Estados Unidos.' },
  { q: '¿Cuándo va a estar el SOC 2 Type II?', a: 'El período de observación está en curso con la misma firma auditora. El reporte se emite al cierre del período. Hasta entonces el framing correcto es <b>Type I certificado, Type II en curso</b>.' },
  { q: '¿Dónde se alojan mis datos?', a: 'En AWS, región <b>us-east-1</b>. La infraestructura es 100% cloud, sin componentes on-premises, y cada cliente corre en un tenant único.' },
  { q: '¿Cómo funciona el monitoreo continuo con Vanta?', a: 'Vanta corre 24/7 sobre la superficie de ataque y verifica los controles de forma automática. Los hallazgos se remedian y la remediación se valida con el pentesting anual.' },
  { q: '¿Cuál es la política de retención y offboarding?', a: 'Los accesos se gestionan con IAM y least-privilege, y se revocan en el offboarding. Los plazos de retención se acuerdan por contrato; el detalle está disponible bajo NDA.' },
  { q: '¿Los empleados de Teramot pueden ver mi data?', a: 'El acceso es least-privilege y requiere MFA. Nadie accede a datos de cliente sin una necesidad operativa registrada, y los accesos quedan auditados en CloudTrail.' },
  { q: '¿Están cubiertos por Ley 25.326 de Argentina?', a: 'Sí. Operamos bajo el marco argentino de protección de datos personales, con revisión anual. La próxima revisión es Q1 2026.' },
  { q: '¿Cómo se maneja un evento de seguridad?', a: 'Detección continua con GuardDuty, CloudWatch, Bitdefender y WAF; respuesta del equipo interno de Cybersecurity y DevOps con playbooks documentados; notificación a los clientes apenas el evento se valida; y un Root Cause Analysis documentado, disponible bajo NDA.' },
];

const { useEffect: useEffectSec, useRef: useRefSec } = React;

/* Scroll reveal — mismo hook que cierre-mensual.jsx/rentabilidad.jsx. */
const useScrollReveal = (rootRef) => {
  useEffectSec(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const root = rootRef.current;
    if (!root) return;
    const groups = [];
    root.querySelectorAll('section, footer').forEach((sec) => {
      const wrap = sec.firstElementChild && sec.children.length === 1 ? sec.firstElementChild : sec;
      const kids = Array.from(wrap.children).filter((el) => (
        el.nodeType === 1 && !el.classList.contains('tm-drawer') && !el.classList.contains('tm-drawer-overlay')
      ));
      if (kids.length) groups.push(kids);
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {
          en.target.classList.add('rv-in');
          io.unobserve(en.target);
        }
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
    groups.forEach((kids) => kids.forEach((el, i) => {
      el.classList.add('rv');
      el.style.transitionDelay = Math.min(i, 4) * 70 + 'ms';
      io.observe(el);
    }));
    return () => io.disconnect();
  }, []);
};

const SeguridadHero = () => (
  <section className="tm-hero-gradient">
    <HeroNav current="seguridad" />
    <div style={{ position: 'relative', zIndex: 2, maxWidth: 1320, margin: '0 auto', padding: '54px 40px 96px', display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 56, alignItems: 'center' }}>
      <div style={{ maxWidth: 680 }}>
        <p className="tm-prod-hero-eyebrow" style={{ textTransform: 'uppercase', letterSpacing: '.14em', color: 'rgba(255,255,255,.62)' }}>Trust center · SOC 2 Type I certificado · Type II en curso · ISO 27001 en preparación</p>
        <h1 style={{ animation: 'tmHomeHeroRise .7s cubic-bezier(0.2,0,0,1) both', marginTop: 20, fontSize: 'clamp(32px,3.3vw,44px)', lineHeight: 1.12, fontWeight: 600, letterSpacing: '-.035em', color: '#fff', textWrap: 'balance' }}>SOC 2 y controles de seguridad para datos financieros.</h1>
        <p className="tm-prod-hero-sub" style={{ maxWidth: 600 }}>Certificación SOC 2 Type I obtenida en diciembre 2025, período de observación Type II en curso, e ISO 27001 en preparación. Monitoreo continuo con Vanta, cifrado AES-256 en reposo y TLS 1.3 en tránsito, pentesting anual por Faraday Sec.</p>
        <div className="tm-prod-hero-actions">
          <a href="mailto:security@teramot.com" className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-white">Solicitar reporte SOC 2 <i className="ph ph-arrow-right" /></a>
          <a href="mailto:security@teramot.com" className="tm-hero-btn tm-hero-btn-lg tm-hero-btn-ghost-light">Contactar a seguridad</a>
        </div>
      </div>
      <div className="tm-prod-hero-mockup" style={{ justifySelf: 'center' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: 228, height: 228, borderRadius: 9999, border: '1px solid rgba(255,255,255,.34)', background: 'rgba(255,255,255,.05)' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: 186, height: 186, borderRadius: 9999, border: '1px solid rgba(255,255,255,.18)' }}>
            <p style={{ fontSize: 9.5, fontWeight: 600, letterSpacing: '.2em', textTransform: 'uppercase', color: 'rgba(255,255,255,.6)' }}>Certificado</p>
            <p style={{ marginTop: 12, fontSize: 34, fontWeight: 600, letterSpacing: '-.03em', color: '#fff', lineHeight: 1 }}>SOC 2</p>
            <p style={{ marginTop: 8, padding: '4px 12px', borderRadius: 9999, background: '#91DFC8', fontSize: 10.5, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#12352A' }}>Type I</p>
            <p style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid rgba(255,255,255,.16)', fontSize: 10, fontWeight: 600, letterSpacing: '.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,.66)' }}>Dic 2025</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const CompliancePostureSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div style={{ maxWidth: 820 }}>
        <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: '#253DE5' }}>Compliance posture</p>
        <h2 style={{ marginTop: 16, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Certificaciones vigentes y en curso</h2>
        <p style={{ marginTop: 16, maxWidth: 660, fontSize: 16, lineHeight: 1.6, color: '#4B5563' }}>Transparencia total sobre en qué punto estamos. Cada estado se puede verificar bajo NDA.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px,1fr))', gap: 16, marginTop: 38 }}>
        {COMPLIANCE_POSTURE.map((card) => (
          <div
            key={card.title}
            className={card.highlighted ? '' : 'tm-prod-card'}
            style={card.highlighted
              ? { background: '#fff', border: '2px solid #253DE5', borderRadius: 16, padding: '23px 21px' }
              : { padding: '24px 22px' }}
          >
            <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: card.metaColor }}>{card.meta}</p>
            <h3 style={{ marginTop: 14, fontSize: 19, fontWeight: 700, letterSpacing: '-.02em', color: '#1C2536' }}>{card.title}</h3>
            <p style={{ marginTop: 12, fontSize: 14, lineHeight: 1.62, color: '#4b5563' }}>{card.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const TechControlsSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <h2 style={{ maxWidth: 760, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Cómo protegemos tu data</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px,1fr))', gap: '36px 40px', marginTop: 44 }}>
        {TECH_CONTROLS.map((item) => (
          <div key={item.n} style={{ paddingTop: 22, borderTop: '1px solid #E5E7EB' }}>
            <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: '#253DE5' }}>{item.n}</p>
            <h3 style={{ marginTop: 14, fontSize: 17.5, fontWeight: 700, letterSpacing: '-.02em', color: '#1C2536' }}>{item.title}</h3>
            <p style={{ marginTop: 10, fontSize: 14.5, lineHeight: 1.62, color: '#4b5563' }}>{item.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const SsdlcSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div style={{ maxWidth: 820 }}>
        <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: '#253DE5' }}>Secure Software Development Lifecycle</p>
        <h2 style={{ marginTop: 16, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Cómo escribimos y desplegamos código</h2>
      </div>
      <div className="tm-prod-cards" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(230px,1fr))', marginTop: 38 }}>
        {SSDLC_CARDS.map((card) => (
          <div className="tm-prod-card" key={card.title} style={{ padding: 22, borderRadius: 10 }}>
            <h3 style={{ fontSize: 16 }}>{card.title}</h3>
            <p>{card.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PentestSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 56, alignItems: 'center' }}>
        <div style={{ maxWidth: 620 }}>
          <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: '#253DE5' }}>Pentest anual · Faraday Sec (Argentina)</p>
          <h2 style={{ marginTop: 16, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Validación de seguridad por terceros</h2>
          <p style={{ marginTop: 20, fontSize: 16.5, lineHeight: 1.66, color: '#4B5563' }}>Pentest anual ejecutado por Faraday Sec (Argentina). En el último pentest se identificaron 15 vulnerabilidades — todas remediadas y validadas con follow-up continuo. Reportes disponibles bajo NDA.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: 18 }}>
          <div style={{ padding: '34px 26px', background: '#FAFAF7', border: '1px solid #E5E7EB', borderRadius: 14 }}>
            <p style={{ fontSize: 'clamp(44px,4.6vw,62px)', lineHeight: 1, fontWeight: 700, letterSpacing: '-.045em', color: '#253DE5' }}>15</p>
            <p style={{ marginTop: 16, fontSize: 10, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF', lineHeight: 1.5 }}>Vulnerabilidades identificadas</p>
          </div>
          <div style={{ padding: '34px 26px', background: '#FAFAF7', border: '1px solid #E5E7EB', borderRadius: 14 }}>
            <p style={{ fontSize: 'clamp(44px,4.6vw,62px)', lineHeight: 1, fontWeight: 700, letterSpacing: '-.045em', color: '#253DE5' }}>100%</p>
            <p style={{ marginTop: 16, fontSize: 10, fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: '#9CA3AF', lineHeight: 1.5 }}>Remediadas y validadas</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const IncidentResponseSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <h2 style={{ maxWidth: 760, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Incident response</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px,1fr))', gap: 24, marginTop: 38 }}>
        {IR_STEPS.map((step, i) => (
          <div className="tm-prod-card" key={step.title} style={{ padding: 20, borderRadius: 10, position: 'relative' }}>
            <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: '#253DE5' }}>{step.title}</p>
            <p style={{ marginTop: 12, fontSize: 13.5, lineHeight: 1.6, color: '#4b5563' }}>{step.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const GobernanzaSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <h2 style={{ maxWidth: 760, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Gobernanza y transparencia</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px,1fr))', gap: 20, marginTop: 38 }}>
        <div style={{ background: '#FAFAF7', border: '1px solid #E5E7EB', borderRadius: 12, padding: '32px 30px' }}>
          <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: '#253DE5' }}>Entidad legal</p>
          <h3 style={{ marginTop: 14, fontSize: 21, fontWeight: 700, letterSpacing: '-.025em', color: '#1C2536' }}>Halley LLC</h3>
          <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.65, color: '#4B5563' }}>Registrada en Delaware, Estados Unidos. HQ en Rosario, Argentina. Sirve clientes en Argentina y Estados Unidos.</p>
        </div>
        <div style={{ background: '#FAFAF7', border: '1px solid #E5E7EB', borderRadius: 12, padding: '32px 30px' }}>
          <p style={{ fontSize: 10, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: '#253DE5' }}>Comité de seguridad de la información</p>
          <h3 style={{ marginTop: 14, fontSize: 21, fontWeight: 700, letterSpacing: '-.025em', color: '#1C2536' }}>Los 5 responsables</h3>
          <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.65, color: '#4B5563' }}>Bruno Ruyu · Lucas Uzal · Leandro Ruspini · Ezequiel Alejandro Mora · Valentín Torassa Colombero (Cybersecurity Analyst).</p>
        </div>
      </div>
    </div>
  </section>
);

const FaqSection = () => {
  useJsonLd({
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: FAQ_ITEMS.map((item) => ({
      '@type': 'Question',
      name: item.q,
      acceptedAnswer: { '@type': 'Answer', text: item.a.replace(/<\/?b>/g, '') },
    })),
  });
  return (
    <section className="tm-prod-section tm-prod-section-paper">
      <div className="tm-container">
        <div className="tm-prod-faq-grid">
          <aside className="tm-prod-faq-aside">
            <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Preguntas frecuentes</span>
            <h2>FAQ de <span>compliance</span></h2>
          </aside>
          <div className="tm-prod-faq-list">
            {FAQ_ITEMS.map((item, i) => (
              <details className="tm-prod-faq-item" key={item.q} open={i === 0 ? true : undefined}>
                <summary>
                  <span className="tm-prod-faq-q">{item.q}</span>
                  <span className="tm-prod-faq-icon"><i className="ph-bold ph-plus" /></span>
                </summary>
                <p className="tm-prod-faq-a" dangerouslySetInnerHTML={{ __html: item.a }} />
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const CtaSeguridadSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div style={{ maxWidth: 720 }}>
        <h2 style={{ fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>¿Tu equipo de compliance necesita más detalle?</h2>
        <p style={{ marginTop: 18, fontSize: 16.5, lineHeight: 1.62, color: '#4B5563' }}>Escribinos a security@teramot.com. Reporte SOC 2 Type I disponible bajo NDA, y coordinamos una sesión con el equipo si querés profundizar.</p>
        <div style={{ display: 'flex', gap: 16, marginTop: 32, flexWrap: 'wrap' }}>
          <a href="mailto:security@teramot.com" className="tm-btn tm-btn-lg" style={{ background: '#253DE5', color: '#fff', borderColor: 'transparent', borderRadius: 9999, fontWeight: 600 }}>Solicitar reporte SOC 2 <i className="ph ph-arrow-right" /></a>
          <a href="mailto:security@teramot.com" className="tm-btn tm-btn-lg" style={{ background: 'transparent', color: '#253DE5', border: '1px solid rgba(37,61,229,.28)', borderRadius: 9999, fontWeight: 600 }}>Contactar a security@teramot.com</a>
        </div>
      </div>
    </div>
  </section>
);

const SeguridadApp = () => {
  const rootRef = useRefSec(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <SeguridadHero />
      <CompliancePostureSection />
      <TechControlsSection />
      <SsdlcSection />
      <PentestSection />
      <IncidentResponseSection />
      <GobernanzaSection />
      <FaqSection />
      <CtaSeguridadSection />
      <Footer />
    </main>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LangProvider defaultLang="es">
    <SeguridadApp />
  </LangProvider>
);