class CustomTestimonials extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .testimonials {
          padding: 4rem 0;
          background: white;
        }
        .testimonial-card {
          background: #fff;
          border-radius: 12px;
          padding: 2rem;
          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
          transition: all 0.3s ease;
        }
        .testimonial-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        }
      </style>
      <section class="testimonials">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-12">
            <h2 class="text-3xl font-bold mb-4">Trusted by creators worldwide</h2>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto">See what our users say about Short AI</p>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="testimonial-card">
              <div class="flex items-center mb-4">
                <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
                <div>
                  <h4 class="font-bold">Sarah K.</h4>
                  <p class="text-gray-600">Content Creator</p>
                </div>
              </div>
              <p class="text-gray-700">"Short AI has completely transformed my content creation workflow. I save hours every week!"</p>
            </div>
            <div class="testimonial-card">
              <div class="flex items-center mb-4">
                <img src="http://static.photos/people/200x200/2" alt="User" class="w-12 h-12 rounded-full mr-4">
                <div>
                  <h4 class="font-bold">Mark T.</h4>
                  <p class="text-gray-600">Marketing Manager</p>
                </div>
              </div>
              <p class="text-gray-700">"The quality of the generated content is outstanding. It's like having a professional writer on staff."</p>
            </div>
            <div class="testimonial-card">
              <div class="flex items-center mb-4">
                <img src="http://static.photos/people/200x200/3" alt="User" class="w-12 h-12 rounded-full mr-4">
                <div>
                  <h4 class="font-bold">Julia M.</h4>
                  <p class="text-gray-600">Small Business Owner</p>
                </div>
              </div>
              <p class="text-gray-700">"I can now produce professional content without needing to hire expensive freelancers."</p>
            </div>
          </div>
        </div>
      </section>
    `;
  }
}
customElements.define('custom-testimonials', CustomTestimonials);