class CustomPartners extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div class="py-12 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="animate-on-scroll">
            <h2 class="text-center text-base font-semibold text-indigo-600 tracking-wide uppercase">Partenaires technologiques</h2>
            <p class="mt-2 text-center text-3xl font-extrabold text-gray-900 sm:text-4xl">
              Intégration native avec les leaders du marché
            </p>
          </div>
          
          <div class="mt-10 grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-4">
            <div class="col-span-1 flex justify-center items-center py-8 px-8 bg-white rounded-lg shadow">
              <img class="max-h-12" src="https://via.placeholder.com/200x80?text=GLORY" alt="GLORY">
            </div>
            <div class="col-span-1 flex justify-center items-center py-8 px-8 bg-white rounded-lg shadow">
              <img class="max-h-12" src="https://via.placeholder.com/200x80?text=EASYPAYMENT" alt="EASYPAYMENT">
            </div>
            <div class="col-span-1 flex justify-center items-center py-8 px-8 bg-white rounded-lg shadow">
              <img class="max-h-12" src="https://via.placeholder.com/200x80?text=AUTOMATIC+SYSTEMS" alt="AUTOMATIC SYSTEMS">
            </div>
            <div class="col-span-1 flex justify-center items-center py-8 px-8 bg-white rounded-lg shadow">
              <img class="max-h-12" src="https://via.placeholder.com/200x80?text=MUSEUMPASS" alt="MUSEUMPASS">
            </div>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-partners', CustomPartners);