/* 60-second operational diagnostic quiz */

const QUIZ = [
  {
    q: 'Número de empleados dedicados a operaciones',
    key: 'team',
    opts: [
      { label: '1 – 5', score: 1 },
      { label: '6 – 20', score: 3 },
      { label: '21 – 50', score: 5 },
      { label: '50+', score: 7 },
    ]
  },
  {
    q: 'Horas semanales por persona en tareas manuales repetitivas',
    key: 'hours',
    opts: [
      { label: 'Menos de 3h', score: 1 },
      { label: '3 – 8h', score: 3 },
      { label: '8 – 15h', score: 6 },
      { label: 'Más de 15h · crítico', score: 9 },
    ]
  },
  {
    q: 'Herramientas distintas que usa el equipo operativo',
    key: 'tools',
    opts: [
      { label: '1 – 3', score: 1 },
      { label: '4 – 7', score: 3 },
      { label: '8 – 15', score: 5 },
      { label: '15+ · islas de datos', score: 8 },
    ]
  },
  {
    q: '¿Qué porcentaje de decisiones se toman con datos en tiempo real?',
    key: 'data',
    opts: [
      { label: '< 20% · a ojo', score: 8 },
      { label: '20 – 50%', score: 5 },
      { label: '50 – 80%', score: 2 },
      { label: '> 80% · maduro', score: 0 },
    ]
  },
  {
    q: '¿Has desplegado agentes de IA en producción?',
    key: 'ai',
    opts: [
      { label: 'No, cero', score: 7 },
      { label: 'Experimentos · no producción', score: 4 },
      { label: 'Sí, 1–2 casos', score: 2 },
      { label: 'Sí, varios en producción', score: 0 },
    ]
  },
  {
    q: 'Facturación anual aproximada',
    key: 'rev',
    opts: [
      { label: '< 250K €', score: 1 },
      { label: '250K – 1M €', score: 3 },
      { label: '1 – 10M €', score: 5 },
      { label: '> 10M €', score: 7 },
    ]
  }
];

function verdict(total, max) {
  const pct = Math.round((total / max) * 100);
  if (pct < 30) return {
    level: 'MADURO',
    color: 'var(--success)',
    headline: 'Tu operación está madura — pero siempre hay un 20% oculto.',
    desc: 'Vas por delante del mercado. Los mayores retornos estarán en IA aplicada a decisiones (forecasting, pricing, risk scoring) y en reducir la carga de supervisión humana sobre los sistemas existentes.',
    recs: [
      'Auditoría focalizada en flujos críticos (2 semanas)',
      'Piloto de agentes de IA con alta especialización',
      'Programa de mejora continua trimestral'
    ]
  };
  if (pct < 55) return {
    level: 'OPORTUNIDAD ALTA',
    color: 'var(--accent)',
    headline: 'Estás en la zona de mayor retorno.',
    desc: 'Tus procesos funcionan pero tienen deuda operativa acumulada. Un sprint de ingeniería operativa bien dirigido puede liberar entre 300h y 800h al mes en 60 días.',
    recs: [
      'Auditoría completa (2 semanas)',
      '2–3 agentes IA en producción (4–8 semanas)',
      'Integración del stack operativo (3–6 semanas)',
      'ROI esperado: 2.5–4.5× en 12 meses'
    ]
  };
  return {
    level: 'FUGA CRÍTICA',
    color: 'var(--signal)',
    headline: 'Estás financiando a tu competencia con horas de tu equipo.',
    desc: 'Detectamos fricción operativa severa. Cada mes que pasa, el coste de oportunidad crece. La buena noticia: el potencial de transformación es enorme y rápido.',
    recs: [
      'Diagnóstico urgente (1 semana)',
      'Plan de choque: 3 flujos críticos en 30 días',
      'Arquitectura de datos unificada (prioridad 1)',
      'Agentes IA en funciones de alto volumen',
      'ROI esperado: 4–7× en 12 meses'
    ]
  };
}

