Rotating Enterprise Testimonials Section

<section class="animate-entry delay-200 [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll animate lg:mx-auto bg-gradient-to-br from-white/10 via-white/0 to-white/10 max-w-7xl rounded-3xl mt-24 mr-auto mb-24 ml-auto pt-10 pr-10 pb-10 pl-10 relative" style="position: relative; --border-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1)); --border-radius-before: 24px">
  <!-- Header -->

  <!-- Main Grid -->
  <div class="flex flex-col rounded-none mt-0 mb-0 pt-0 pr-0 pb-0 pl-0 relative gap-x-16 gap-y-4">
    <!-- Header Section -->
    <div class="flex flex-col gap-10 w-full gap-x-10 gap-y-10">
      <!-- Top label row -->
      <div class="flex gap-6 gap-x-10 gap-y-10 items-center">
        <span class="text-xs font-mono text-blue-400 tracking-widest font-sans" style="">
              01
            </span>
        <div class="h-px flex-1 bg-white/10"></div>
        <span class="uppercase text-xs text-gray-500 tracking-widest font-sans" style="">
              Customer Stories
            </span>
      </div>

      <!-- Main content -->
      
    </div>

    <!-- Testimonials Grid -->
    <div class="min-h-[900px] flex flex-col overflow-hidden lg:block w-full max-w-7xl mr-auto ml-auto pt-12 pb-12 relative gap-x-16 gap-y-16 items-center justify-center">
      <!-- Abstract Background Pattern -->
      <div class="absolute inset-0 pointer-events-none opacity-20" style="background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);">
      </div>
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-blue-900/10 blur-[100px] rounded-full pointer-events-none z-0">
      </div>

      <!-- Center Content -->
      <div class="z-20 flex flex-col lg:absolute lg:top-1/2 lg:left-1/2 lg:-translate-x-1/2 lg:-translate-y-1/2 lg:mb-0 text-center max-w-3xl mb-16 pr-6 pl-6 relative items-center" style="">
        <h2 class="flex flex-col gap-4">
          <span class="text-4xl md:text-5xl lg:text-6xl leading-[1.05] text-white font-oswald font-light" style="">
                Loved by developers. Trusted by enterprises.
              </span>
          <span class="block text-gray-500 text-lg max-w-2xl mx-auto font-sans" style="">
                Join thousands of teams using Sakura to streamline their
                workflows, unify data, and focus on what matters most.
              </span>
        </h2>
        <button class="mt-8 group flex items-center gap-2 px-6 py-3 border border-white/15 text-white text-sm font-medium rounded-full hover:bg-white/5 transition font-sans whitespace-nowrap">
          <span class="font-sans">See all reviews</span>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 transition-transform group-hover:translate-x-1">
            <path d="M5 12h14" class=""></path>
            <path d="m12 5 7 7-7 7" class=""></path>
          </svg>
        </button>
      </div>

      <!-- Card 1 (Top Left) -->
      <div class="z-10 lg:absolute lg:top-[8%] lg:left-[2%] xl:left-[4%] transition-opacity duration-500 ease-in-out group w-full max-w-sm relative" id="testimonial-card-0" style="">
        <div class="transition-all duration-300 group-hover:border-white/20 group-hover:-translate-y-1 bg-[#000000] border-white/10 border rounded-[24px] mb-6 pt-8 pr-8 pb-8 pl-8 relative shadow-2xl">
          <div class="-bottom-3 transform transition-colors duration-300 group-hover:border-white/20 bg-[#000000] w-6 h-6 border-white/10 border-r border-b absolute left-8 rotate-45">
          </div>
          <p class="quote-text text-neutral-300 text-lg leading-relaxed relative z-10 font-sans" style="">"The automated workflow orchestration saved our team 20+ hours per week. It's not just a tool, it's a productivity multiplier."</p>
        </div>
        <div class="flex items-center gap-4 pl-4">
          <div class="p-0.5 rounded-full bg-gradient-to-br from-white/20 to-transparent">
            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&amp;h=120&amp;fit=crop" alt="User Avatar" class="avatar-img w-14 h-14 rounded-full object-cover border-2 border-[#050505]">
          </div>
          <div class="flex flex-col">
            <span class="author-name text-white font-medium text-base font-sans" style="">Jessica Wu</span>
            <span class="author-role text-neutral-500 text-sm font-sans" style="">Head of Operations at Stripe</span>
          </div>
        </div>
      </div>

      <!-- Card 2 (Top Right) -->
      <div id="testimonial-card-1" class="relative z-10 w-full max-w-sm lg:absolute lg:top-[8%] lg:right-[2%] xl:right-[4%] transition-opacity duration-500 ease-in-out group">
        <div class="transition-all duration-300 group-hover:border-white/20 group-hover:-translate-y-1 bg-[#000000] border-white/10 border rounded-[24px] mb-6 px-8 py-8 relative shadow-2xl">
          <div class="-bottom-3 transform transition-colors duration-300 group-hover:border-white/20 bg-[#000000] w-6 h-6 border-white/10 border-r border-b absolute left-8 rotate-45">
          </div>
          <p class="quote-text text-neutral-300 text-lg leading-relaxed relative z-10 font-sans" style="">"We replaced three different tools with Sakura. The unified data view has completely transformed our decision-making process."</p>
        </div>
        <div class="flex items-center gap-4 pl-4">
          <div class="p-0.5 rounded-full bg-gradient-to-br from-white/20 to-transparent">
            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120&amp;h=120&amp;fit=crop" alt="User Avatar" class="avatar-img w-14 h-14 rounded-full object-cover border-2 border-[#050505]">
          </div>
          <div class="flex flex-col">
            <span class="author-name text-white font-medium text-base font-sans" style="">Alex Thompson</span>
            <span class="author-role text-neutral-500 text-sm font-sans" style="">CTO at Linear</span>
          </div>
        </div>
      </div>

      <!-- Card 3 (Bottom Left) -->
      <div id="testimonial-card-2" class="relative z-10 w-full max-w-sm lg:absolute lg:bottom-[8%] lg:left-[2%] xl:left-[4%] transition-opacity duration-500 ease-in-out group">
        <div class="transition-all duration-300 group-hover:border-white/20 group-hover:-translate-y-1 bg-[#000000] border-white/10 border rounded-[24px] mb-6 pt-8 pr-8 pb-8 pl-8 relative shadow-2xl">
          <div class="-bottom-3 transform transition-colors duration-300 group-hover:border-white/20 bg-[#000000] w-6 h-6 border-white/10 border-r border-b absolute left-8 rotate-45">
          </div>
          <p class="quote-text text-neutral-300 text-lg leading-relaxed relative z-10 font-sans" style="">"Deployment velocity increased by 3x after adopting Sakura. The insights it provides are invaluable for our growth."</p>
        </div>
        <div class="flex items-center gap-4 pl-4">
          <div class="p-0.5 rounded-full bg-gradient-to-br from-white/20 to-transparent">
            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&amp;h=120&amp;fit=crop" alt="User Avatar" class="avatar-img w-14 h-14 rounded-full object-cover border-2 border-[#050505]">
          </div>
          <div class="flex flex-col">
            <span class="author-name text-white font-medium text-base font-sans" style="">Emily Clark</span>
            <span class="author-role text-neutral-500 text-sm font-sans" style="">VP Product at Vercel</span>
          </div>
        </div>
      </div>

      <!-- Card 4 (Bottom Right) -->
      <div id="testimonial-card-3" class="relative z-10 w-full max-w-sm lg:absolute lg:bottom-[8%] lg:right-[2%] xl:right-[4%] transition-opacity duration-500 ease-in-out group">
        <div class="transition-all duration-300 group-hover:border-white/20 group-hover:-translate-y-1 bg-[#000000] border-white/10 border rounded-[24px] mb-6 px-8 py-8 relative shadow-2xl">
          <div class="-bottom-3 transform transition-colors duration-300 group-hover:border-white/20 bg-[#000000] w-6 h-6 border-white/10 border-r border-b absolute left-8 rotate-45">
          </div>
          <p class="quote-text text-neutral-300 text-lg leading-relaxed relative z-10 font-sans" style="">"The interface is beautiful and the performance is unmatched. Sakura sets a new standard for enterprise software."</p>
        </div>
        <div class="flex items-center gap-4 pl-4">
          <div class="p-0.5 rounded-full bg-gradient-to-br from-white/20 to-transparent">
            <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=120&amp;h=120&amp;fit=crop" alt="User Avatar" class="avatar-img w-14 h-14 rounded-full object-cover border-2 border-[#050505]">
          </div>
          <div class="flex flex-col">
            <span class="author-name text-white font-medium text-base font-sans" style="">Ryan Park</span>
            <span class="author-role text-neutral-500 text-sm font-sans" style="">Design Lead at Airbnb</span>
          </div>
        </div>
      </div>

      <script>
        (function() {
                const testimonials = [
                    {
                        quote: "Sakura's intelligence layer automated 40% of our manual project tracking. The ROI on engineering focus time was immediate.",
                        name: "Elena Rodriguez",
                        role: "VP Engineering at NovaTech",
                        image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=120&h=120&fit=crop"
                    },
                    {
                        quote: "Finally, a platform that understands context. Sakura allows us to scale our product operations without adding administrative overhead.",
                        name: "David Chen",
                        role: "Director of Product at Nexus",
                        image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=120&h=120&fit=crop"
                    },
                    {
                        quote: "Scaling from 50 to 500 people was chaos until we deployed Sakura. It's the central nervous system our enterprise needed.",
                        name: "Sarah Miller",
                        role: "COO at Vertex Global",
                        image: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=120&h=120&fit=crop"
                    },
                    {
                        quote: "Sakura integrated seamlessly with our existing stack. The velocity gains were visible within the first sprint.",
                        name: "Marcus Thorne",
                        role: "Principal Architect at FlowState",
                        image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=120&h=120&fit=crop"
                    },
                    {
                        quote: "The automated workflow orchestration saved our team 20+ hours per week. It's not just a tool, it's a productivity multiplier.",
                        name: "Jessica Wu",
                        role: "Head of Operations at Stripe",
                        image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=120&h=120&fit=crop"
                    },
                    {
                        quote: "We replaced three different tools with Sakura. The unified data view has completely transformed our decision-making process.",
                        name: "Alex Thompson",
                        role: "CTO at Linear",
                        image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=120&h=120&fit=crop"
                    },
                    {
                        quote: "Deployment velocity increased by 3x after adopting Sakura. The insights it provides are invaluable for our growth.",
                        name: "Emily Clark",
                        role: "VP Product at Vercel",
                        image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=120&h=120&fit=crop"
                    },
                    {
                        quote: "The interface is beautiful and the performance is unmatched. Sakura sets a new standard for enterprise software.",
                        name: "Ryan Park",
                        role: "Design Lead at Airbnb",
                        image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=120&h=120&fit=crop"
                    }
                ];

                let currentIndex = 0;
                const batchSize = 4;

                function updateAllCards() {
                    // Fade out all cards
                    const cards = [];
                    for(let i=0; i<batchSize; i++) {
                        const card = document.getElementById(`testimonial-card-${i}`);
                        if(card) {
                            cards.push(card);
                            card.classList.remove('opacity-100');
                            card.classList.add('opacity-0');
                        }
                    }

                    // Wait for fade out, then swap data and fade in
                    setTimeout(() => {
                        currentIndex = (currentIndex + batchSize) % testimonials.length;

                        cards.forEach((card, i) => {
                            const dataIndex = (currentIndex + i) % testimonials.length;
                            const data = testimonials[dataIndex];

                            card.querySelector('.quote-text').textContent = `"${data.quote}"`;
                            card.querySelector('.author-name').textContent = data.name;
                            card.querySelector('.author-role').textContent = data.role;
                            card.querySelector('.avatar-img').src = data.image;

                            // Fade in
                            card.classList.remove('opacity-0');
                            card.classList.add('opacity-100');
                        });
                    }, 500);
                }

                // Start the simultaneous loop
                setInterval(updateAllCards, 5000);
            })();
      </script>
    </div>
  </div>

  <!-- Bottom Features -->
</section>