@extends('layouts.app')

@section('title', 'TemTechnik | ' . __('general.page_title_home'))

@push('styles')
<style>
    .partners-scroll-container {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }
    .partners-scroll-container::-webkit-scrollbar {
        display: none; /* Chrome, Safari and Opera */
    }
    .partners-scroll-container {
        scroll-behavior: smooth;
    }
    
    /* Pause animation on hover */
    .partners-scroll-container.paused {
        animation-play-state: paused !important;
    }
    
    /* Ensure animation can be paused */
    .animate-partners-marquee {
        animation-play-state: running;
    }
</style>
@endpush

@section('content')
{{-- Hero Section --}}
<div class="w-full bg-gray-900 flex items-center justify-center" style="height:680px;">
    @if(isset($heroImages) && $heroImages->count())
        <div x-data="{
            active: 0,
            direction: 1, // 1 for forward, -1 for backward
            heroImages: {{ $heroImages->toJson() }},
            count: {{ $heroImages->count() }},
            next() { 
                this.active += this.direction;
                if (this.active >= this.count - 1) {
                    this.direction = -1; // Reverse direction
                } else if (this.active <= 0) {
                    this.direction = 1; // Forward direction
                }
            },
            prev() { this.active = (this.active - 1 + this.count) % this.count },
            set(idx) { 
                this.active = idx;
                // Set direction based on position
                this.direction = idx >= this.count - 1 ? -1 : 1;
            },
            autoSlide: null,
            startAuto() {
                this.stopAuto();
                this.autoSlide = setInterval(() => this.next(), 2500);
            },
            stopAuto() {
                if (this.autoSlide) {
                    clearInterval(this.autoSlide);
                    this.autoSlide = null;
                }
            },
            init() { this.startAuto();
                document.addEventListener('visibilitychange', () => {
                    if (document.hidden) {
                        this.stopAuto();
                    } else {
                        this.startAuto();
                    }
                });
            }
        }"
        x-init="init()"
        class="relative w-full h-full flex items-center justify-center select-none group overflow-hidden"
        @mouseenter="stopAuto()"
        @mouseleave="startAuto()"
        @touchstart="stopAuto()"
        @touchend="startAuto()">
            <div class="flex w-full h-full transition-transform duration-700 ease-in-out" :style="'transform: translateX(-' + (active * 100) + '%)'">
                <template x-for="(img, idx) in heroImages" :key="idx">
                    <div class="w-full h-full flex-shrink-0">
                        <template x-if="img.link">
                            <a :href="img.link" target="_blank">
                                <picture>
                                    <source :srcset="img.mobile_image_path ? '/storage/' + img.mobile_image_path : '/storage/' + img.image_path" media="(max-width: 640px)">
                                    <img :src="'/storage/' + img.image_path" alt="" class="w-full h-full object-cover object-center rounded-none">
                                </picture>
                            </a>
                        </template>
                        <template x-if="!img.link">
                            <picture>
                                <source :srcset="img.mobile_image_path ? '/storage/' + img.mobile_image_path : '/storage/' + img.image_path" media="(max-width: 640px)">
                                <img :src="'/storage/' + img.image_path" alt="" class="w-full h-full object-cover object-center rounded-none">
                            </picture>
                        </template>
                    </div>
                </template>
            </div>
            <button @click="prev" class="absolute left-4 top-1/2 -translate-y-1/2 bg-gray-900 bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-80 z-10">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
            </button>
            <button @click="next" class="absolute right-4 top-1/2 -translate-y-1/2 bg-gray-900 bg-opacity-50 text-white rounded-full p-2 hover:bg-opacity-80 z-10">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
            </button>
            <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
                <template x-for="(img, idx) in heroImages" :key="idx">
                    <button @click="set(idx)" :class="{'bg-white': active === idx, 'bg-gray-400': active !== idx}" class="w-3 h-3 rounded-full mx-1 focus:outline-none transition-all duration-200"></button>
                </template>
            </div>
        </div>
    @else
        <img src="https://via.placeholder.com/1600x400?text=Hero+Image+Slider" alt="Hero Slider" class="w-full h-full object-cover object-center rounded-none" />
    @endif
</div>

{{-- Hero Buttons Section --}}
<div class="bg-white dark:bg-gray-900 py-8">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <a href="{{ route('products.index') }}" class="inline-flex items-center px-8 py-3 bg-primary hover:bg-accent text-white font-semibold rounded-lg transition-colors duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
                {{ __('general.shop_now') }}
            </a>
            <a href="{{ route('contact') }}" class="inline-flex items-center px-8 py-3 bg-transparent text-primary border-2 border-primary hover:bg-primary hover:text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                </svg>
                {{ __('general.contact_us') }}
            </a>
        </div>
    </div>
</div>

