@php
    // Auto-discover partner logos from public/assets/img/partners directory
    $dir = public_path('assets/img/partners');
    $extensions = ['jpg','jpeg','png','webp','gif','avif','svg'];
    $logos = [];
    
    if (is_dir($dir)) {
        foreach (scandir($dir) as $file) {
            if ($file === '.' || $file === '..') continue;
            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
            if (in_array($ext, $extensions, true)) {
                $name = pathinfo($file, PATHINFO_FILENAME);
                $logos[] = [
                    'src' => asset('assets/img/partners/' . $file),
                    'name' => ucwords(str_replace(['-', '_'], ' ', $name)),
                    'alt' => ucwords(str_replace(['-', '_'], ' ', $name)) . ' Logo'
                ];
            }
        }
        // Sort logos alphabetically by name
        usort($logos, fn($a, $b) => strcmp($a['name'], $b['name']));
    }
    
    // Fallback demo logos if no images found
    if (empty($logos)) {
        $demoLogos = [
            'blockchain-tech', 'crypto-solutions', 'gaming-partners', 'nft-marketplace', 
            'stellar-network', 'defi-protocols', 'web3-ventures', 'smart-contracts',
            'token-exchange', 'metaverse-labs', 'digital-assets', 'innovation-hub'
        ];
        
        foreach ($demoLogos as $demo) {
            $logos[] = [
                'src' => 'https://via.placeholder.com/160x80/1f2937/ffffff?text=' . urlencode(str_replace('-', ' ', $demo)),
                'name' => ucwords(str_replace('-', ' ', $demo)),
                'alt' => ucwords(str_replace('-', ' ', $demo)) . ' Logo'
            ];
        }
    }
    
    // Duplicate logos for seamless infinite scroll (minimum 2 sets)
    $duplicatedLogos = array_merge($logos, $logos);
    if (count($logos) < 6) {
        $duplicatedLogos = array_merge($duplicatedLogos, $logos);
    }
@endphp

<section
    x-data="partnerLogos(@js($duplicatedLogos))"
    x-init="init()"
    role="region"
    aria-label="Our Partners"
    class="relative isolate overflow-hidden bg-[#0B0B13] text-white">
    
    <!-- Decorative background elements -->
    <div class="pointer-events-none absolute -top-24 -left-24 h-96 w-96 rounded-full bg-cyan-700/10 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 -right-24 h-96 w-96 rounded-full bg-sky-700/10 blur-3xl"></div>
    
    <div class="mx-auto max-w-7xl px-6 lg:px-10 pt-16 pb-16 lg:pt-20 lg:pb-24">
        <!-- Header -->
        <header data-header class="text-center max-w-3xl mx-auto mb-12 lg:mb-16">
            <p class="inline-flex items-center gap-2 text-xs uppercase tracking-widest text-white/70">
                <span class="inline-block h-2 w-2 rounded-full bg-cyan-400"></span>
                Trusted Partners
            </p>
            <h2 class="mt-2 font-heading text-3xl sm:text-4xl lg:text-5xl font-extrabold leading-tight text-white">
                Powering the <span class="text-glow text-accent-blue-primary">future together</span>
            </h2>
            <p class="mt-4 text-white/70 text-lg">
                Working with industry leaders to build the next generation of blockchain gaming experiences.
            </p>
        </header>

        <!-- Logo Carousel Container -->
        <div class="relative" data-carousel>
            <!-- Fade Gradients -->
            <div class="absolute left-0 top-0 bottom-0 w-12 lg:w-24 bg-gradient-to-r from-black to-transparent z-10 pointer-events-none"></div>
            <div class="absolute right-0 top-0 bottom-0 w-12 lg:w-24 bg-gradient-to-l from-black to-transparent z-10 pointer-events-none"></div>
            
            <!-- Scrolling Container -->
            <div 
                x-ref="scroller"
                @mouseenter="pause()"
                @mouseleave="play()"
                class="flex items-center gap-8 lg:gap-12 will-change-transform"
                :style="`transform: translateX(${offset}px)`">
                
                <template x-for="(logo, i) in logos" :key="'logo-'+i">
                    <div 
                        data-logo
                        class="flex-shrink-0 group"
                        :class="i < originalCount ? 'opacity-100' : 'opacity-100'">
                        <div class="relative p-4 lg:p-6 rounded-2xl bg-white/5 backdrop-blur-sm ring-1 ring-white/10 hover:bg-white/10 hover:ring-white/20 transition-all duration-300 group-hover:scale-105">
                            <!-- Logo container with consistent sizing -->
                            <div class="w-32 h-16 lg:w-40 lg:h-20 flex items-center justify-center">
                                <img 
                                    :src="logo.src" 
                                    :alt="logo.alt"
                                    class="max-w-full max-h-full object-contain filter brightness-90 group-hover:brightness-110 transition-all duration-300"
                                    loading="lazy"
                                    decoding="async">
                            </div>
                            <!-- Partner name (optional, hidden by default) -->
                            <div class="mt-2 text-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <p class="text-xs text-white/60" x-text="logo.name"></p>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- Stats/Info (optional) -->
        <div class="mt-12 lg:mt-16 text-center">
            <div class="inline-flex items-center gap-6 px-6 py-3 rounded-2xl bg-white/5 backdrop-blur-xl ring-1 ring-white/10">
                <div class="text-center">
                    <div class="text-2xl font-bold text-white" x-text="originalCount"></div>
                    <div class="text-xs text-white/60">Partners</div>
                </div>
                <div class="w-px h-8 bg-white/10"></div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-white">50+</div>
                    <div class="text-xs text-white/60">Integrations</div>
                </div>
                <div class="w-px h-8 bg-white/10"></div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-white">24/7</div>
                    <div class="text-xs text-white/60">Support</div>
                </div>
            </div>
        </div>
    </div>
