/* HowItWorks — 3-step timeline */
const LAB_STEPS = [
  { icon: "search", num: "PASSO 1", title: "Diagnóstico", desc: "Entendemos seu processo, gargalos e oportunidades de tecnologia." },
  { icon: "workflow", num: "PASSO 2", title: "Automação", desc: "Implementamos o SaaS e os agentes de IA sob medida para você." },
  { icon: "trending-up", num: "PASSO 3", title: "Crescimento", desc: "Sua empresa escala com eficiência, dados e tecnologia moderna." },
];

function HowItWorks() {
  return (
    <section className="lab-section lab-how" id="como-funciona">
      <div className="lab-container">
        <div className="lab-section-head">
          <Reveal><Eyebrow>Como Funciona</Eyebrow></Reveal>
          <Reveal delay={60} as="h2">Da ideia ao crescimento em 3 passos</Reveal>
        </div>
        <div className="lab-steps">
          {LAB_STEPS.map((s, i) => (
            <Reveal key={s.title} delay={i * 120} className="lab-step">
              <div className="line" />
              <div className="dot"><Icon name={s.icon} size={26} color="#fff" /></div>
              <div className="num">{s.num}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;