<?php
$brands = [
    "Monicard", "Qantrans", "Aelo Foods", "HaloSim",
    "Fintech Partner"
];

// Helper to render the duplicated marquee track for seamless looping
function renderMarqueeTrack($brands, $direction = 'forward', $speed = '40s') {
    $animationClass = ($direction === 'reverse') ? 'animate-marquee-reverse' : 'animate-marquee-forward';
    // Duplicate the array to ensure no gap during the loop
    $displayBrands = array_merge($brands, $brands);
    ?>
    <div class="marquee-row flex overflow-hidden gap-6 select-none group">
        <div class="marquee-track flex gap-6 shrink-0 min-w-full <?php echo $animationClass; ?>" style="--speed: <?php echo $speed; ?>">
            <?php foreach ($displayBrands as $brand): ?>
                <div class="nex-logo-tile shrink-0 flex items-center justify-center px-8 h-[60px] bg-white border border-gray-100 rounded-xl transition-all duration-700 hover:border-brandOrange hover:-translate-y-1 hover:shadow-xl hover:shadow-black/5 cursor-pointer">
                    <span class="text-lg font-bold uppercase tracking-tighter text-dark/30 transition-colors duration-400 group-hover:text-dark">
                        <?php echo $brand; ?>
                    </span>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
    <?php
}
?>

<section class="bg-white py-24  overflow-hidden relative">
    <!-- Grid Background -->
    <div class="absolute inset-0 z-0 opacity-[0.06] pointer-events-none" style="background-image: radial-gradient(<?= $nexDark ?? '#000' ?> 1px, transparent 1px); background-size: 40px 40px;"></div>

    <!-- Blur Orbs -->
    <div class="absolute -top-24 -right-24 w-[500px] h-[500px] bg-brandOrange/5 blur-[120px] rounded-full pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-6 relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
            
            <!-- Left Content -->
            <div class="lg:col-span-5 space-y-8" data-aos="fade-right">
                <div class="space-y-6">
                    <div class="inline-flex px-4 py-1.5 rounded-full border border-gray-100 bg-white/80 backdrop-blur-sm shadow-sm">
                        <span class="text-[10px] uppercase tracking-[0.4em] text-dark font-semibold">
                            Verified Network
                        </span>
                    </div>
                    <h2 class="text-4xl md:text-5xl font-[400] tracking-tighter text-dark leading-[1.9]">
                        Our Valuable <br /> <span class="text-brandOrange italic">Partners.</span>
                    </h2>
                    <p class="text-soft text-lg font-[400] leading-relaxed max-w-md">
                        Strategic infrastructure for product-to-market excellence. We build the systems that power these conversations.
                    </p>
                </div>

                <div class="pt-4">
                    <a href="#" class="inline-flex items-center gap-3 text-xs uppercase font-black tracking-widest text-dark border-b-2 border-brandOrange pb-1 hover:text-brandOrange transition-all">
                        Get Started
                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </a>
                </div>
            </div>

            <!-- Right Marquee Rows -->
            <div class="lg:col-span-7 relative" data-aos="fade-left">
                <!-- Fade Overlays -->
                <div class="absolute inset-y-0 left-0 w-24 md:w-44 bg-gradient-to-r from-white via-white/40 to-transparent z-20 pointer-events-none"></div>
                <div class="absolute inset-y-0 right-0 w-24 md:w-44 bg-gradient-to-l from-white via-white/40 to-transparent z-20 pointer-events-none"></div>

                <div class="space-y-8">
                    <?php renderMarqueeTrack($brands, 'forward', '35s'); ?>
                    <?php renderMarqueeTrack($brands, 'reverse', '50s'); ?>
                    <?php renderMarqueeTrack($brands, 'forward', '45s'); ?>
                </div>
            </div>

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

<style>
    /* CSS Animation Engine */
    @keyframes marqueeForward {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    @keyframes marqueeReverse {
        0% { transform: translateX(-50%); }
        100% { transform: translateX(0); }
    }

    .animate-marquee-forward {
        animation: marqueeForward var(--speed) linear infinite;
    }

    .animate-marquee-reverse {
        animation: marqueeReverse var(--speed) linear infinite;
    }

    /* Pause logic on hover */
    .marquee-row:hover .marquee-track {
        animation-play-state: paused;
    }

    /* Logo Tile Specifics */
    .nex-logo-tile span {
        -webkit-text-stroke: 1px transparent;
    }
    
    .nex-logo-tile:hover span {
        color: var(--dark, #000);
    }
</style>