</section>

@once
    @push('scripts')
        <script>
            function partnerLogos(logos) {
                return {
                    logos: logos || [],
                    originalCount: Math.floor((logos || []).length / 2),
                    offset: 0,
                    speed: 0.5, // pixels per frame
                    isPlaying: true,
                    animationFrame: null,
                    containerWidth: 0,
                    logoWidth: 192, // approximate width of each logo container (w-40 + gap)
                    reduced: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches,

                    init() {
                        this.$nextTick(() => {
                            this.calculateDimensions();
                            this.setupGsap();
                            this.revealHeader();
                            this.staggerLogos();
                            if (!this.reduced) {
                                this.startAnimation();
                            }
                            window.addEventListener('resize', () => this.calculateDimensions());
                        });
                    },

                    calculateDimensions() {
                        const scroller = this.$refs.scroller;
                        if (scroller) {
                            this.containerWidth = scroller.scrollWidth / 2; // Half because we duplicated logos
                        }
                    },

                    startAnimation() {
                        if (this.animationFrame || this.reduced) return;
                        
                        const animate = () => {
                            if (this.isPlaying) {
                                this.offset -= this.speed;
                                
                                // Reset when we've scrolled through one full set
                                if (Math.abs(this.offset) >= this.containerWidth) {
                                    this.offset = 0;
                                }
                            }
                            this.animationFrame = requestAnimationFrame(animate);
                        };
                        
                        animate();
                    },

                    play() {
                        this.isPlaying = true;
                    },

                    pause() {
                        this.isPlaying = false;
                    },

                    setupGsap() {
                        const G = window.gsap;
                        const ST = window.ScrollTrigger;
                        if (!G || this.reduced) return;

                        // Parallax effect on scroll
                        if (ST) {
                            const carousel = this.$root.querySelector('[data-carousel]');
                            if (carousel) {
                                G.to(carousel, {
                                    yPercent: -5,
                                    ease: 'none',
                                    scrollTrigger: {
                                        trigger: carousel,
                                        start: 'top bottom',
                                        end: 'bottom top',
                                        scrub: true
                                    }
                                });
                            }
                        }

                        // Cleanup
                        window.addEventListener('unload', () => {
                            if (this.animationFrame) {
                                cancelAnimationFrame(this.animationFrame);
                            }
                            if (ST) {
                                ST.getAll().forEach(t => t.kill());
                            }
                        });
                    },

                    revealHeader() {
                        const G = window.gsap;
                        if (!G || this.reduced) return;
                        
                        const header = this.$root.querySelector('[data-header]');
                        if (!header) return;
                        
                        G.set(header.children, { y: 24, opacity: 0 });
                        G.to(header.children, { 
                            y: 0, 
                            opacity: 1, 
                            duration: 0.6, 
                            stagger: 0.1, 
                            ease: 'power3.out',
                            delay: 0.2
                        });
                    },

                    staggerLogos() {
                        const G = window.gsap;
                        if (!G || this.reduced) return;
                        
                        const logoElements = this.$root.querySelectorAll('[data-logo]');
                        
                        G.set(logoElements, { y: 20, opacity: 0 });
                        
                        // Only animate the first set of logos to avoid duplicates
                        const firstSet = Array.from(logoElements).slice(0, this.originalCount);
                        
                        G.to(firstSet, {
                            y: 0,
                            opacity: 1,
                            duration: 0.5,
                            stagger: 0.05,
                            ease: 'power2.out',
                            delay: 0.8
                        });
                        
                        // Set the duplicated logos to be visible immediately after first set animation
                        setTimeout(() => {
                            const duplicatedSet = Array.from(logoElements).slice(this.originalCount);
                            G.set(duplicatedSet, { y: 0, opacity: 1 });
                        }, 800 + (this.originalCount * 50) + 200);
                    }
                }
            }
        </script>
    @endpush
@endonce