/* global React, Eyebrow, Icon */
const { useState } = React;

const FAQS = [
  {
    q: '¿En cuánto tiempo se puede certificar ISO 27001 con Ariana?',
    a: 'En promedio entre 3 y 6 meses, dependiendo del tamaño y madurez de la empresa. Ariana automatiza la recolección de evidencia y el mapeo de controles, lo que reduce el ciclo a 6× respecto del enfoque manual. El plan exacto sale del diagnóstico inicial.',
  },
  {
    q: '¿Cuál es la diferencia entre ISO 27001 y SOC 2?',
    a: 'ISO 27001 es una certificación internacional centrada en el sistema de gestión de seguridad de la información (SGSI). SOC 2 es un reporte de auditoría norteamericano sobre cinco principios (security, availability, processing integrity, confidentiality, privacy). Empresas SaaS que venden a EE.UU. suelen necesitar SOC 2 Type II; las que escalan globalmente apuntan a ISO 27001. Implementamos ambas.',
  },
  {
    q: '¿Necesito SOC 2 Type I o Type II?',
    a: 'Type I evalúa el diseño de los controles en un punto en el tiempo. Type II evalúa la operación efectiva durante un período (típicamente 6 a 12 meses). La mayoría de los compradores enterprise exigen Type II. Brotek suele recomendar empezar por Type I en paralelo con la preparación para Type II.',
  },
  {
    q: '¿Qué incluye un Pentesting de Brotek?',
    a: 'Pruebas de penetración internas y externas, web application, mobile, infra cloud y revisión de código. Entregamos un reporte técnico detallado, plan de remediación priorizado y re-test sin costo adicional. Trabajamos como Red Team — pensamos como un atacante real.',
  },
  {
    q: '¿Pueden trabajar con stacks cloud (AWS, GCP, Azure)?',
    a: 'Sí. DevSecOps y revisión de infraestructura cloud son áreas core. Implementamos baselines CIS, IaC scanning (Checkov, tfsec), políticas de OPA y monitoreo continuo de configuraciones.',
  },
  {
    q: '¿Cómo es la modalidad comercial?',
    a: 'Tres planes — Entry (3 meses), Medium (6 meses) y High (12 meses) — o packs a medida. El diagnóstico inicial siempre es gratuito y sin compromiso. Sin retainer obligatorio.',
  },
];

const FAQItem = ({ q, a, open, onClick }) => (
  <div style={{
    borderBottom: '1px solid rgba(255,255,255,.08)',
  }}>
    <button onClick={onClick} style={{
      width:'100%', textAlign:'left', padding:'28px 0', cursor:'pointer',
      background:'transparent', border:0, color:'var(--fg)',
      display:'flex', justifyContent:'space-between', alignItems:'center', gap: 24,
      fontFamily:'var(--font-display)', fontWeight: 500, fontSize: 19,
      letterSpacing:'-0.015em', lineHeight: 1.35,
    }}>
      <span>{q}</span>
      <span style={{
        flexShrink:0, width: 36, height: 36, borderRadius: '50%',
        background: open ? 'var(--brotek-magenta)' : 'rgba(255,255,255,.06)',
        border: '1px solid rgba(255,255,255,.10)',
        display:'flex', alignItems:'center', justifyContent:'center',
        transition: 'all .24s cubic-bezier(.16,1,.3,1)',
        transform: open ? 'rotate(45deg)' : 'rotate(0)', color: '#fff',
      }}>
        <Icon name="plus" size={16}/>
      </span>
    </button>
    <div style={{
      maxHeight: open ? 240 : 0, overflow:'hidden',
      transition: 'max-height .35s cubic-bezier(.65,0,.35,1)',
    }}>
      <p style={{
        fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.65,
        color:'var(--fg-muted)', maxWidth: 720, paddingBottom: 28,
      }}>{a}</p>
    </div>
  </div>
);

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" data-screen-label="08 FAQ" style={{ padding: '120px 5vw', position:'relative' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', display:'grid', gridTemplateColumns:'1fr 1.4fr', gap: 64 }}>
        <div style={{ position:'sticky', top: 120, alignSelf: 'start' }}>
          <Eyebrow>Preguntas frecuentes</Eyebrow>
          <h2 style={{
            fontFamily:'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(30px, 3.6vw, 48px)', lineHeight: 1.05,
            letterSpacing:'-0.025em', color:'var(--fg)', margin:'18px 0 18px',
          }}>
            ISO 27001, SOC 2,<br/>Pentesting<span style={{color:'var(--brotek-magenta)'}}>.</span>
          </h2>
          <p style={{ fontSize: 15, color:'var(--fg-muted)', lineHeight: 1.6 }}>
            Las dudas que escuchamos en cada diagnóstico. Si no ves la tuya,
            agendá una llamada — la respondemos en 30 minutos.
          </p>
        </div>
        <div>
          {FAQS.map((f, i) => (
            <FAQItem key={i} {...f} open={open === i} onClick={() => setOpen(open === i ? -1 : i)}/>
          ))}
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;