@extends('layouts.app')

@section('content')
    <section class="relative h-[600px] overflow-hidden" x-data="slider()">
        <template x-for="(slide, index) in slides" :key="index">
            <div x-show="active === index" x-transition:enter="transition ease-out duration-1000" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="absolute inset-0">
                <img :src="slide.image" alt="Slide" class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-black/40 flex items-center justify-center">
                    <div class="text-center text-white px-4" data-aos="fade-up">
                        <h2 class="text-4xl md:text-6xl font-bold" x-text="slide.title"></h2>
                        <p class="mt-4 text-lg md:text-2xl" x-text="slide.subtitle"></p>
                        <a :href="slide.button_link" class="mt-6 inline-block bg-primary-500 hover:bg-primary-600 text-white font-semibold py-3 px-8 rounded-md transition">
                            <span x-text="slide.button_text || 'Shop Now'"></span>
                        </a>
                    </div>
                </div>
            </div>
        </template>
        <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
            <template x-for="(slide, index) in slides" :key="index">
                <button @click="active = index" class="w-3 h-3 rounded-full" :class="active === index ? 'bg-white' : 'bg-white/50'"></button>
            </template>
        </div>
    </section>

    <section class="py-12 container mx-auto px-4">
        <h2 class="text-3xl font-bold text-center mb-8">{{ __('Categories') }}</h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            @foreach($categories as $category)
                <a href="#" class="group text-center" data-aos="zoom-in">
                    <div class="w-24 h-24 mx-auto rounded-full overflow-hidden border-2 border-primary-200 group-hover:border-primary-500 transition">
                        <img src="{{ asset($category->image ?? 'images/default-category.png') }}" alt="{{ $category->name }}" class="w-full h-full object-cover">
                    </div>
                    <p class="mt-2 font-medium">{{ $category->name }}</p>
                </a>
            @endforeach
        </div>
    </section>

    @if($flashSale1)
        <section class="py-12" style="background-color: {{ $flashSale1->background_color ?? '#FF004D' }}">
            <div class="container mx-auto px-4 text-white">
                <div class="flex flex-wrap items-center justify-between mb-8">
                    <h2 class="text-3xl font-bold">{{ $flashSale1->title }}</h2>
                    <div id="countdown" class="text-2xl font-mono" data-end="{{ $flashSale1->end_time->timestamp }}"></div>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                    @foreach($flashSaleProducts as $product)
                        <x-product-card :product="$product" />
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <section class="py-12 container mx-auto px-4" x-data="{ tab: 'new' }">
        <h2 class="text-3xl font-bold text-center mb-8">{{ __('Featured Products') }}</h2>
        <div class="flex justify-center space-x-4 mb-8">
            <button @click="tab = 'new'" :class="{'bg-primary-500 text-white': tab === 'new', 'bg-gray-200 dark:bg-gray-700': tab !== 'new'}" class="px-4 py-2 rounded-md transition">{{ __('New Arrival') }}</button>
            <button @click="tab = 'best'" :class="{'bg-primary-500 text-white': tab === 'best', 'bg-gray-200 dark:bg-gray-700': tab !== 'best'}" class="px-4 py-2 rounded-md transition">{{ __('Best Selling') }}</button>
            <button @click="tab = 'trending'" :class="{'bg-primary-500 text-white': tab === 'trending', 'bg-gray-200 dark:bg-gray-700': tab !== 'trending'}" class="px-4 py-2 rounded-md transition">{{ __('Trending') }}</button>
        </div>
        <div x-show="tab === 'new'" x-transition><div class="grid grid-cols-2 md:grid-cols-4 gap-6">@foreach($newArrivals as $product)<x-product-card :product="$product" />@endforeach</div></div>
        <div x-show="tab === 'best'" x-transition><div class="grid grid-cols-2 md:grid-cols-4 gap-6">@foreach($bestSelling as $product)<x-product-card :product="$product" />@endforeach</div></div>
        <div x-show="tab === 'trending'" x-transition><div class="grid grid-cols-2 md:grid-cols-4 gap-6">@foreach($trending as $product)<x-product-card :product="$product" />@endforeach</div></div>
    </section>

    <section class="py-12 container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            @foreach($whyUs as $item)
                <div data-aos="fade-up">
                    <div class="text-4xl text-primary-500 mb-3"><i class="fas {{ $item['icon'] }}"></i></div>
                    <h4 class="font-bold">{{ __($item['title']) }}</h4>
                    <p class="text-sm text-gray-600 dark:text-gray-400">{{ __($item['desc']) }}</p>
                </div>
            @endforeach
        </div>
    </section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const countdowns = document.querySelectorAll('[id^="countdown"]');
        countdowns.forEach(el => {
            const end = parseInt(el.dataset.end);
            function update() {
                const now = Math.floor(Date.now() / 1000);
                let diff = end - now;
                if (diff <= 0) { el.textContent = '00:00:00'; return; }
                const hours = Math.floor(diff / 3600);
                const minutes = Math.floor((diff % 3600) / 60);
                const seconds = diff % 60;
                el.textContent = `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
            }
            update();
            setInterval(update, 1000);
        });
    });
    document.addEventListener('alpine:init', () => {
        Alpine.data('slider', () => ({
            active: 0,
            slides: @json($banners->map(function($banner) {
                return [
                    'image' => asset($banner->image),
                    'title' => $banner->title,
                    'subtitle' => $banner->subtitle,
                    'button_text' => $banner->button_text,
                    'button_link' => $banner->button_link,
                ];
            })),
            init() {
                setInterval(() => {
                    this.active = (this.active + 1) % this.slides.length;
                }, 5000);
            }
        }));
    });
</script>
@endpush