<script lang="ts">
  const testimonials = [
    {
      name: 'Sarah Johnson',
      role: 'Freelance Designer',
      content: 'The migration to Microsoft 365 was seamless. The team was professional and made sure all my data was transferred safely.',
      avatar: '👩'
    },
    {
      name: 'Michael Chen',
      role: 'Small Business Owner',
      content: 'Their ongoing support has been invaluable. Quick response times and always available when we need them.',
      avatar: '👨'
    },
    {
      name: 'Emma Rodriguez',
      role: 'Marketing Agency Director',
      content: 'The personalized training sessions helped our team get up to speed quickly with Microsoft 365.',
      avatar: '👩'
    }
  ];

  let currentIndex = 0;

  function next() {
    currentIndex = (currentIndex + 1) % testimonials.length;
  }

  function prev() {
    currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
  }
</script>

<section class="py-20 bg-surface">
  <div class="container mx-auto px-4">
    <h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-12">
      What Our Clients Say
    </h2>
    <div class="max-w-3xl mx-auto">
      <div class="relative">
        <div class="bg-white p-8 rounded-xl shadow-sm">
          <div class="text-4xl mb-4">{testimonials[currentIndex].avatar}</div>
          <p class="text-lg text-text/80 mb-6">
            "{testimonials[currentIndex].content}"
          </p>
          <div>
            <p class="font-heading font-semibold text-primary">
              {testimonials[currentIndex].name}
            </p>
            <p class="text-text/60">
              {testimonials[currentIndex].role}
            </p>
          </div>
        </div>
        <div class="flex justify-center mt-8 space-x-4">
          <button
            on:click={prev}
            class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
          >
            ←
          </button>
          <button
            on:click={next}
            class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
          >
            →
          </button>
        </div>
      </div>
    </div>
  </div>
</section> 