{{-- Partners Marquee --}}
@if($partnersMarquee->isNotEmpty())
    <div class="bg-white dark:bg-gray-800 py-8 w-full">
        <div class="relative w-full">
            <button id="partners-left-btn" class="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full p-2 shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-110" aria-label="Scroll left">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            <button id="partners-right-btn" class="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full p-2 shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-110" aria-label="Scroll right">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
            <div class="relative overflow-hidden w-full">
                <div id="partners-marquee-wrapper" class="overflow-x-auto no-scrollbar scroll-smooth">
                    <div id="partners-marquee" class="flex gap-8 animate-partners-marquee w-max px-16 md:px-24 lg:px-32">
                        @for ($i = 0; $i < 6; $i++)
                            @foreach ($partnersMarquee as $partner)
                                @if($partner->logo)
                                    <div class="inline-block flex-shrink-0">
                                        <a href="{{ $partner->url ?? '#' }}" target="_blank" rel="noopener" class="block">
                                            <img src="{{ asset('storage/' . $partner->logo) }}" alt="{{ $partner->name }}" class="h-24 md:h-32 w-auto object-contain hover:scale-105 transition-transform duration-200">
                                        </a>
                                    </div>
                                @endif
                            @endforeach
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

{{-- Recently Added Products Section --}}
@if(isset($recentProducts) && $recentProducts->count())
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 mt-0">
    <section id="recent-products">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-3xl font-extrabold text-primary tracking-tight">{{ __('general.recently_added') }}</h2>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-10">
            @foreach($recentProducts as $product)
                <x-product-card :product="$product" />
            @endforeach
        </div>
    </section>
</div>
@elseif(isset($recentProducts))
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 mt-0">
    <section id="recent-products">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-3xl font-extrabold text-primary tracking-tight">{{ __('general.recently_added') }}</h2>
        </div>
        <div class="text-center text-gray-500 dark:text-gray-400">{{ __('general.no_recent_products') }}</div>
    </section>
</div>
@endif

{{-- Featured Products Section --}}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 mt-0">
    <section id="featured-products">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-3xl font-extrabold text-primary tracking-tight">{{ __('general.featured_products') }}</h2>
            <a href="{{ route('products.index') }}" class="text-primary hover:text-accent font-semibold">
                {{ __('general.view_all') }} &rarr;
            </a>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-6 gap-y-10">
            @forelse($featuredProducts as $product)
                <x-product-card :product="$product" />
            @empty
                <div class="col-span-4 text-center text-gray-500 dark:text-gray-400">{{ __('general.no_featured_products') }}</div>
            @endforelse
        </div>
    </section>
</div>

