const Comparacao = () => {
  const trad = ["Horário limitado de atendimento", "Apenas uma conversa por vez", "Depende da disponibilidade da recepcionista", "Risco de esquecer retornos e lembretes"];
  const aura = ["Atendimento 24 horas por dia", "Diversas conversas simultaneamente", "Agendamento automático, sem espera", "Follow-up inteligente e sem falhas"];
  return (
    <section id="comparacao" className="section-pad" style={{borderTop:"1px solid var(--line)"}}>
      <div className="wrap">
        <div style={{textAlign:"center", maxWidth:620, margin:"0 auto 52px"}}>
          <span className="eyebrow" style={{justifyContent:"center"}} data-reveal>Comparação</span>
          <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(32px,3.6vw,50px)", margin:"20px 0 0"}}>
            O que muda ao adotar<br/>a <span className="grad-text">Pixarte Aura.</span>
          </h2>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:20}} className="comp-grid">
          <div data-reveal data-reveal-delay="1" className="card" style={{padding:"32px 30px", border:"1px solid var(--glass-border)", opacity:.85}}>
            <h3 style={{fontSize:19, fontWeight:700, color:"var(--ink-dim)"}}>Atendimento tradicional</h3>
            <ul style={{listStyle:"none", padding:0, margin:"22px 0 0", display:"grid", gap:14}}>
              {trad.map((f,i)=>(
                <li key={i} style={{display:"flex", alignItems:"flex-start", gap:11, fontSize:15, color:"var(--ink-dim)"}}>
                  <span style={{flexShrink:0, marginTop:1, color:"var(--ink-mute)", fontWeight:700}}>✕</span>{f}
                </li>
              ))}
            </ul>
          </div>
          <div data-reveal data-reveal-delay="2" className="card" style={{padding:"32px 30px", border:"1px solid rgba(255,107,53,.4)",
            background:"linear-gradient(180deg, rgba(255,107,53,.06), var(--surface))"}}>
            <h3 style={{fontSize:19, fontWeight:700}} className="grad-text">Pixarte Aura</h3>
            <ul style={{listStyle:"none", padding:0, margin:"22px 0 0", display:"grid", gap:14}}>
              {aura.map((f,i)=>(
                <li key={i} style={{display:"flex", alignItems:"flex-start", gap:11, fontSize:15.5, color:"var(--ink)"}}>
                  <Icon name="check" size={18} stroke="var(--accent)" style={{flexShrink:0, marginTop:2}}/>{f}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`@media (max-width:780px){ .comp-grid{ grid-template-columns:1fr !important;} }`}</style>
    </section>
  );
};
window.Comparacao = Comparacao;