/* Method — 4 fases track con rail sticky y auto-avance */

const METHOD_STEPS = [
  {
    n: '01', title: 'Diagnóstico',
    duration: '2 semanas',
    kicker: 'FASE 01 · DISCOVERY',
    h: 'Radiografía completa · sin filtros.',
    desc: 'Entrevistamos a cada rol operativo. Instrumentamos las herramientas. Construimos el mapa real de flujos con tiempos, cuellos y puntos de fuga. Salimos con un backlog priorizado por impacto/coste.',
    deliverables: [
      'Mapa de procesos instrumentado',
      'Backlog priorizado (impacto × coste)',
      'Stack audit + matriz de integraciones',
      'Business case con ROI proyectado',
    ],
    meta: [
      { k: 'Entregable', v: 'Informe técnico + plan' },
      { k: 'Esfuerzo cliente', v: '4h/semana' },
      { k: 'Fee', v: '2.5 — 4.5K €' },
    ]
  },
  {
    n: '02', title: 'Diseño',
    duration: '2 – 3 semanas',
    kicker: 'FASE 02 · ARCHITECTURE',
    h: 'Arquitectura técnica lista para producción.',
    desc: 'Diseñamos la solución: selección de modelos, stack de orquestación, integraciones, guardrails, plan de observabilidad y KPIs. Revisada con tu IT y tu seguridad antes de escribir una línea de código.',
    deliverables: [
      'Arquitectura técnica detallada',
      'Especificación de agentes y prompts',
      'Plan de integración y rollout',
      'SLA y KPIs de éxito firmados',
    ],
    meta: [
      { k: 'Entregable', v: 'Tech spec + runbook' },
      { k: 'Validación', v: 'IT + Seguridad + Ops' },
      { k: 'Fee', v: '3 — 6K €' },
    ]
  },
  {
    n: '03', title: 'Despliegue',
    duration: '4 – 10 semanas',
    kicker: 'FASE 03 · IMPLEMENTATION',
    h: 'Sprints cerrados. Entregas cada dos semanas.',
    desc: 'Implementación incremental con demos quincenales. Cada sprint deja algo funcionando en producción: un agente, una integración, un dashboard. Zero big-bang. Handoff con tu equipo desde el día uno.',
    deliverables: [
      'Agentes IA desplegados en tu cloud',
      'Integraciones end-to-end en producción',
      'Observabilidad + alertas + runbooks',
      'Training y documentación técnica',
    ],
    meta: [
      { k: 'Sprints', v: '2 semanas cada uno' },
      { k: 'Equipo', v: '1 staff + 1 senior' },
      { k: 'Fee', v: '8 — 22K €' },
    ]
  },
  {
    n: '04', title: 'Optimización',
    duration: 'Continua',
    kicker: 'FASE 04 · OPS',
    h: 'Operación continua con SLAs reales.',
    desc: 'Una vez en producción, mantenemos y mejoramos: ajuste fino de modelos, nuevas automatizaciones, monitoring 24/7 y revisiones trimestrales de ROI. La relación evoluciona de proyecto a partner operativo.',
    deliverables: [
      'SLA 99.9% con guardia técnica',
      'Revisiones trimestrales de ROI',
      'Roadmap evolutivo compartido',
      'Acceso a nuevas capacidades IA',
    ],
    meta: [
      { k: 'Modalidad', v: 'Retainer mensual' },
      { k: 'Uptime', v: '99.9% garantizado' },
      { k: 'Fee', v: 'desde 850 €/mes' },
    ]
  },
];

function Method() {
  const [step, setStep] = React.useState(0);
  React.useEffect(() => {
    const i = setInterval(() => setStep(s => (s + 1) % METHOD_STEPS.length), 8500);
    return () => clearInterval(i);
  }, []);
  return (
    <section className="section" id="metodologia">
      <div className="section-inner">
        <span className="section-label reveal"><span className="num">§ 07</span>SISTEMA STRATIUM</span>
        <div className="section-head">
          <h2 className="section-title reveal reveal-delay-1">
            Cuatro fases.<br/>
            <em>Cero</em> PowerPoints.
          </h2>
          <p className="section-lede reveal reveal-delay-2">
            No hacemos talleres. No hacemos frameworks. Seguimos el mismo protocolo de ingeniería en cada proyecto — igual de aburrido, igual de fiable.
          </p>
        </div>

        <div className="method-track reveal">
          <div className="method-rail">
            {METHOD_STEPS.map((s, i) => (
              <button key={i} className={'method-step-btn' + (step === i ? ' active' : '')} onClick={() => setStep(i)}>
                <span className="n">{s.n}</span>
                <span className="t">{s.title}</span>
                <span className="duration">{s.duration}</span>
              </button>
            ))}
          </div>
          <div className="method-stage">
            {METHOD_STEPS.map((s, i) => (
              <div key={i} className={'method-panel' + (step === i ? ' active' : '')}>
                <span className="kicker kicker--static">{s.kicker}</span>
                <h3>{s.h.split('·')[0]}{s.h.includes('·') && <em> · {s.h.split('·')[1]}</em>}</h3>
                <p className="desc">{s.desc}</p>
                <div className="deliverables">
                  {s.deliverables.map((d, j) => (
                    <div key={j} className="deliv"><span className="check">[ ✓ ]</span><span>{d}</span></div>
                  ))}
                </div>
                <div className="meta">
                  {s.meta.map((m, j) => (
                    <div key={j}>
                      <span className="k">{m.k}</span>
                      <span className="v">{m.v}</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Method });