const FluxoProduto = () => {
  const steps = [
    { ic:"chat", t:"Cliente envia mensagem", d:"A paciente escreve no WhatsApp da clínica, a qualquer hora do dia." },
    { ic:"brain", t:"Aura entende a solicitação", d:"Identifica o procedimento desejado e o que a paciente precisa." },
    { ic:"clock", t:"Consulta disponibilidade", d:"Verifica os horários livres na agenda em tempo real." },
    { ic:"calendar", t:"Agenda automaticamente", d:"Reserva o horário certo, sem intervenção manual da equipe." },
    { ic:"check", t:"Confirma o atendimento", d:"Envia a confirmação e os detalhes do horário para a paciente." },
    { ic:"graph", t:"Realiza follow-up", d:"Lembra a paciente antes da consulta e retoma contato depois." },
  ];
  return (
    <section id="fluxo" className="section-pad" style={{borderTop:"1px solid var(--line)"}}>
      <div className="wrap">
        <div style={{textAlign:"center", maxWidth:640, margin:"0 auto 56px"}}>
          <span className="eyebrow" style={{justifyContent:"center"}} data-reveal>Como funciona</span>
          <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(32px,3.6vw,50px)", margin:"20px 0 0"}}>
            Da mensagem ao<br/><span className="grad-text">horário confirmado.</span>
          </h2>
        </div>

        <div style={{maxWidth:640, margin:"0 auto", position:"relative", paddingLeft:56}} className="fluxo-timeline">
          <div aria-hidden style={{position:"absolute", left:19, top:8, bottom:8, width:2,
            background:"linear-gradient(180deg, var(--primary), var(--accent))", opacity:.45, borderRadius:2}}/>
          {steps.map((s,i)=>(
            <div key={i} data-reveal data-reveal-delay={(i%4)+1} style={{position:"relative", paddingBottom: i<steps.length-1?40:0}}>
              <span style={{position:"absolute", left:-56, top:0, width:40, height:40, borderRadius:"50%",
                background:"var(--bg)", border:"2px solid var(--primary)", display:"flex", alignItems:"center", justifyContent:"center",
                color:"var(--primary-2)", boxShadow:"0 0 0 5px rgba(255,107,53,.1)"}}>
                <Icon name={s.ic} size={18}/>
              </span>
              <div style={{paddingTop:6, paddingLeft:12}}>
                <h3 style={{fontSize:19.5, fontWeight:700}}>{s.t}</h3>
                <p style={{color:"var(--ink-dim)", fontSize:15, marginTop:6, maxWidth:460}}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:560px){ .fluxo-timeline{ padding-left:46px !important;} .fluxo-timeline span{ left:-46px !important; width:34px !important; height:34px !important;} }`}</style>
    </section>
  );
};
window.FluxoProduto = FluxoProduto;