function Diagnostic({ onCTA }) {
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [done, setDone] = React.useState(false);

  const current = QUIZ[step];
  const totalScore = Object.values(answers).reduce((a, b) => a + b, 0);
  const maxScore = QUIZ.reduce((a, q) => a + Math.max(...q.opts.map(o => o.score)), 0);
  const pct = done ? Math.round((totalScore / maxScore) * 100) : Math.round((step / QUIZ.length) * 100);
  const v = done ? verdict(totalScore, maxScore) : null;

  const answer = (opt) => {
    const next = { ...answers, [current.key]: opt.score };
    setAnswers(next);
    setTimeout(() => {
      if (step < QUIZ.length - 1) setStep(step + 1);
      else setDone(true);
    }, 280);
  };

  const reset = () => { setStep(0); setAnswers({}); setDone(false); };

  return (
    <section className="section" id="diagnostico">
      <div className="section-inner">
        <span className="section-label reveal"><span className="num">§ 04</span>DIAGNÓSTICO</span>
        <div className="section-head">
          <h2 className="section-title reveal reveal-delay-1">
            60 segundos.<br/>
            Un diagnóstico <span className="gold">sin humo.</span>
          </h2>
          <p className="section-lede reveal reveal-delay-2">
            Seis preguntas. Un <i>score</i> calibrado con 32 empresas transformadas en España. Al final, un plan de actuación concreto y <b>cero formularios de captura</b>.
          </p>
        </div>

        <div className="diag-panel reveal">
          <aside className="diag-aside">
            <span className="kicker kicker--gold">Diagnóstico operativo</span>
            <h3>El mismo instrumento que usamos <em>internamente</em> en cada primera sesión.</h3>
            <p>Calibrado con datos reales. Mide fricción, madurez y oportunidad de ROI en tres ejes.</p>
            <div className="diag-steps">
              {QUIZ.map((q, i) => (
                <div key={i} className={'diag-step-dot ' + (done || i < step ? 'done' : i === step ? 'active' : '')}>
                  <span className="n">{String(i + 1).padStart(2, '0')}</span>
                  <span>{q.q.slice(0, 22)}{q.q.length > 22 ? '…' : ''}</span>
                </div>
              ))}
              <div className={'diag-step-dot ' + (done ? 'active' : '')}>
                <span className="n">→</span>
                <span>Resultado</span>
              </div>
            </div>
          </aside>

          {!done ? (
            <div className="diag-stage">
              <div className="diag-progress"><div className="bar" style={{ width: pct + '%' }}></div></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>
                <span>Pregunta {String(step + 1).padStart(2, '0')} / {String(QUIZ.length).padStart(2, '0')}</span>
                <span>{pct}% completado</span>
              </div>
              <h3 className="diag-q">{current.q.includes('%') ? <>{current.q}</> : <>{current.q.split(' ').slice(0,-2).join(' ')} <em>{current.q.split(' ').slice(-2).join(' ')}</em></>}</h3>
              <div className="diag-options">
                {current.opts.map((o, i) => (
                  <button key={i} className="diag-opt" onClick={() => answer(o)}>
                    <span>{o.label}</span>
                    <span className="key">{String.fromCharCode(65 + i)}</span>
                  </button>
                ))}
              </div>
              <div className="diag-footer">
                <span>↑↓ navegar · A/B/C/D responder</span>
                <button onClick={() => step > 0 && setStep(step - 1)} style={{ opacity: step > 0 ? 1 : 0.3, color: 'var(--ink-2)', fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase' }}>← Anterior</button>
              </div>
            </div>
          ) : (
            <div className="diag-result">
              <div className="score-row">
                <div>
                  <div className="score-big">{pct}<span>/100</span></div>
                  <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.18em', marginTop: 8, textTransform: 'uppercase' }}>
                    Índice de fricción operativa
                  </div>
                </div>
                <div className="verdict">
                  <h4 style={{ color: v.color }}>▪ {v.level}</h4>
                  <p style={{ fontSize: 17, color: 'var(--ink)', marginBottom: 8, lineHeight: 1.4 }}>{v.headline}</p>
                  <p>{v.desc}</p>
                </div>
              </div>

              <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 14 }}>
                Plan recomendado
              </div>
              <div className="recommendations">
                {v.recs.map((r, i) => (
                  <div key={i} className="rec">
                    <span className="chk">[ {String(i+1).padStart(2,'0')} ]</span>
                    <span>{r}</span>
                  </div>
                ))}
              </div>

              <div className="cta-row">
                <a
                  className="btn btn--primary btn--corners"
                  href="https://calendly.com/alfdonver02/sesion-de-diagnostico-operativo-stratium"
                  target="_blank"
                  rel="noreferrer"
                >
                  Reservar sesión estratégica
                  <svg viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.5"/></svg>
                </a>
                <button className="btn btn--ghost" onClick={reset}>Rehacer diagnóstico</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Diagnostic });