class CustomTestimonials extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <div id="references" class="py-16 bg-white">
        <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">Ils nous font confiance</h2>
            <p class="mt-2 text-center text-3xl font-extrabold text-gray-900 sm:text-4xl">
              Références et témoignages
            </p>
          </div>
          
          <div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            <!-- IRSNB -->
            <div class="bg-white p-6 rounded-lg shadow-lg">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full" src="http://static.photos/science/200x200/1" alt="IRSNB">
                <div class="ml-4">
                  <h3 class="text-lg font-medium text-gray-900">Institut Royal des Sciences Naturelles</h3>
                  <p class="text-gray-500">Bruxelles</p>
                </div>
              </div>
              <p class="mt-4 text-gray-600">
                "La migration vers Tick8ing a été transparente et nous a permis de gérer efficacement nos 500 000 visiteurs annuels avec une seule plateforme."
              </p>
            </div>
            
            <!-- Pôle Muséal de Mons -->
            <div class="bg-white p-6 rounded-lg shadow-lg">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full" src="http://static.photos/cityscape/200x200/1" alt="Mons">
                <div class="ml-4">
                  <h3 class="text-lg font-medium text-gray-900">Pôle Muséal de la Ville de Mons</h3>
                  <p class="text-gray-500">Mons</p>
                </div>
              </div>
              <p class="mt-4 text-gray-600">
                "La gestion multi-sites est un vrai plus pour notre réseau de 5 musées. La mutualisation des données nous fait gagner un temps précieux."
              </p>
            </div>
            
            <!-- War Heritage Institute -->
            <div class="bg-white p-6 rounded-lg shadow-lg">
              <div class="flex items-center">
                <img class="h-12 w-12 rounded-full" src="http://static.photos/history/200x200/1" alt="WHI">
                <div class="ml-4">
                  <h3 class="text-lg font-medium text-gray-900">War Heritage Institute</h3>
                  <p class="text-gray-500">Bruxelles</p>
                </div>
              </div>
              <p class="mt-4 text-gray-600">
                "Le contrôle d'accès intégré et la billetterie omnicanale ont révolutionné notre gestion des flux de visiteurs, surtout lors des journées très fréquentées."
              </p>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}
customElements.define('custom-testimonials', CustomTestimonials);