const Beneficios = () => {
  const items = [
    { ic:"clock", t:"Atendimento 24 horas", d:"A Aura está sempre disponível, inclusive à noite e nos fins de semana." },
    { ic:"calendar", t:"Agendamentos automáticos", d:"As pacientes marcam horário sem precisar falar com ninguém da equipe." },
    { ic:"chat", t:"Atendimento simultâneo", d:"Conversa com várias pacientes ao mesmo tempo, sem fila de espera." },
    { ic:"shield", t:"Padronização do atendimento", d:"Toda paciente recebe o mesmo padrão de resposta e cuidado." },
    { ic:"target", t:"Mais organização", d:"A operação da clínica fica registrada e visível num só lugar." },
    { ic:"users", t:"Mais tempo para a equipe", d:"Sua equipe foca no que importa: o atendimento presencial da paciente." },
  ];
  return (
    <section id="beneficios" className="section-pad" style={{borderTop:"1px solid var(--line)"}}>
      <div className="wrap">
        <div style={{textAlign:"center", maxWidth:640, margin:"0 auto 52px"}}>
          <span className="eyebrow" style={{justifyContent:"center"}} data-reveal>Benefícios</span>
          <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(32px,3.6vw,50px)", margin:"20px 0 0"}}>
            O que muda na rotina<br/>da <span className="grad-text">sua clínica.</span>
          </h2>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(3,1fr)", gap:16}} className="beneficios-grid">
          {items.map((b,i)=>(
            <div key={i} data-reveal data-reveal-delay={(i%3)+1} className="card" style={{padding:"28px 26px", 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:46, height:46, borderRadius:13, alignItems:"center", justifyContent:"center",
                background:"linear-gradient(135deg, rgba(255,107,53,.18), rgba(0,206,201,.18))", color:"var(--primary-2)", marginBottom:18}}>
                <Icon name={b.ic} size={22}/>
              </span>
              <h3 style={{fontSize:18.5, fontWeight:700}}>{b.t}</h3>
              <p style={{color:"var(--ink-dim)", fontSize:14.5, marginTop:8}}>{b.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:920px){ .beneficios-grid{ grid-template-columns:repeat(2,1fr) !important;} } @media (max-width:560px){ .beneficios-grid{ grid-template-columns:1fr !important;} }`}</style>
    </section>
  );
};
window.Beneficios = Beneficios;