function Integrations() {
  const items = [
    { mark: 'SF', name: 'Salesforce', tag: 'CRM nativo', desc: 'Cada conversación, score y cita se sincroniza al lead.' },
    { mark: 'WA', name: 'WhatsApp Business', tag: 'Canal principal', desc: 'API oficial de Meta. Tu número verificado.' },
    { mark: 'GC', name: 'Google · Outlook', tag: 'Calendarios', desc: 'Agenda directo, respetando disponibilidad real del asesor.' },
    { mark: 'FB', name: 'Meta Lead Ads', tag: 'Fuentes', desc: 'Webhook directo a Facebook & Instagram.' },
    { mark: 'HS', name: 'HubSpot', tag: 'CRM alterno', desc: 'También compatible con HubSpot y Pipedrive.' },
    { mark: '{ }', name: 'API + Webhooks', tag: 'Custom', desc: 'API REST para sistemas propios de marca.' },
  ];
  return (
    <section className="integrations section" id="integraciones" data-screen-label="07 Integraciones">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Las integraciones</span>
          <h2 className="title">
            <span className="line">Vive donde tu equipo</span>
            <span className="line accent-text">ya trabaja.</span>
          </h2>
          <p className="lede">
            Implementación en 5 días hábiles. Sin tocar tu CRM.
          </p>
        </div>
        <div className="int-grid">
          {items.map((it, i) => (
            <div key={i} className="int-card">
              <div className="logo-mark">{it.mark}</div>
              <span className="badge">{it.tag}</span>
              <h4>{it.name}</h4>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Integrations = Integrations;