const Como = () => {
  const steps = [
    { ic:"target", n:"01", t:"Diagnóstico", d:"Entendemos como sua clínica atende hoje: canais, volume de contatos e onde os pacientes se perdem." },
    { ic:"brain", n:"02", t:"Personalização", d:"Configuramos a IA de acordo com seus procedimentos, valores de referência e tom de voz." },
    { ic:"plug", n:"03", t:"Implantação", d:"Integramos WhatsApp, agenda e atendimento — sem trocar de número, sem interromper a operação." },
    { ic:"graph", n:"04", t:"Acompanhamento", d:"Monitoramos os resultados com a equipe da clínica e realizamos ajustes contínuos." },
  ];
  const benefits = [
    { ic:"calendar", t:"Mais agendamentos", d:"A agenda da clínica se preenche sozinha, com confirmação e lembretes automáticos." },
    { ic:"users", t:"Atendentes menos sobrecarregadas", d:"A IA filtra o repetitivo; a equipe entra só nos casos que pedem toque pessoal." },
    { ic:"heart", t:"Menos pacientes perdidos", d:"Resposta em segundos, mesmo fora do horário comercial — ninguém mais espera sem retorno." },
    { ic:"clock", t:"Atendimento 24 horas", d:"A clínica atende de madrugada, no feriado e no fim de semana com a mesma qualidade." },
  ];
  return (
    <section id="metodologia" className="section-pad" style={{borderTop:"1px solid var(--line)", background:"var(--bg-2)"}}>
      <div className="wrap">
        <div style={{textAlign:"center", maxWidth:680, margin:"0 auto"}}>
          <span className="eyebrow" style={{justifyContent:"center"}} data-reveal>Nossa metodologia</span>
          <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(34px,3.8vw,54px)", margin:"20px 0 0"}}>
            Uma implantação estruturada,<br/>em <span className="grad-text">4 etapas.</span>
          </h2>
          <p data-reveal data-reveal-delay="2" style={{color:"var(--ink-dim)", fontSize:17, margin:"20px auto 0", maxWidth:540}}>
            Cada etapa é conduzida com a equipe da clínica — nada é entregue pronto sem entender sua operação.
          </p>
        </div>

        <div style={{position:"relative", marginTop:64}}>
          <div aria-hidden style={{position:"absolute", left:"8%", right:"8%", top:38, height:2,
            background:"linear-gradient(90deg, var(--primary), var(--accent))", opacity:.45}} className="como-line"/>
          <div style={{display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:22}} className="como-steps">
            {steps.map((s,i)=>(
              <div key={i} data-reveal data-reveal-delay={i+1} style={{textAlign:"center"}}>
                <div style={{position:"relative", width:78, height:78, margin:"0 auto 22px"}}>
                  <span style={{position:"absolute", inset:0, borderRadius:"50%",
                    background:"var(--bg)", border:"2px solid var(--primary)",
                    display:"flex", alignItems:"center", justifyContent:"center", color:"var(--primary-2)",
                    boxShadow:"0 0 0 6px rgba(255,107,53,.08)"}}>
                    <Icon name={s.ic} size={30}/>
                  </span>
                  <span style={{position:"absolute", top:-8, right:-4, fontSize:12, fontWeight:800,
                    color:"var(--accent)", background:"var(--bg-2)", padding:"2px 7px", borderRadius:8, border:"1px solid var(--line)"}}>{s.n}</span>
                </div>
                <h3 style={{fontSize:21, fontWeight:700}}>{s.t}</h3>
                <p style={{color:"var(--ink-dim)", fontSize:15, marginTop:10, maxWidth:240, marginLeft:"auto", marginRight:"auto"}}>{s.d}</p>
              </div>
            ))}
          </div>
        </div>

        <div style={{marginTop:72, display:"grid", gridTemplateColumns:"repeat(4,1fr)", gap:16}} className="benefit-grid">
          {benefits.map((b,i)=>(
            <div key={i} data-reveal data-reveal-delay={i+1} className="card" style={{padding:"26px 24px", transition:"transform .25s, border-color .25s"}}
              onMouseEnter={e=>{e.currentTarget.style.transform="translateY(-4px)";e.currentTarget.style.borderColor="rgba(255,107,53,.4)";}}
              onMouseLeave={e=>{e.currentTarget.style.transform="none";e.currentTarget.style.borderColor="var(--glass-border)";}}>
              <span style={{display:"inline-flex", width:44, height:44, borderRadius:12, alignItems:"center", justifyContent:"center",
                background:"rgba(0,206,201,.12)", color:"var(--accent)", marginBottom:18}}>
                <Icon name={b.ic} size={22}/>
              </span>
              <h4 style={{fontSize:17.5, fontWeight:700}}>{b.t}</h4>
              <p style={{color:"var(--ink-dim)", fontSize:14.5, marginTop:8}}>{b.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 920px){
          .como-steps{ grid-template-columns:repeat(2,1fr) !important; gap:40px 22px !important;}
          .como-line{ display:none;}
          .benefit-grid{ grid-template-columns:repeat(2,1fr) !important;}
        }
        @media (max-width: 560px){ .benefit-grid{ grid-template-columns:1fr !important;} }
      `}</style>
    </section>
  );
};
window.Como = Como;