/* global React */
const { useState: useStateGap, useEffect: useEffectGap, useRef: useRefGap } = React;

const QUESTIONS = [
  {
    id: 'continuidad',
    category: 'Continuidad Operativa',
    icon: 'shield',
    color: '#FB881D',
    question: '¿Cuánto tiempo puede operar su empresa si sus servidores principales se caen hoy?',
    options: [
      { label: 'Más de 24 horas con plan probado (BCP/DRP activo)', score: 0 },
      { label: 'Entre 4 y 24 horas, tenemos backups pero sin pruebas recientes', score: 1 },
      { label: 'Menos de 4 horas, dependemos de TI para improvisar', score: 2 },
      { label: 'No lo sabemos / nunca lo medimos', score: 3 },
    ],
  },
  {
    id: 'darkweb',
    category: 'Exposición Externa',
    icon: 'eye',
    color: '#EC008C',
    question: '¿Tienen visibilidad de si sus credenciales corporativas están filtradas en la Dark Web?',
    options: [
      { label: 'Sí, monitoreo continuo con alertas automatizadas', score: 0 },
      { label: 'Hicimos un análisis puntual hace más de 6 meses', score: 1 },
      { label: 'No, pero confiamos en la seguridad de nuestros proveedores', score: 2 },
      { label: 'No tenemos forma de saberlo', score: 3 },
    ],
  },
  {
    id: 'segmentacion',
    category: 'Arquitectura',
    icon: 'cpu',
    color: '#3551E7',
    question: '¿Su red está segmentada o un atacante podría moverse lateralmente?',
    options: [
      { label: 'Segmentación zero-trust con microsegmentación validada', score: 0 },
      { label: 'VLANs y firewalls perimetrales, sin auditoría reciente', score: 1 },
      { label: 'Red plana o segmentación parcial heredada', score: 2 },
      { label: 'No sé cómo está la arquitectura', score: 3 },
    ],
  },
  {
    id: 'phishing',
    category: 'Factor Humano',
    icon: 'users',
    color: '#A335E7',
    question: '¿Realizan simulacros de phishing y capacitación en seguridad para empleados?',
    options: [
      { label: 'Simulacros mensuales con métricas y entrenamiento dirigido', score: 0 },
      { label: 'Entre 1 y 2 veces al año, sin seguimiento sistemático', score: 1 },
      { label: 'Solo onboarding inicial cuando alguien ingresa', score: 2 },
      { label: 'Nunca lo hicimos', score: 3 },
    ],
  },
  {
    id: 'cumplimiento',
    category: 'Cumplimiento Regional',
    icon: 'globe',
    color: '#35E7C7',
    question: '¿Cumplen con la Ley 25.326 de Protección de Datos Personales (Argentina) y normativas regionales?',
    options: [
      { label: 'Sí, certificados ISO 27001 y registro AAIP vigente', score: 0 },
      { label: 'Cumplimiento parcial documentado, sin certificación', score: 1 },
      { label: 'Sabemos que aplica pero no formalizamos los controles', score: 2 },
      { label: 'No conocemos los requisitos legales aplicables', score: 3 },
    ],
  },
  {
    id: 'incidentes',
    category: 'Detección y Respuesta',
    icon: 'alert',
    color: '#EC4D2A',
    question: '¿Cuánto tardan en detectar y contener un incidente de seguridad?',
    options: [
      { label: 'SOC 24x7 con MTTD < 15 min y runbooks probados', score: 0 },
      { label: 'Tenemos SIEM pero la respuesta es manual y horaria', score: 1 },
      { label: 'Solo nos enteramos cuando algo deja de funcionar', score: 2 },
      { label: 'Nunca tuvimos un incidente / no sabríamos detectarlo', score: 3 },
    ],
  },
  {
    id: 'pentest',
    category: 'Validación Ofensiva',
    icon: 'zap',
    color: '#35E747',
    question: '¿Cuándo fue su último Ethical Hacking o test de penetración?',
    options: [
      { label: 'Hace menos de 6 meses, con re-test de remediaciones', score: 0 },
      { label: 'Entre 6 y 18 meses atrás', score: 1 },
      { label: 'Hace más de 2 años o solo escaneos automáticos', score: 2 },
      { label: 'Nunca contratamos un pentest profesional', score: 3 },
    ],
  },
];

