class CustomClients extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .client-logo {
          filter: grayscale(100%);
          opacity: 0.6;
          transition: all 0.3s ease;
        }
        .client-logo:hover {
          filter: grayscale(0);
          opacity: 1;
        }
      </style>
      <section id="clients" class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted By</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
              Brands that have transformed their digital presence with us
            </p>
          </div>
          
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8 items-center">
            <img src="http://static.photos/business/200x200/1" alt="Client Logo" class="client-logo mx-auto">
            <img src="http://static.photos/business/200x200/2" alt="Client Logo" class="client-logo mx-auto">
            <img src="http://static.photos/business/200x200/3" alt="Client Logo" class="client-logo mx-auto">
            <img src="http://static.photos/business/200x200/4" alt="Client Logo" class="client-logo mx-auto">
          </div>
        </div>
      </section>
    `;
  }
}
customElements.define('custom-clients', CustomClients);