const Integracoes = () => {
  const items = [
    { ic:"whatsapp", t:"WhatsApp", d:"Conecta ao número atual da clínica via WhatsApp Business API, sem trocar de número e sem perder histórico." },
    { ic:"calendar", t:"Agenda Online", d:"Sincroniza com a agenda da clínica para consultar horários livres e confirmar consultas na hora." },
  ];
  return (
    <section id="integracoes" className="section-pad" style={{borderTop:"1px solid var(--line)", background:"var(--bg-2)"}}>
      <div className="wrap">
        <div style={{textAlign:"center", maxWidth:620, margin:"0 auto 48px"}}>
          <span className="eyebrow" style={{justifyContent:"center"}} data-reveal>Integrações</span>
          <h2 data-reveal data-reveal-delay="1" style={{fontSize:"clamp(32px,3.6vw,50px)", margin:"20px 0 0"}}>
            Conectada ao que sua<br/>clínica <span className="grad-text">já usa.</span>
          </h2>
          <p data-reveal data-reveal-delay="2" style={{color:"var(--ink-dim)", fontSize:16.5, margin:"18px auto 0", maxWidth:480}}>
            A Pixarte Aura integra o atendimento via WhatsApp com a agenda online da clínica, para automatizar agendamentos e organizar o fluxo de atendimento.
          </p>
        </div>
        <div style={{display:"grid", gridTemplateColumns:"repeat(2,1fr)", gap:20, maxWidth:640, margin:"0 auto"}} className="integ-grid">
          {items.map((it,i)=>(
            <div key={i} data-reveal data-reveal-delay={i+1} className="card" style={{padding:"32px 28px", textAlign:"center"}}>
              <span style={{display:"inline-flex", width:56, height:56, borderRadius:16, alignItems:"center", justifyContent:"center",
                background:"linear-gradient(135deg, rgba(255,107,53,.2), rgba(0,206,201,.2))", color:"var(--primary-2)", marginBottom:18}}>
                <Icon name={it.ic} size={26}/>
              </span>
              <h3 style={{fontSize:19, fontWeight:700}}>{it.t}</h3>
              <p style={{color:"var(--ink-dim)", fontSize:14.5, marginTop:8}}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`@media (max-width:640px){ .integ-grid{ grid-template-columns:1fr !important;} }`}</style>
    </section>
  );
};
window.Integracoes = Integracoes;