<x-layouts.app :settings="$settings">
<section class="relative h-screen w-full overflow-hidden flex items-center justify-center bg-surface-variant pt-20" id="hero">
    <div id="hero-carousel">
        @foreach($slides as $index => $slide)
            <div class="carousel-slide {{ $index === 0 ? 'active' : '' }} bg-cover bg-center" data-alt="{{ $slide->subtitle }}" style="background-image: url('{{ $slide->image ? Storage::url($slide->image) : asset('assets/images/hero-cake.jpg') }}');">
                <div class="absolute inset-0 bg-primary/40"></div>
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="relative z-20 text-center px-6 max-w-4xl mx-auto mt-16 animate-on-scroll">
                        <h1 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-surface-container-lowest italic mb-6 drop-shadow-lg">{!! nl2br(e($slide->title)) !!}</h1>
                        <a class="inline-block mt-8 bg-ink-brown text-surface-container-lowest font-subheading-caps text-subheading-caps uppercase py-4 px-10 rounded-full tracking-wider hover:bg-on-background transition-colors border border-antique-gold/30 backdrop-blur-sm" href="#menu">Menýumyzy gözden geçiriň</a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    
    <div class="absolute top-32 left-8 md:left-16 z-20 opacity-40 hidden md:block">
        <svg class="text-surface-container-lowest" fill="none" height="60" stroke="currentColor" stroke-width="0.5" viewbox="0 0 24 24" width="60">
            <path d="M12 2L2 22h20L12 2zm0 4l7 14H5l7-14z"></path>
        </svg>
    </div>
    <div class="absolute bottom-16 right-8 md:right-16 z-20 opacity-40 hidden md:block">
        <svg class="text-surface-container-lowest" fill="none" height="60" stroke="currentColor" stroke-width="0.5" viewbox="0 0 24 24" width="60">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 6v6l4 2"></path>
        </svg>
    </div>
</section>

<div class="bg-primary-container text-antique-gold py-4 overflow-hidden border-y border-antique-gold/20">
    <div class="flex whitespace-nowrap animate-marquee font-subheading-caps text-subheading-caps uppercase tracking-[0.2em]">
        @for($i = 0; $i < 6; $i++)
            <span class="mx-8">{{ $settings->marquee_text ?? 'Her gün täze bişirilen · Kiçi partýalarda taýýarlanylýar · Hünärmen iýmitçilik harytlary' }}</span>
            <span class="mx-8">·</span>
        @endfor
    </div>
</div>

