function How() {
  const steps = [
    { stage: '01', title: 'Lead llega', desc: 'Facebook, Google o tu sitio. Webhook directo.', latency: '0 s' },
    { stage: '02', title: 'Joi responde', desc: 'En menos de 60 segundos. Español MX natural.', latency: '47 s' },
    { stage: '03', title: 'Califica', desc: 'Captura presupuesto, modelo, urgencia. Asigna score.', latency: '12 min' },
    { stage: '04', title: 'Agenda', desc: 'Test drive en calendario. Sincronizado a CRM.', latency: '15 min' },
  ];
  return (
    <section className="how section" id="flujo" data-screen-label="04 Flujo">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">El flujo</span>
          <h2 className="title">
            <span className="line">De click a test drive</span>
            <span className="line accent-text">en 15 minutos.</span>
          </h2>
        </div>

        <div className="timeline">
          {steps.map((s, i) => (
            <div key={i} className="tl-step" style={{ animationDelay: `${i * 0.12}s` }}>
              {i < steps.length - 1 && (
                <div className="tl-connector">
                  <span className="tl-connector-fill" style={{ animationDelay: `${0.4 + i * 0.35}s` }}></span>
                </div>
              )}
              <div className="tl-node">
                <span className="tl-node-dot"></span>
                <span className="tl-node-num">{s.stage}</span>
              </div>
              <div className="tl-content">
                <div className="tl-time">{s.latency}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.How = How;