/* global React, Icon */

const FLOW = [
  { icon: "chat", title: "Mensaje del cliente", text: "Un cliente escribe por WhatsApp o por el chat de tu web.", tone: "wa" },
  { icon: "inbox", title: "STAMINEX recibe la solicitud", text: "El mensaje entra a la plataforma y queda registrado al instante.", tone: "navy" },
  { icon: "spark", title: "Identifica la necesidad", text: "El sistema reconoce si se trata de una cita, cotización o consulta.", tone: "orange" },
  { icon: "cog", title: "Ejecuta la acción", text: "Agenda la cita, genera la proforma o consulta el estado del pedido.", tone: "navy" },
  { icon: "bell", title: "Notifica al negocio", text: "Tu equipo recibe el aviso con toda la información organizada.", tone: "orange" },
  { icon: "check", title: "Responde al cliente", text: "El cliente obtiene una respuesta clara, rápida y profesional.", tone: "wa" },
];

function HowItWorks() {
  return (
    <section className="section section--dark" id="automatizacion">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Cómo funciona</span>
          <h2 className="section-title">De un mensaje a una <span className="grad-text">acción resuelta</span></h2>
          <p className="section-sub">Un flujo continuo que ocurre en segundos, mientras tu equipo se concentra en lo importante.</p>
        </div>

        <div className="flow">
          <div className="flow__spine"><span className="flow__pulse" /></div>
          {FLOW.map((f, i) => (
            <div key={f.title} className={"flow__step reveal d" + ((i % 3) + 1)}>
              <div className="flow__node">
                <span className={"flow__ic flow__ic--" + f.tone}><Icon name={f.icon} size={24} /></span>
                <span className="flow__num">{String(i + 1).padStart(2, "0")}</span>
              </div>
              <div className="flow__card">
                <h3 className="flow__title">{f.title}</h3>
                <p className="flow__text">{f.text}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;