<section class="pt-24 px-margin-mobile md:px-margin-desktop max-w-[1440px] mx-auto bg-surface" id="collections">
    @foreach($collections as $collection)
    <div class="mb-20">
        <div class="flex flex-col md:flex-row justify-between items-end mb-12 animate-on-scroll">
            <div>
                <h2 class="font-headline-md text-headline-md text-on-background mb-2">{{ $collection->title }}</h2>
                @if($collection->subtitle)
                    <p class="font-body-md text-body-md text-on-surface-variant max-w-lg">{{ $collection->subtitle }}</p>
                @endif
            </div>
            <div class="flex gap-4 mt-6 md:mt-0">
                <button aria-label="Öňki" class="w-10 h-10 rounded-full border border-antique-gold flex items-center justify-center text-ink-brown hover:bg-surface-variant transition-colors btn-prev-collection" data-target="carousel-{{ $collection->id }}">
                    <span class="material-symbols-outlined">arrow_left</span>
                </button>
                <button aria-label="Indiki" class="w-10 h-10 rounded-full border border-antique-gold flex items-center justify-center text-ink-brown hover:bg-surface-variant transition-colors btn-next-collection" data-target="carousel-{{ $collection->id }}">
                    <span class="material-symbols-outlined">arrow_right</span>
                </button>
            </div>
        </div>
        <div class="flex overflow-x-auto hide-scrollbar gap-6 pb-8 snap-x snap-mandatory" id="carousel-{{ $collection->id }}">
            @foreach($collection->collectionItems as $item)
            <div style="max-height: 420px;" class="min-w-[280px] md:min-w-[320px] aspect-[3/4] relative snap-start group cursor-pointer border border-antique-gold/40 bg-surface-container-low p-4 flex flex-col justify-end overflow-hidden">
                <div class="absolute inset-4 border border-outline/30 z-10 pointer-events-none transition-transform duration-500 group-hover:scale-95"></div>
                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105 opacity-80" data-alt="{{ $item->subtitle }}" style="background-image: url('{{ $item->image ? Storage::url($item->image) : asset('assets/images/collection-chocolate-cake.jpg') }}');"></div>
                <div class="absolute inset-0 bg-gradient-to-t from-primary-container/90 via-primary-container/30 to-transparent"></div>
                <div class="relative z-20 p-6 text-center">
                    <h3 class="font-headline-md text-headline-md text-surface-container-lowest mb-1">{{ $item->title }}</h3>
                    <p class="font-label-sm text-label-sm text-antique-gold uppercase tracking-widest">{{ $item->subtitle  }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endforeach
</section>

<section class="py-16 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto bg-surface-container-low border-y border-outline/10" id="menu">
    <div class="flex overflow-x-auto hide-scrollbar gap-4 pb-8 mb-8 justify-center animate-on-scroll">
        <button class="filter-btn px-6 py-2 rounded-full bg-ink-brown text-surface-container-lowest font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap" data-category="all">
            <span class="material-symbols-outlined text-[16px]">cake</span> Hemmesi
        </button>
        @foreach($categories as $category)
        <button class="filter-btn px-6 py-2 rounded-full border border-outline/30 text-on-surface-variant hover:border-antique-gold hover:text-ink-brown transition-colors font-label-sm text-label-sm uppercase tracking-wide flex items-center gap-2 whitespace-nowrap bg-surface" data-category="{{ $category->id }}">
            @if($category->icon)
                <span class="material-symbols-outlined text-[16px]">{{ $category->icon }}</span>
            @endif
            {{ $category->name }}
        </button>
        @endforeach
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12">
        @foreach($products as $index => $product)
        <div class="product-card group animate-on-scroll" data-category="{{ $product->category_id }}" style="transition-delay: {{ ($index % 4) * 100 }}ms;">
            <div class="aspect-square mb-4 overflow-hidden relative bg-surface-variant">
                <img alt="{{ $product->name }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" data-alt="{{ $product->name }}" src="{{ $product->image ? Storage::url($product->image) : asset('assets/images/product-macaron.jpg') }}"/>
                <div class="absolute inset-0 border border-outline/10 pointer-events-none m-2"></div>
            </div>
            <div class="text-center">
                <h4 class="font-headline-md text-[20px] text-on-background mb-1">{{ $product->name }}</h4>
                <p class="font-body-md text-body-md text-on-surface-variant/80 mb-2">{{ $product->description }}</p>
                <p class="font-label-sm text-label-sm text-antique-gold">{{ number_format($product->price, 0) }} TMT</p>
            </div>
        </div>
        @endforeach
    </div>
</section>

<section class="py-24 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto" id="about">
    <div class="grid md:grid-cols-2 gap-16 items-center">
        <div class="relative aspect-[4/5] animate-on-scroll">
            <img alt="About Us" class="w-full h-full object-cover grayscale opacity-90 sepia-[.2]" src="{{ $settings->about_image ? Storage::url($settings->about_image) : asset('assets/images/about-baker.jpg') }}"/>
            <div class="absolute -bottom-8 -right-8 w-48 h-48 border border-antique-gold hidden md:block pointer-events-none"></div>
            <div class="absolute -top-4 -left-4 w-24 h-24 border-t border-l border-ink-brown hidden md:block pointer-events-none"></div>
        </div>
        <div class="animate-on-scroll" style="transition-delay: 200ms;">
            <p class="font-label-sm text-label-sm text-antique-gold uppercase tracking-widest mb-4">{{ $settings->about_label ?? 'Biziň mirasy' }}</p>
            <h2 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-on-background mb-8 italic">{!! nl2br(e($settings->about_title ?? "Sabyr\nsungaty")) !!}</h2>
            <div class="relative">
                <div class="absolute -left-12 -top-12 opacity-10 pointer-events-none hidden md:block">
                    <svg fill="none" height="120" stroke="currentColor" stroke-width="0.5" viewbox="0 0 100 100" width="120">
                        <path d="M50 100 C 50 50, 0 50, 0 0 C 0 50, 50 50, 50 0 C 50 50, 100 50, 100 0 C 100 50, 50 50, 50 100"></path>
                        <circle cx="50" cy="50" r="10"></circle>
                    </svg>
                </div>
                <div class="font-body-md text-body-md text-on-surface-variant mb-8 leading-relaxed relative z-10">
                    {!! nl2br(e($settings->about_text ?? "Hoşal-da hakyky lýuksy wagtda görmek mümkin diýip hasaplaýarys. Peçimizden çykýan her kruassan üç gün dowam edýän jik-jik laminaasiýa prosesinden geçýär. Her tart gabygy dynýar, her krem sabyr bilen doldurylýar. Täzelikçi fransuz usullaryna esaslanýan, ýöne ýerli teýrwarlaryň ýyllygyndan ilham alýan patisseriamyz — öň biziňden öň gelen hünärmenlere hormatdyr.")) !!}
                </div>
                <img alt="Aşpeziň gol çeki" class="h-12 opacity-60 mix-blend-multiply" data-alt="Gol çekilen aşpeziň gol çeki" src="{{ asset('assets/images/chef-signature.png') }}"/>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener("DOMContentLoaded", () => {
        const filterBtns = document.querySelectorAll('.filter-btn');
        const productCards = document.querySelectorAll('.product-card');

        const activeClasses = ['bg-ink-brown', 'text-surface-container-lowest'];
        const inactiveClasses = ['border', 'border-outline/30', 'text-on-surface-variant', 'bg-surface'];

        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const category = btn.getAttribute('data-category');

                // 1. Update button styles
                filterBtns.forEach(b => {
                    b.classList.remove(...activeClasses);
                    b.classList.add(...inactiveClasses);
                });
                btn.classList.remove(...inactiveClasses);
                btn.classList.add(...activeClasses);

                // 2. Filter products
                productCards.forEach(card => {
                    if (category === 'all' || card.getAttribute('data-category') === category) {
                        card.style.display = 'block';
                        // Small timeout to allow display:block to apply before re-animating
                        setTimeout(() => {
                            card.classList.add('is-visible');
                        }, 50);
                    } else {
                        card.style.display = 'none';
                        card.classList.remove('is-visible');
                    }
                });
            });
        });
    });
</script>
</x-layouts.app>
