components/testimonials.js

class CustomTestimonials extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        
        .testimonial-slider {
          position: relative;
          max-width: 800px;
          margin: 0 auto;
          overflow: hidden;
        }
        
        .testimonial-container {
          display: flex;
          transition: transform 0.5s ease-in-out;
        }
        
        .testimonial-slide {
          min-width: 100%;
          padding: 2rem;
        }
        
        .testimonial-card {
          background-color: #374151;
          border-radius: 1rem;
          padding: 2rem;
          box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
        }
        
        .testimonial-content {
          font-style: italic;
          margin-bottom: 1.5rem;
          line-height: 1.6;
        }
        
        .testimonial-author {
          display: flex;
          align-items: center;
        }
        
        .author-avatar {
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          margin-right: 1rem;
          background-color: #4b5563;
          overflow: hidden;
        }
        
        .author-info h4 {
          font-weight: 600;
          margin-bottom: 0.25rem;
        }
        
        .author-info p {
          color: #9ca3af;
          font-size: 0.875rem;
        }
        
        .slider-controls {
          display: flex;
          justify-content: center;
          margin-top: 2rem;
        }
        
        .slider-dot {
          width: 0.75rem;
          height: 0.75rem;
          border-radius: 50%;
          background-color: #4b5563;
          margin: 0 0.5rem;
          cursor: pointer;
          transition: background-color 0.3s ease;
        }
        
        .slider-dot.active {
          background-color: #0d9488;
        }
        
        .slider-nav {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          background: rgba(17, 24, 39, 0.7);
          border: none;
          width: 2.5rem;
          height: 2.5rem;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: background 0.3s ease;
        }
        
        .slider-nav:hover {
          background: rgba(13, 148, 136, 0.8);
        }
        
        .prev {
          left: 1rem;
        }
        
        .next {
          right: 1rem;
        }
        
        @media (max-width: 768px) {
          .testimonial-slide {
            padding: 1rem;
          }
          
          .testimonial-card {
            padding: 1.5rem;
          }
        }
      </style>
      
      <div class="testimonial-slider">
        <div class="testimonial-container" id="testimonial-container">
          <!-- Testimonial 1 -->
          <div class="testimonial-slide">
            <div class="testimonial-card">
              <p class="testimonial-content">"The personalized nutrition plan transformed my relationship with food. I've lost 30 pounds and have more energy than I've had in years. The team at WellnessWave truly cares about your success."</p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img src="http://static.photos/people/320x240/7" alt="Jennifer K." class="w-full h-full object-cover">
                </div>
                <div class="author-info">
                  <h4>Jennifer K.</h4>
                  <p>Lost 30 lbs in 6 months</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Testimonial 2 -->
          <div class="testimonial-slide">
            <div class="testimonial-card">
              <p class="testimonial-content">"As a busy professional, I struggled to maintain a healthy lifestyle. The fitness program designed for my schedule helped me build strength and reduce stress. I'm now in the best shape of my life!"</p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img src="http://static.photos/people/320x240/8" alt="Michael T." class="w-full h-full object-cover">
                </div>
                <div class="author-info">
                  <h4>Michael T.</h4>
                  <p>Corporate Executive</p>
                </div>
              </div>
            </div>
          </div>
          
          <!-- Testimonial 3 -->
          <div class="testimonial-slide">
            <div class="testimonial-card">
              <p class="testimonial-content">"The mental wellness coaching helped me develop tools to manage anxiety and improve my sleep. The mindfulness techniques are now part of my daily routine. I feel more balanced and in control."</p>
              <div class="testimonial-author">
                <div class="author-avatar">
                  <img src="http://static.photos/people/320x240/9" alt="Sophia L." class="w-full h-full object-cover">
                </div>
                <div class="author-info">
                  <h4>Sophia L.</h4>
                  <p>Teacher</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <button class="slider-nav prev" id="prev-btn">
          <i data-feather="chevron-left" class="text-white w-5 h-5"></i>
        </button>
        <button class="slider-nav next" id="next-btn">
          <i data-feather="chevron-right" class="text-white w-5 h-5"></i>
        </button>
        
        <div class="slider-controls">
          <div class="slider-dot active" data-index="0"></div>
          <div class="slider-dot" data-index="1"></div>
          <div class="slider-dot" data-index="2"></div>
        </div>
      </div>
    `;
    
    // Slider functionality
    const container = this.shadowRoot.getElementById('testimonial-container');
    const dots = this.shadowRoot.querySelectorAll('.slider-dot');
    const prevBtn = this.shadowRoot.getElementById('prev-btn');
    const nextBtn = this.shadowRoot.getElementById('next-btn');
    
    let currentIndex = 0;
    const totalSlides = dots.length;
    
    const updateSlider = () => {
      container.style.transform = `translateX(-${currentIndex * 100}%)`;
      
      // Update dots
      dots.forEach((dot, index) => {
        if (index === currentIndex) {
          dot.classList.add('active');
        } else {
          dot.classList.remove('active');
        }
      });
    };
    
    const nextSlide = () => {
      currentIndex = (currentIndex + 1) % totalSlides;
      updateSlider();
    };
    
    const prevSlide = () => {
      currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;
      updateSlider();
    };
    
    // Event listeners
    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);
    
    dots.forEach(dot => {
      dot.addEventListener('click', () => {
        currentIndex = parseInt(dot.getAttribute('data-index'));
        updateSlider();
      });
    });
    
    // Auto-advance slider
    setInterval(nextSlide, 5000);
    
    // Initialize Feather icons
    feather.replace();
  }
}

customElements.define('custom-testimonials', CustomTestimonials);