{{-- Brands Marquee --}}
@if($brands->isNotEmpty())
    <div class="bg-white dark:bg-gray-800 py-12 w-full mb-0">
        <div class="relative w-full">
            <button id="brands-left-btn" class="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full p-2 shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-110" aria-label="Scroll left">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            <button id="brands-right-btn" class="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full p-2 shadow-lg hover:shadow-xl transition-all duration-200 transform hover:scale-110" aria-label="Scroll right">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
            <div class="relative overflow-hidden w-full">
                <div id="brands-marquee-wrapper" class="overflow-x-auto no-scrollbar scroll-smooth">
                    <div id="brands-marquee" class="flex gap-8 animate-brands-marquee w-max px-16 md:px-24 lg:px-32">
                        @for ($i = 0; $i < 6; $i++)
                            @foreach ($brands as $brand)
                                @if($brand->logo)
                                    <div class="inline-block flex-shrink-0">
                                        <img src="{{ asset('storage/' . $brand->logo) }}" alt="{{ $brand->name }}" class="h-24 md:h-32 w-auto object-contain">
                                    </div>
                                @endif
                            @endforeach
                        @endfor
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Testimonials Section --}}
    <div class="relative w-full bg-gray-100 dark:bg-gray-900 py-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl md:text-4xl font-extrabold text-center mb-10 text-orange-500 dark:text-orange-400 drop-shadow-lg">{{ __('general.what_people_think') }}</h2>
            <div class="relative">
                <button id="testimonial-left" class="absolute left-2 top-1/2 -translate-y-1/2 z-10 p-0 m-0 bg-transparent border-none outline-none" aria-label="Scroll left">
                    <svg class="w-10 h-10 text-primary" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
                </button>
                <button id="testimonial-right" class="absolute right-2 top-1/2 -translate-y-1/2 z-10 p-0 m-0 bg-transparent border-none outline-none" aria-label="Scroll right">
                    <svg class="w-10 h-10 text-primary" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                </button>
                <div class="relative overflow-hidden">
                    <div id="testimonial-marquee-wrapper" class="overflow-x-auto no-scrollbar scroll-smooth">
                        <div id="testimonial-marquee" class="flex gap-8 animate-testimonial-marquee w-max px-16 md:px-24 lg:px-32">
                            @for ($i = 0; $i < 8; $i++)
                                <div class="min-w-[340px] max-w-sm flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-gray-900 dark:text-white flex flex-col justify-between">
                                    <p class="italic mb-6">"{{ __('general.testimonial_1') }}"</p>
                                    <div><span class="font-bold text-orange-500">{{ __('general.testimonial_name_1') }}</span></div>
                                </div>
                                <div class="min-w-[340px] max-w-sm flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-gray-900 dark:text-white flex flex-col justify-between">
                                    <p class="italic mb-6">"{{ __('general.testimonial_2') }}"</p>
                                    <div><span class="font-bold text-orange-500">{{ __('general.testimonial_name_2') }}</span></div>
                                </div>
                                <div class="min-w-[340px] max-w-sm flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-gray-900 dark:text-white flex flex-col justify-between">
                                    <p class="italic mb-6">"{{ __('general.testimonial_3') }}"</p>
                                    <div><span class="font-bold text-orange-500">{{ __('general.testimonial_name_3') }}</span></div>
                                </div>
                                <div class="min-w-[340px] max-w-sm flex-1 bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 text-gray-900 dark:text-white flex flex-col justify-between">
                                    <p class="italic mb-6">"{{ __('general.testimonial_4') }}"</p>
                                    <div><span class="font-bold text-orange-500">{{ __('general.testimonial_name_4') }}</span></div>
                                </div>
                            @endfor
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Why Choose Us Section --}}
    <div class="bg-white dark:bg-gray-900 w-full py-16">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl md:text-4xl font-extrabold text-center mb-4 text-primary">{{ __('general.why_shop_with_us') }}</h2>
            <p class="text-center text-gray-500 dark:text-gray-300 mb-12 max-w-2xl mx-auto">{{ __('general.why_shop_with_us_desc') }}</p>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <div class="flex items-start gap-4">
                    <span class="mt-1 text-green-400"><svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></span>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{{ __('general.feature_fast_delivery') }}</h3>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.feature_fast_delivery_desc') }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="mt-1 text-green-400"><svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></span>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{{ __('general.feature_quality_products') }}</h3>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.feature_quality_products_desc') }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="mt-1 text-green-400"><svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></span>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{{ __('general.feature_secure_payments') }}</h3>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.feature_secure_payments_desc') }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="mt-1 text-green-400"><svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></span>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{{ __('general.feature_support') }}</h3>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.feature_support_desc') }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="mt-1 text-green-400"><svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></span>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{{ __('general.feature_best_prices') }}</h3>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.feature_best_prices_desc') }}</p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="mt-1 text-green-400"><svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg></span>
                    <div>
                        <h3 class="font-bold text-lg text-gray-900 dark:text-white mb-1">{{ __('general.feature_easy_returns') }}</h3>
                        <p class="text-gray-500 dark:text-gray-400">{{ __('general.feature_easy_returns_desc') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif
@endsection

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

/* Partners Marquee Animation */
@keyframes partners-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-partners-marquee {
  animation: partners-marquee 150s linear infinite;
  will-change: transform;
}

/* Brands Marquee Animation */
@keyframes brands-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-brands-marquee {
  animation: brands-marquee 150s linear infinite;
  will-change: transform;
}

/* Testimonials Marquee Animation */
@keyframes testimonial-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-testimonial-marquee {
  animation: testimonial-marquee 40s linear infinite;
  will-change: transform;
}

/* Hover pause for all marquees */
#partners-marquee-wrapper:hover .animate-partners-marquee,
#brands-marquee-wrapper:hover .animate-brands-marquee,
#testimonial-marquee-wrapper:hover .animate-testimonial-marquee {
  animation-play-state: paused;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
    function addTouchScroll(wrapper, marquee, leftBtn, rightBtn) {
        if (!wrapper || !marquee) return;
        
        let startX = 0;
        let currentX =0
        let isDragging = false;
        let startScrollLeft = 0;
        
        wrapper.addEventListener('touchstart', function(e) {
            startX = e.touches[0].clientX;
            startScrollLeft = wrapper.scrollLeft;
            isDragging = true;
            marquee.style.animationPlayState = 'paused';
        });
        
        wrapper.addEventListener('touchmove', function(e) {
            if (!isDragging) return;
            e.preventDefault();
            currentX = e.touches[0].clientX;
            const diff = startX - currentX;
            wrapper.scrollLeft = startScrollLeft + diff;
        });
        
        wrapper.addEventListener('touchend', function(e) {
            isDragging = false;
            setTimeout(() => { marquee.style.animationPlayState = 'running'; }, 1000);
        });
        
        wrapper.addEventListener('mousedown', function(e) {
            startX = e.clientX;
            startScrollLeft = wrapper.scrollLeft;
            isDragging = true;
            marquee.style.animationPlayState = 'paused';
        });
        
        wrapper.addEventListener('mousemove', function(e) {
            if (!isDragging) return;
            e.preventDefault();
            currentX = e.clientX;
            const diff = startX - currentX;
            wrapper.scrollLeft = startScrollLeft + diff;
        });
        
        wrapper.addEventListener('mouseup', function(e) {
            isDragging = false;
            setTimeout(() => { marquee.style.animationPlayState = 'running'; }, 1000);
        });
        
        wrapper.addEventListener('mouseleave', function(e) {
            isDragging = false;
            setTimeout(() => { marquee.style.animationPlayState = 'running'; }, 1000);
        });
        
        if (leftBtn) {
            leftBtn.addEventListener('click', function(e) {
                e.preventDefault();
                marquee.style.animationPlayState = 'paused';
                
                // If we're at the beginning, scroll to a position where left scrolling works
                if (wrapper.scrollLeft <= 0) {
                    // Scroll to the middle of the duplicated content for seamless left navigation
                    wrapper.scrollLeft = wrapper.scrollWidth / 2;
                }
                
                wrapper.scrollBy({ left: -380, behavior: 'smooth' });
                
                setTimeout(() => { marquee.style.animationPlayState = 'running'; }, 2000);
            });
        }
        
        if (rightBtn) {
            rightBtn.addEventListener('click', function(e) {
                e.preventDefault();
                marquee.style.animationPlayState = 'paused';
                
                // If we're near the end, scroll to a position where right scrolling works
                if (wrapper.scrollLeft >= wrapper.scrollWidth - wrapper.clientWidth - 100) {
                    // Scroll to the middle of the duplicated content for seamless right navigation
                    wrapper.scrollLeft = wrapper.scrollWidth / 2;
                }
                
                wrapper.scrollBy({ left: 380, behavior: 'smooth' });
                
                setTimeout(() => { marquee.style.animationPlayState = 'running'; }, 2000);
            });
        }
    }
    
    const partnersWrapper = document.getElementById('partners-marquee-wrapper');
    const partnersMarquee = document.getElementById('partners-marquee');
    const partnersLeftBtn = document.getElementById('partners-left-btn');
    const partnersRightBtn = document.getElementById('partners-right-btn');
    
    addTouchScroll(partnersWrapper, partnersMarquee, partnersLeftBtn, partnersRightBtn);
    
    // Initialize partners carousel properly after content loads
    if (partnersWrapper) {
        // Wait for content to be fully rendered
        setTimeout(() => {
            if (partnersWrapper.scrollWidth > partnersWrapper.clientWidth) {
                partnersWrapper.scrollLeft = partnersWrapper.scrollWidth / 2;
            }
            console.log('Partners - scrollWidth:', partnersWrapper.scrollWidth, 'clientWidth:', partnersWrapper.clientWidth, 'Content items:', {{ $partnersMarquee->count() }});
        }, 500);
    }
    
    const brandsWrapper = document.getElementById('brands-marquee-wrapper');
    const brandsMarquee = document.getElementById('brands-marquee');
    const brandsLeftBtn = document.getElementById('brands-left-btn');
    const brandsRightBtn = document.getElementById('brands-right-btn');
    
    addTouchScroll(brandsWrapper, brandsMarquee, brandsLeftBtn, brandsRightBtn);
    
    // Initialize brands carousel properly after content loads
    if (brandsWrapper) {
        // Wait for content to be fully rendered
        setTimeout(() => {
            if (brandsWrapper.scrollWidth > brandsWrapper.clientWidth) {
                brandsWrapper.scrollLeft = brandsWrapper.scrollWidth / 2;
            }
            console.log('Brands - scrollWidth:', brandsWrapper.scrollWidth, 'clientWidth:', brandsWrapper.clientWidth, 'Content items:', {{ $brands->count() }});
        }, 500);
    }
    
    const testimonialWrapper = document.getElementById('testimonial-marquee-wrapper');
    const testimonialMarquee = document.getElementById('testimonial-marquee');
    const testimonialLeftBtn = document.getElementById('testimonial-left');
    const testimonialRightBtn = document.getElementById('testimonial-right');
    
    addTouchScroll(testimonialWrapper, testimonialMarquee, testimonialLeftBtn, testimonialRightBtn);
    
    // Initialize testimonials carousel properly after content loads
    if (testimonialWrapper) {
        // Wait for content to be fully rendered
        setTimeout(() => {
            if (testimonialWrapper.scrollWidth > testimonialWrapper.clientWidth) {
                testimonialWrapper.scrollLeft = testimonialWrapper.scrollWidth / 2;
            }
            console.log('Testimonials - scrollWidth:', testimonialWrapper.scrollWidth, 'clientWidth:', testimonialWrapper.clientWidth, 'Content items: 4');
        }, 500);
    }
});
</script>