function Timeline() {
  const steps = [
    {
      hour: "Hora 00 → 24",
      title: "Diagnóstico y kickoff",
      items: ["Accesos y onboarding", "Tessa analiza mercado", "Auditoría de competencia"],
    },
    {
      hour: "Hora 24 → 48",
      title: "Estrategia y CRM",
      items: ["3 buyer personas con IA", "CRM configurado", "Creativos generados"],
    },
    {
      hour: "Hora 48 → 72",
      title: "Campañas activas",
      items: ["Campañas lanzadas", "Tracking funcionando", "Dashboard entregado"],
    },
    {
      hour: "Día 04 →",
      title: "Generando data",
      items: ["Account Manager asignado", "Plan semanal vivo", "Optimización continua"],
    },
  ];
  return (
    <section className="shell" id="proceso">
      <SectionLabel num="07 / Proceso" label="Cómo funciona — las 72 horas" right="De reunión a sistema" />

      <h2 className="h-section" style={{ maxWidth: "18ch" }}>
        Mientras otros entregan un PDF, <span className="italic" style={{ color: "var(--ink-dim)" }}>tú ya tienes</span> el sistema funcionando.
      </h2>

      <div className="timeline-wrap">
        <div className="timeline">
          {steps.map((s) => (
            <div key={s.hour} className="timeline-step">
              <div className="hour">{s.hour}</div>
              <h4>{s.title}</h4>
              <ul>
                {s.items.map((i) => <li key={i}>{i}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <p className="timeline-closer">
        Día 4 ya estás generando data. <span className="em">Día 30 tomamos decisiones con números reales.</span>
      </p>
    </section>
  );
}

window.Timeline = Timeline;