const STEPS = [
  {
    num: "01",
    label: "Diagnóstico",
    Icon: IconCompass,
    title: <>Empezamos <em>escuchando.</em></>,
    body: "Una videollamada de 45 minutos para entender tu negocio, tus procesos y dónde se están yendo las horas y las ventas. Si no tiene sentido avanzar, te lo decimos.",
    time: "45'",
    tags: ["Gratuito", "Sin compromiso"],
  },
  {
    num: "02",
    label: "Diseño",
    Icon: IconPen,
    title: <>Dibujamos el <em>flujo</em> del agente.</>,
    body: "Mapa de conversación, integraciones necesarias, criterios de derivación a humano, tono de voz. Te lo mostramos y ajustamos juntos antes de tocar una sola línea.",
    time: "3–5 días",
    tags: ["Prototipo", "Iterativo"],
  },
  {
    num: "03",
    label: "Implementación",
    Icon: IconSettings,
    title: <>Lo <em>construimos</em> y entrenamos.</>,
    body: "Cargamos tu información, conectamos tus herramientas, entrenamos el modelo con ejemplos reales, probamos escenarios borde. Vos seguís con lo tuyo.",
    time: "5–10 días",
    tags: ["WhatsApp", "CRM", "Integraciones"],
  },
  {
    num: "04",
    label: "Entrega",
    Icon: IconTruck,
    title: <>Te lo <em>entregamos</em> andando.</>,
    body: "Sesión de onboarding con tu equipo, documentación clara, panel para que veas todas las conversaciones. Arrancamos con supervisión y soltamos cuando te sientas listo.",
    time: "1 día",
    tags: ["Handoff", "Training"],
  },
  {
    num: "05",
    label: "Mantenimiento",
    Icon: IconHeart,
    title: <>Lo <em>cuidamos</em> en el tiempo.</>,
    body: "Un agente no se \"deja andando\". Revisamos conversaciones, ajustamos prompts, agregamos integraciones nuevas. Estamos cerca cuando cambia algo en tu negocio.",
    time: "mensual",
    tags: ["Ongoing", "On-demand"],
  },
];

function Process() {
  const [active, setActive] = React.useState(0);
  const s = STEPS[active];
  return (
    <section id="proceso" className="process">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Cómo trabajamos</span>
            <h2 className="section-title">Cinco pasos, <em>cero</em> magia.</h2>
          </div>
          <p className="section-lead">
            No prometemos "IA que se implementa sola". Somos transparentes con los tiempos y con lo que hacés vos, lo que hacemos nosotros, y lo que hace el agente.
          </p>
        </div>

        <div className="process-steps">
          <div className="step-list">
            {STEPS.map((st, i) => (
              <div key={i} className={`step-item ${i === active ? "active" : ""}`} onClick={() => setActive(i)}>
                <span className="step-num">{st.num}</span>
                <span className="step-label">{st.label}</span>
                <span className="step-dot"></span>
              </div>
            ))}
          </div>

          <div className="step-detail" key={active} style={{animation: "fadeUp 0.4s ease"}}>
            <div className="step-body">
              <div style={{color:"var(--accent)"}}>
                <s.Icon size={28} />
              </div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div style={{display:"flex", alignItems:"center", gap:12, fontFamily:"var(--font-mono)", fontSize:"0.75rem", color:"var(--ink-muted)", textTransform:"uppercase", letterSpacing:"0.12em"}}>
                <span>Paso {s.num} de 05</span>
                <span style={{flex:1, height:1, background:"var(--line)"}}></span>
              </div>
            </div>
            <div className="step-meta">
              <div>
                <div style={{fontFamily:"var(--font-mono)", fontSize:"0.72rem", color:"var(--ink-muted)", textTransform:"uppercase", letterSpacing:"0.1em", marginBottom:6}}>Tiempo</div>
                <div className="step-time">{s.time}</div>
              </div>
              <div className="step-tags">
                {s.tags.map((t,i) => <span key={i} className="step-tag">{t}</span>)}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Process });