<?php
// Real-world dummy data for your 5 testimonials
$testimonials = [
    [
        "quote" => "What used to take us 4 months to develop now takes 4 weeks—and the updates happen in real-time.",
        "name" => "Sarah Akorede",
        "role" => "Product Lead, NexForge",
        "brand" => "NexForge",
        "image" => "https://i.pinimg.com/736x/e8/80/0c/e8800c92d58bfd1189b03895932e3bb0.jpg?auto=format&fit=crop&q=80"
    ],
    [
        "quote" => "Having a dedicated tech team for a monthly fee is the smartest financial move we've ever made.",
        "name" => "David Chen",
        "role" => "CEO, Flecible",
        "brand" => "Flecible",
        "image" => "https://i.pinimg.com/736x/ab/c0/e5/abc0e5689b60176d702a0563b7e2e18b.jpg?auto=format&fit=crop&q=80"
    ],
    [
        "quote" => "Nesvra didn't just build our app; they engineered our entire growth strategy for the Dubai market.",
        "name" => "Abu Imam",
        "role" => "Director, Leaside Estate",
        "brand" => "Leaside",
        "image" => "https://i.pinimg.com/736x/4a/e9/e3/4ae9e3b85f79f3169dba49259fe897fe.jpg?auto=format&fit=crop&q=80"
    ],
    [
        "quote" => "The level of UI/UX fidelity delivered month after month is something we couldn't find with freelancers.",
        "name" => "Amara Okafor",
        "role" => "Founder, AELO",
        "brand" => "AELO",
        "image" => "https://i.pinimg.com/736x/bb/62/06/bb6206a0eface9a2e80c33a1f4b02eb9.jpg?auto=format&fit=crop&q=80"
    ],
    [
        "quote" => "Scaling our fintech infrastructure became seamless once we outsourced the heavy lifting to Nesvra.",
        "name" => "Dick Kaljee",
        "role" => "MD, Finculum",
        "brand" => "Finculum",
        "image" => "https://i.pinimg.com/736x/a7/78/1b/a7781b8c72004ae4f9c014cfeeffd005.jpg?auto=format&fit=crop&q=80"
    ]
];
?>

<section class="bg-zinc-50 py-24 px-6 md:px-8 md:py-32 overflow-hidden">
    <div class="max-w-8xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 items-start">
            
            <div class="lg:col-span-4 space-y-8" data-aos="fade-right">
                <div>

                 <span class="font-mono text-[11px] font-bold tracking-[0.3em] text-brandOrange uppercase block mb-6"  data-aos="fade-right" data-aos-duration="900" data-aos-delay="100">Trusted by 50+ Enterprises</span>
                    
                    <h2 class="text-dark text-5xl  font-[400] tracking-tighter leading-[1.05] mt-4 max-w-2xl">
                        Why founders and 
                        CEOs <span class="text-brandOrange">trust nesvra?</span>
                    </h2>
                    <p class="text-soft text-base font-mono tracking-tight leading-relaxed max-w-md mt-3">
                        Discover how Nesvra has transformed the way innovative companies approach their technology needs.
                    </p>
                </div>
                <div class="pt-8">
                    <p class="text-gray-400 text-sm font-mono tracking-tighter">
                        <span id="currentIndex" class="text-black font-bold">01</span> / 05
                    </p>
                </div>

                <div class="flex items-center gap-4 pt-12">
                    <button id="prevBtn" class="w-14 h-14 rounded-full border border-gray-200 flex items-center justify-center text-gray-400 hover:bg-gray-50 hover:text-black transition-all active:scale-90">
                        <i class="ri-arrow-left-line text-xl"></i>
                    </button>
                    <button id="nextBtn" class="w-14 h-14 rounded-full bg-black flex items-center justify-center text-white hover:scale-105 transition-all shadow-xl active:scale-90">
                        <i class="ri-arrow-right-line text-xl"></i>
                    </button>
                </div>

                
            </div>

            <div id="sliderContainer" class="lg:col-span-8 overflow-x-auto no-scrollbar flex gap-6 snap-x snap-mandatory pb-10 scroll-smooth">
                
                <?php foreach ($testimonials as $index => $t): ?>
                <div class="min-w-[320px] md:min-w-[400px] h-[520px] rounded-[32px] relative overflow-hidden snap-start group cursor-pointer border border-gray-100">
                    <img src="<?php echo $t['image']; ?>" 
                         class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" 
                         alt="<?php echo $t['name']; ?>">
                    
                    <div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent"></div>

                    <div class="absolute top-6 right-6">
                        <span class="px-4 py-1.5 bg-white/10 backdrop-blur-md border border-white/20 rounded-full text-white text-[10px] font-bold uppercase tracking-widest">
                            <?php echo $t['brand']; ?>
                        </span>
                    </div>

                    <div class="absolute bottom-8 left-6 right-6">
                        <p class="text-white text-xl font-[400] tracking-tight leading-snug mb-6">
                            "<?php echo $t['quote']; ?>"
                        </p>
                        <div class="space-y-1">
                            <h5 class="text-white text-base font-bold"><?php echo $t['name']; ?></h5>
                            <p class="text-white/50 text-[10px] uppercase tracking-widest font-mono"><?php echo $t['role']; ?></p>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>

            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const slider = document.getElementById('sliderContainer');
    const nextBtn = document.getElementById('nextBtn');
    const prevBtn = document.getElementById('prevBtn');
    const indexLabel = document.getElementById('currentIndex');
    
    const scrollAmount = 424; // Card width (400) + gap (24)

    const updateIndex = () => {
        const index = Math.round(slider.scrollLeft / scrollAmount) + 1;
        indexLabel.innerText = index.toString().padStart(2, '0');
    };

    // Manual Navigation
    nextBtn.addEventListener('click', () => {
        if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth) {
            slider.scrollTo({ left: 0, behavior: 'smooth' });
        } else {
            slider.scrollBy({ left: scrollAmount, behavior: 'smooth' });
        }
    });

    prevBtn.addEventListener('click', () => {
        slider.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
    });

    // Auto-play Logic (3 Seconds)
    let autoPlay = setInterval(() => {
        nextBtn.click();
    }, 3000);

    // Stop auto-play on hover so users can read
    slider.addEventListener('mouseenter', () => clearInterval(autoPlay));
    slider.addEventListener('mouseleave', () => {
        autoPlay = setInterval(() => { nextBtn.click(); }, 3000);
    });

    slider.addEventListener('scroll', updateIndex);
});
</script>

<style>
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>