const GapAnalysis = () => {
  const { Eyebrow, Btn, Icon, GlassCard, Light } = window;
  const [stage, setStage] = useStateGap('intro'); // intro | quiz | gate | result
  const [step, setStep] = useStateGap(0);
  const [answers, setAnswers] = useStateGap({});
  const [form, setForm] = useStateGap({ nombre: '', empresa: '', email: '' });
  const [submitting, setSubmitting] = useStateGap(false);
  const [errorMsg, setErrorMsg] = useStateGap('');

  const total = QUESTIONS.length;
  const progress = stage === 'intro' ? 0 : stage === 'result' || stage === 'gate' ? 100 : Math.round((step / total) * 100);

  const select = (qId, score) => {
    const next = { ...answers, [qId]: score };
    setAnswers(next);
    setTimeout(() => {
      if (step + 1 < total) setStep(step + 1);
      else setStage('gate');
    }, 220);
  };

  const scores = Object.values(answers);
  const totalScore = scores.reduce((a, b) => a + b, 0);
  const maxScore = total * 3;
  const exposurePct = Math.round((totalScore / maxScore) * 100);
  const criticalPoints = scores.filter(s => s >= 2).length;

  const submit = async (e) => {
    e.preventDefault();
    if (!form.nombre || !form.empresa || !form.email) return;
    setSubmitting(true);
    setErrorMsg('');
    try {
      const { ok, data } = await window.brotekFetch('/api/procesar_envio.php', {
        body: {
          ...form,
          answers,
          exposurePct,
          criticalPoints,
          totalQuestions: total,
          submittedAt: new Date().toISOString(),
          source: 'gap-analysis-home',
          website: '',
        },
      });
      if (!ok) {
        const msg = (data && data.message) ? data.message : 'No pudimos enviar el informe. Intentá nuevamente en unos minutos.';
        setErrorMsg(msg);
        setSubmitting(false);
        return;
      }
      setSubmitting(false);
      setStage('result');
    } catch (err) {
      setErrorMsg('Error de red. Verificá tu conexión e intentá de nuevo.');
      setSubmitting(false);
    }
  };

  const current = QUESTIONS[step];

  return (
    <section id="gap-analysis" style={{ position:'relative', padding:'120px 5vw', overflow:'hidden' }}>
      <Light color="#EC008C" size={900} top="-200px" right="-100px" opacity={.25} blur={100}/>
      <Light color="#A335E7" size={700} bottom="-150px" left="-100px" opacity={.20} blur={100}/>

      <div style={{ maxWidth:1100, margin:'0 auto', position:'relative', zIndex:1 }}>
        {/* Header */}
        <div style={{ textAlign:'center', marginBottom:48 }}>
          <Eyebrow color="#EC008C">Diagnóstico interactivo · 5 minutos</Eyebrow>
          <h2 style={{ marginTop:18, marginBottom:18, fontFamily:'var(--font-display)', fontWeight:600,
            fontSize:'clamp(32px, 4.4vw, 56px)', lineHeight:1.06, letterSpacing:'-0.025em', color:'var(--fg)' }}>
            Diagnóstico de Brechas y <span style={{color:'var(--brotek-magenta)'}}>Continuidad Operativa</span>
          </h2>
          <p style={{ fontSize:18, lineHeight:1.55, color:'var(--fg-muted)', maxWidth:680, margin:'0 auto' }}>
            Identifique en 5 minutos los puntos ciegos de su arquitectura que están poniendo en riesgo su operación en Argentina y la región.
          </p>
        </div>

        {/* Wizard card */}
        <GlassCard radius={28} hover={false} style={{ padding:0, overflow:'hidden' }}>
          {/* Progress bar */}
          <div style={{ position:'relative', height:4, background:'rgba(255,255,255,.06)' }}>
            <div style={{ height:'100%', width:`${progress}%`,
              background:'linear-gradient(90deg, #EC008C, #A335E7)',
              transition:'width .4s cubic-bezier(.16,1,.3,1)', boxShadow:'0 0 12px rgba(236,0,140,.6)' }}/>
          </div>

          <div style={{ padding:'48px 48px 56px', minHeight:480 }}>
            {/* INTRO */}
            {stage === 'intro' && (
              <div style={{ textAlign:'center', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', minHeight:380 }}>
                <div style={{
                  width:88, height:88, borderRadius:24, marginBottom:28,
                  background:'linear-gradient(135deg, #EC008C, #A335E7)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  boxShadow:'0 20px 60px rgba(236,0,140,.4)',
                }}>
                  <Icon name="shield" size={40} color="#fff"/>
                </div>
                <h3 style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:28, color:'var(--fg)', marginBottom:14 }}>
                  7 preguntas. Resultado inmediato.
                </h3>
                <p style={{ color:'var(--fg-muted)', fontSize:16, maxWidth:520, marginBottom:32, lineHeight:1.6 }}>
                  Evaluación basada en NIST CSF 2.0 y la Comunicación A 7724 del BCRA. Sus respuestas son confidenciales.
                </p>
                <Btn variant="primary" size="lg" icon="arrow-right" onClick={() => setStage('quiz')}>
                  Iniciar Evaluación Gratuita
                </Btn>
                <div style={{ display:'flex', gap:32, marginTop:36, flexWrap:'wrap', justifyContent:'center',
                  fontFamily:'var(--font-mono)', fontSize:11, color:'var(--fg-subtle)', letterSpacing:'.08em', textTransform:'uppercase' }}>
                  <span>· 5 min</span>
                  <span>· Sin tarjeta de crédito</span>
                  <span>· Datos cifrados</span>
                </div>
              </div>
            )}

            {/* QUIZ */}
            {stage === 'quiz' && current && (
              <div>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:32 }}>
                  <div style={{ display:'flex', alignItems:'center', gap:14 }}>
                    <div style={{
                      width:44, height:44, borderRadius:12,
                      background:`linear-gradient(135deg, ${current.color}, ${current.color}77)`,
                      display:'flex', alignItems:'center', justifyContent:'center',
                    }}>
                      <Icon name={current.icon} size={20} color="#fff"/>
                    </div>
                    <div>
                      <div style={{ fontFamily:'var(--font-mono)', fontSize:11, color:current.color, letterSpacing:'.14em', textTransform:'uppercase' }}>
                        {current.category}
                      </div>
                      <div style={{ fontFamily:'var(--font-mono)', fontSize:12, color:'var(--fg-subtle)', letterSpacing:'.1em' }}>
                        Pregunta {step + 1} de {total}
                      </div>
                    </div>
                  </div>
                  {step > 0 && (
                    <button onClick={() => setStep(step - 1)} style={{
                      background:'transparent', border:'1px solid rgba(255,255,255,.14)', color:'var(--fg-muted)',
                      borderRadius:999, padding:'8px 16px', cursor:'pointer', fontSize:13,
                    }}>← Anterior</button>
                  )}
                </div>

                <h3 style={{ fontFamily:'var(--font-display)', fontWeight:500, fontSize:'clamp(20px, 2.4vw, 28px)',
                  lineHeight:1.25, color:'var(--fg)', marginBottom:28, letterSpacing:'-0.015em' }}>
                  {current.question}
                </h3>

                <div style={{ display:'grid', gap:12 }}>
                  {current.options.map((opt, i) => {
                    const selected = answers[current.id] === opt.score;
                    return (
                      <button key={i} onClick={() => select(current.id, opt.score)}
                        style={{
                          textAlign:'left', cursor:'pointer',
                          background: selected ? `linear-gradient(160deg, ${current.color}22, ${current.color}08)` : 'rgba(255,255,255,.03)',
                          border: `1px solid ${selected ? current.color : 'rgba(255,255,255,.08)'}`,
                          borderRadius:14, padding:'18px 22px', color:'var(--fg)',
                          display:'flex', alignItems:'center', gap:16,
                          transition:'all .18s cubic-bezier(.16,1,.3,1)',
                          fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.45,
                        }}
                        onMouseEnter={e => { if (!selected) e.currentTarget.style.background='rgba(255,255,255,.06)'; }}
                        onMouseLeave={e => { if (!selected) e.currentTarget.style.background='rgba(255,255,255,.03)'; }}>
                        <span style={{
                          width:22, height:22, borderRadius:'50%', flexShrink:0,
                          border:`2px solid ${selected ? current.color : 'rgba(255,255,255,.20)'}`,
                          background: selected ? current.color : 'transparent',
                          display:'flex', alignItems:'center', justifyContent:'center',
                        }}>
                          {selected && <Icon name="check" size={12} color="#fff" strokeWidth={3}/>}
                        </span>
                        <span>{opt.label}</span>
                      </button>
                    );
                  })}
                </div>
              </div>
            )}

            {/* GATE — preview + lead form */}
            {stage === 'gate' && (
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center' }}>
                <div>
                  <Eyebrow color="#EC4D2A">Adelanto del informe</Eyebrow>
                  <h3 style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:30,
                    color:'var(--fg)', margin:'14px 0 18px', lineHeight:1.15, letterSpacing:'-0.02em' }}>
                    Hemos detectado <span style={{color:'#EC4D2A'}}>{criticalPoints} {criticalPoints === 1 ? 'punto crítico' : 'puntos críticos'}</span> que comprometen su continuidad operativa en este momento.
                  </h3>
                  <p style={{ color:'var(--fg-muted)', fontSize:15, lineHeight:1.6, marginBottom:24 }}>
                    Su exposición global es del <strong style={{color:'var(--fg)'}}>{exposurePct}%</strong> según el modelo NIST CSF 2.0 + BCRA A 7724. Para acceder al informe detallado con plan de remediación priorizado, necesitamos sus datos:
                  </p>
                  <form onSubmit={submit} style={{ display:'grid', gap:12 }}>
                    <input required placeholder="Nombre completo" value={form.nombre}
                      onChange={e => setForm({ ...form, nombre: e.target.value })}
                      style={inputStyle}/>
                    <input required placeholder="Empresa" value={form.empresa}
                      onChange={e => setForm({ ...form, empresa: e.target.value })}
                      style={inputStyle}/>
                    <input required type="email" placeholder="Email corporativo" value={form.email}
                      onChange={e => setForm({ ...form, email: e.target.value })}
                      style={inputStyle}/>
                    <button type="submit" disabled={submitting} style={{
                      marginTop:8, padding:'15px 28px', borderRadius:999, border:0, cursor:'pointer',
                      background:'var(--brotek-magenta)', color:'#fff',
                      fontFamily:'var(--font-body)', fontWeight:500, fontSize:16,
                      display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
                      opacity: submitting ? .6 : 1,
                    }}>
                      {submitting ? 'Enviando…' : 'Ver informe detallado'} <Icon name="arrow-right" size={14}/>
                    </button>
                    {errorMsg && (
                      <p role="alert" style={{ fontSize:13, color:'#FF6B6B', fontFamily:'var(--font-body)', marginTop:6, lineHeight:1.5 }}>
                        {errorMsg}
                      </p>
                    )}
                    <p style={{ fontSize:11, color:'var(--fg-subtle)', fontFamily:'var(--font-mono)', letterSpacing:'.04em', marginTop:4 }}>
                      Sus datos están protegidos según Ley 25.326. No spam.
                    </p>
                  </form>
                </div>
                <RiskRadar answers={answers} questions={QUESTIONS} exposurePct={exposurePct}/>
              </div>
            )}

            {/* RESULT */}
            {stage === 'result' && (
              <div style={{ textAlign:'center' }}>
                <div style={{
                  width:72, height:72, borderRadius:'50%', margin:'0 auto 20px',
                  background:'linear-gradient(135deg, #35E747, #35E74766)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  boxShadow:'0 0 40px rgba(53,231,71,.4)',
                }}>
                  <Icon name="check" size={32} color="#fff" strokeWidth={3}/>
                </div>
                <h3 style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:28, color:'var(--fg)', marginBottom:14 }}>
                  Informe enviado a {form.email}
                </h3>
                <p style={{ color:'var(--fg-muted)', fontSize:16, maxWidth:520, margin:'0 auto 28px', lineHeight:1.6 }}>
                  Un consultor senior de Brotek revisará su diagnóstico y se contactará en menos de 24hs hábiles para coordinar la sesión de presentación.
                </p>
                <div style={{ display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap' }}>
                  <Btn variant="primary" icon="arrow-up-right" href="https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ03LzoOyBnS6ZQylmBi2miXKi2eqVs6DxXcx48byUlVPWTC4Cw9BxRHRHjYOO5s2vPvppukA3C-" target="_blank">Agendar reunión ahora</Btn>
                  <Btn variant="ghost" icon="arrow-right" href="#solucion">Ver servicios</Btn>
                </div>
              </div>
            )}
          </div>
        </GlassCard>
      </div>
    </section>
  );
};

const inputStyle = {
  width:'100%', boxSizing:'border-box',
  background:'rgba(255,255,255,.04)', border:'1px solid rgba(255,255,255,.12)',
  borderRadius:12, padding:'14px 16px', color:'var(--fg)',
  fontFamily:'var(--font-body)', fontSize:15, outline:'none',
};

// Risk radar — 7-axis SVG plot of the user's exposure
const RiskRadar = ({ answers, questions, exposurePct }) => {
  const size = 320;
  const cx = size / 2, cy = size / 2;
  const radius = 120;
  const n = questions.length;

  const points = questions.map((q, i) => {
    const score = answers[q.id] ?? 0;
    const r = (score / 3) * radius;
    const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
    return { x: cx + r * Math.cos(angle), y: cy + r * Math.sin(angle), color: q.color };
  });
  const polygon = points.map(p => `${p.x},${p.y}`).join(' ');

  const axes = questions.map((q, i) => {
    const angle = (Math.PI * 2 * i) / n - Math.PI / 2;
    return { x2: cx + radius * Math.cos(angle), y2: cy + radius * Math.sin(angle), label: q.category };
  });

  return (
    <div style={{ position:'relative', display:'flex', alignItems:'center', justifyContent:'center' }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow:'visible' }}>
        {/* Concentric rings */}
        {[0.33, 0.66, 1].map((f, i) => (
          <circle key={i} cx={cx} cy={cy} r={radius * f}
            fill="none" stroke="rgba(255,255,255,.06)" strokeWidth="1"/>
        ))}
        {/* Axes */}
        {axes.map((a, i) => (
          <line key={i} x1={cx} y1={cy} x2={a.x2} y2={a.y2}
            stroke="rgba(255,255,255,.06)" strokeWidth="1"/>
        ))}
        {/* Risk polygon */}
        <polygon points={polygon}
          fill="rgba(236,0,140,.18)" stroke="#EC008C" strokeWidth="2"/>
        {/* Vertices */}
        {points.map((p, i) => (
          <circle key={i} cx={p.x} cy={p.y} r="4" fill={p.color}/>
        ))}
        {/* Center exposure pct */}
        <text x={cx} y={cy - 4} textAnchor="middle"
          style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:32, fill:'var(--fg)' }}>
          {exposurePct}%
        </text>
        <text x={cx} y={cy + 16} textAnchor="middle"
          style={{ fontFamily:'var(--font-mono)', fontSize:10, fill:'var(--fg-subtle)', letterSpacing:'.12em' }}>
          EXPOSICIÓN
        </text>
      </svg>
    </div>
  );
};

window.GapAnalysis = GapAnalysis;