<!DOCTYPE html>
<html lang="tk">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>{{ $settings['footer_brand_name'] ?? 'DARAGT' }} Şöhlatlary</title>
<link href="{{ asset('assets/css/fonts.css') }}" rel="stylesheet"/>
<link href="{{ asset('assets/css/tailwind.css') }}" rel="stylesheet"/>
@vite(['resources/js/app.js'])
</head>
<body class="bg-background text-on-surface font-body-md antialiased pt-16">

{{-- TopAppBar --}}
<header class="fixed top-0 w-full z-50 flex justify-between items-center px-margin-mobile md:px-margin-desktop h-16 bg-background border-b-2 border-inverse-surface">
    <button class="p-2 hover:bg-primary hover:text-on-primary transition-colors duration-200 text-on-surface font-medium" id="menuToggle">
        <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">menu</span>
    </button>
    <div class="font-display-lg text-headline-md tracking-tighter text-primary uppercase dark:text-primary">
        {{ $settings['footer_brand_name'] ?? 'DARAGT' }}
    </div>
    <button class="p-2 hover:bg-primary hover:text-on-primary transition-colors duration-200 text-on-surface font-medium">
        <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">shopping_bag</span>
    </button>
</header>

{{-- Navigation Drawer --}}
<div class="fixed inset-y-0 left-0 z-[60] flex flex-col p-6 h-full w-80 border-r-2 border-inverse-surface bg-surface-container-low dark:bg-surface-container-low shadow-[4px_0_0_0_rgba(51,48,39,1)] transform -translate-x-full transition-transform duration-300" id="navDrawer">
    <div class="flex justify-between items-center mb-8">
        <h2 class="font-display-lg text-headline-md text-primary">{{ $settings['footer_brand_name'] ?? 'DARAGT' }} Şöhlatlary</h2>
        <button class="p-2 text-on-surface hover:bg-secondary-container" id="closeDrawer">
            <span class="material-symbols-outlined">close</span>
        </button>
    </div>
    <nav class="flex flex-col gap-4 flex-grow">
        <a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#signatures">
            <span class="material-symbols-outlined">restaurant_menu</span>
            <span class="font-label-bold text-label-bold">Biziň aýratynlyklarymyz</span>
        </a>
        <a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#explore">
            <span class="material-symbols-outlined">category</span>
            <span class="font-label-bold text-label-bold">Çeşitleri gözden geçiriň</span>
        </a>
        <a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#history">
            <span class="material-symbols-outlined">history</span>
            <span class="font-label-bold text-label-bold">Taryhymyz</span>
        </a>
        <a class="flex items-center gap-4 p-4 text-inverse-surface font-bold uppercase tracking-widest hover:bg-secondary-container hover:translate-x-1 transition-transform" href="#contact">
            <span class="material-symbols-outlined">potted_plant</span>
            <span class="font-label-bold text-label-bold">Habarlaşmak</span>
        </a>
    </nav>
</div>

<main class="max-w-[container-max] mx-auto overflow-hidden">

    {{-- HERO CAROUSEL --}}
    <section class="relative w-full border-b-2 border-inverse-surface bg-surface-container-low overflow-hidden">
        <div class="flex transition-transform duration-500 ease-in-out h-[400px] md:h-[600px]" id="heroCarousel">
            @foreach($heroSlides as $slide)
            <div class="min-w-full flex flex-col md:flex-row relative {{ $loop->even ? 'bg-surface-container-high' : '' }}">
                <div class="w-full md:w-1/2 p-margin-mobile md:p-margin-desktop flex flex-col justify-center z-10 relative">
                    @if($loop->first)
                    <div class="absolute top-4 left-4 w-16 h-16 flex items-center justify-center pointer-events-none">
                        <svg class="absolute animate-steam" fill="none" height="24" stroke="theme('colors.primary')" stroke-width="2" viewbox="0 0 24 24" width="24"><path d="M8 2c0 4 8 4 8 8s-8 4-8 8"></path><path class="delay-100" d="M16 4c0 4-8 4-8 8s8 4 8 8"></path></svg>
                        <span class="material-symbols-outlined text-primary text-4xl animate-sizzle" style="font-variation-settings: 'FILL' 1;">lunch_dining</span>
                    </div>
                    @endif
                    <h1 class="font-display-lg text-headline-lg-mobile md:text-display-lg text-primary {{ $loop->first ? 'mt-12 md:mt-0' : '' }} uppercase leading-none">{!! nl2br(e($slide->headline)) !!}</h1>
                    @if($slide->subheadline)
                        <p class="font-body-md text-on-surface-variant mt-4 max-w-sm">{{ $slide->subheadline }}</p>
                    @endif
                    @if($slide->cta_label)
                        <a href="{{ $slide->cta_url ?? '#' }}" class="btn-editorial font-label-bold text-label-bold uppercase px-8 py-4 mt-8 w-max">{{ $slide->cta_label }}</a>
                    @endif
                </div>
                <div class="w-full md:w-1/2 h-[200px] md:h-full relative sketch-border md:border-l-2 md:border-inverse-surface">
                    @if($slide->image)
                        <img alt="{{ $slide->headline }}" class="w-full h-full object-cover filter contrast-125 sepia-[.2]" src="{{ Storage::url($slide->image) }}"/>
                    @else
                        <div class="w-full h-full bg-surface-container flex items-center justify-center">
                            <span class="material-symbols-outlined text-outline text-6xl">image</span>
                        </div>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        {{-- Carousel controls --}}
        <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-4 z-20 md:justify-start md:pl-margin-desktop">
            <button class="w-10 h-10 rounded-full border-2 border-inverse-surface bg-surface flex items-center justify-center hover:bg-tertiary-fixed-dim transition-colors" id="prevSlide">
                <span class="material-symbols-outlined">arrow_back</span>
            </button>
            <div class="flex gap-2 items-center" id="heroDots">
                @foreach($heroSlides as $slide)
                    <div class="w-2 h-2 rounded-full {{ $loop->first ? 'bg-primary' : 'bg-inverse-surface opacity-30' }}"></div>
                @endforeach
            </div>
            <button class="w-10 h-10 rounded-full border-2 border-inverse-surface bg-surface flex items-center justify-center hover:bg-tertiary-fixed-dim transition-colors" id="nextSlide">
                <span class="material-symbols-outlined">arrow_forward</span>
            </button>
        </div>
    </section>

    {{-- CATEGORY PILLS --}}
    <section class="py-8 px-margin-mobile md:px-margin-desktop border-b border-dashed border-outline" id="explore">
        <div class="flex overflow-x-auto hide-scrollbar gap-4 pb-4 items-center">
            <span class="font-label-bold text-label-bold uppercase text-on-surface-variant whitespace-nowrap mr-4">Saýlaň:</span>
            @foreach($categories as $category)
                <button
                    class="category-pill flex-shrink-0 flex items-center gap-2 px-6 py-2 border-2 border-inverse-surface rounded-full text-on-surface hover:bg-tertiary-container hover:text-on-tertiary transition-colors {{ $loop->first ? 'bg-tertiary-fixed-dim' : 'bg-surface' }}"
                    data-category-id="{{ $category->id }}"
                >
                    <span class="material-symbols-outlined text-sm">{{ $category->icon }}</span>
                    <span class="font-label-bold text-label-bold uppercase">{{ $category->name }}</span>
                </button>
            @endforeach
        </div>
    </section>

    {{-- PRODUCT CAROUSELS (per category) --}}
    @if($categories->isNotEmpty())
    <section class="border-b-2 border-inverse-surface bg-surface" id="products">
        @foreach($categories as $category)
            <div
                class="category-products py-12 px-margin-mobile md:px-margin-desktop"
                data-category-id="{{ $category->id }}"
                style="{{ $loop->first ? '' : 'display:none' }}"
            >
                @if($category->products->isNotEmpty())
                    <div class="splide product-splide" id="splide-cat-{{ $category->id }}">
                        <div class="splide__track">
                            <ul class="splide__list">
                                @foreach($category->products as $product)
                                    <li class="splide__slide">
                                        <article class="flex flex-col gap-4 relative group pr-4">
                                            <div class="h-[200px] w-full relative sketch-border bg-surface-container overflow-hidden">
                                                @if($product->image)
                                                    <img alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" src="{{ Storage::url($product->image) }}"/>
                                                @else
                                                    <div class="w-full h-full bg-surface-container flex items-center justify-center">
                                                        <span class="material-symbols-outlined text-outline text-5xl">{{ $category->icon }}</span>
                                                    </div>
                                                @endif
                                                <div class="absolute top-2 right-2 bg-tertiary-fixed-dim text-on-surface px-3 py-1 font-label-bold text-label-bold uppercase border border-inverse-surface transform rotate-2">
                                                    {{ number_format($product->price, 0) }} TMT / {{ $product->price_unit }}
                                                </div>
                                                @if($product->availability_status !== 'available')
                                                    <div class="absolute bottom-2 left-2 bg-inverse-surface text-surface px-2 py-1 font-label-bold text-label-bold uppercase text-xs">
                                                        @if($product->availability_status === 'out_of_season')
                                                            Möwsümden daşary
                                                        @elseif($product->availability_status === 'low_stock')
                                                            Az galdy
                                                        @endif
                                                    </div>
                                                @endif
                                            </div>
                                            <div class="flex flex-col gap-2">
                                                <h3 class="font-headline-md text-headline-md text-on-surface">{{ $product->name }}</h3>
                                                <div class="w-12 h-[1px] bg-primary"></div>
                                                @if($product->description)
                                                    <p class="font-body-md text-on-surface-variant text-sm">{{ $product->description }}</p>
                                                @endif
                                                <button class="text-left font-label-bold text-label-bold uppercase text-primary hover:text-primary-container mt-2 flex items-center gap-1 group-hover:translate-x-2 transition-transform">
                                                    Sargyda goş <span class="material-symbols-outlined text-sm">arrow_right_alt</span>
                                                </button>
                                            </div>
                                        </article>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="splide__arrows mt-6">
                            <button class="splide__arrow splide__arrow--prev">
                                <span class="material-symbols-outlined">arrow_back</span>
                            </button>
                            <button class="splide__arrow splide__arrow--next">
                                <span class="material-symbols-outlined">arrow_forward</span>
                            </button>
                        </div>
                    </div>
                @else
                    <p class="text-on-surface-variant font-body-md">Bu kategoriýada haryt ýok.</p>
                @endif
            </div>
        @endforeach
    </section>
    @endif

    {{-- OUR SIGNATURES --}}
    @if($signatureItems->isNotEmpty())
    <section class="py-16 md:py-24 px-margin-mobile md:px-margin-desktop overflow-hidden border-b-2 border-inverse-surface bg-surface" id="signatures">
        <h2 class="font-display-lg text-headline-md md:text-headline-lg text-primary uppercase mb-12 relative inline-block">
            Biziň aýratynlyklarymyz
            <div class="absolute -bottom-4 left-0 w-full h-[2px] bg-outline-variant sketch-border"></div>
        </h2>
        <div class="flex overflow-x-auto hide-scrollbar gap-8 pb-12 pr-margin-mobile md:pr-margin-desktop snap-x snap-mandatory">
            @foreach($signatureItems as $item)
                <article class="flex-shrink-0 w-[85vw] md:w-[350px] snap-center flex flex-col gap-4 relative group">
                    <div class="h-[160px] w-full relative sketch-border bg-surface-container overflow-hidden">
                        @if($item->image)
                            <img alt="{{ $item->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500 sepia-[.3]" src="{{ Storage::url($item->image) }}"/>
                        @else
                            <div class="w-full h-full bg-surface-container flex items-center justify-center">
                                <span class="material-symbols-outlined text-outline text-5xl">restaurant_menu</span>
                            </div>
                        @endif
                        <div class="absolute top-2 right-2 bg-tertiary-fixed-dim text-on-surface px-3 py-1 font-label-bold text-label-bold uppercase border border-inverse-surface transform {{ $loop->index % 3 === 0 ? 'rotate-2' : ($loop->index % 3 === 1 ? '-rotate-2' : 'rotate-1') }}">
                            {{ number_format($item->price, 0) }} TMT / {{ $item->price_unit }}
                        </div>
                    </div>
                    <div class="flex flex-col gap-2">
                        <h3 class="font-headline-md text-headline-md text-on-surface">{{ $item->name }}</h3>
                        <div class="w-12 h-[1px] bg-primary"></div>
                        @if($item->description)
                            <p class="font-body-md text-on-surface-variant text-sm">{{ $item->description }}</p>
                        @endif
                        <button class="text-left font-label-bold text-label-bold uppercase text-primary hover:text-primary-container mt-2 flex items-center gap-1 group-hover:translate-x-2 transition-transform">
                            Sargyda goş <span class="material-symbols-outlined text-sm">arrow_right_alt</span>
                        </button>
                    </div>
                </article>
            @endforeach
        </div>
    </section>
    @endif

    {{-- BUTCHER'S TALE + HISTORY TIMELINE --}}
    <section class="py-16 md:py-24 px-margin-mobile md:px-margin-desktop bg-surface-container-low flex flex-col md:flex-row gap-16 md:gap-24 relative" id="history">
        <div class="md:w-1/3 flex flex-col gap-6">
            <h2 class="font-display-lg text-headline-md text-primary uppercase">
                {{ $settings['butchers_tale_title'] ?? 'Kesimçiniň hekaýasy' }}
            </h2>
            @if(!empty($settings['butchers_tale_body']))
                <p class="font-body-lg text-on-surface-variant">{{ $settings['butchers_tale_body'] }}</p>
            @endif
            @if(!empty($settings['butchers_tale_image']))
                <div class="mt-8 border-t-2 border-dashed border-outline-variant pt-8">
                    <img alt="Kesimçi elleri" class="w-full h-auto grayscale contrast-150 sketch-border" src="{{ Storage::url($settings['butchers_tale_image']) }}"/>
                </div>
            @endif
        </div>

        {{-- Timeline --}}
        @if($timelineEntries->isNotEmpty())
        <div class="md:w-2/3 relative">
            <div class="absolute left-6 top-4 bottom-4 w-[2px] bg-outline-variant border-l-2 border-dashed border-primary"></div>
            <div class="flex flex-col gap-12 relative z-10">
                @foreach($timelineEntries as $entry)
                    <div class="flex gap-8 items-start group">
                        <div class="w-12 h-12 rounded-full bg-surface border-2 border-inverse-surface flex items-center justify-center flex-shrink-0 z-10 group-hover:bg-tertiary-fixed-dim transition-colors">
                            <span class="material-symbols-outlined text-primary">{{ $entry->icon }}</span>
                        </div>
                        <div class="pt-2">
                            <h4 class="font-label-bold text-label-bold text-tertiary-container uppercase tracking-widest mb-1">{{ $entry->year }}</h4>
                            <h3 class="font-headline-md text-headline-md text-on-surface mb-2">{{ $entry->title }}</h3>
                            <p class="font-body-md text-on-surface-variant">{{ $entry->body }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        @endif
    </section>

</main>

{{-- FOOTER --}}
<footer class="w-full py-12 px-margin-mobile md:px-margin-desktop flex flex-col items-center gap-8 full-width relative border-t-4 border-primary bg-inverse-surface dark:bg-inverse-surface" id="contact">
    <h2 class="font-display-lg text-display-lg text-surface-bright uppercase text-center">
        {{ $settings['footer_brand_name'] ?? 'DARAGT' }}
    </h2>

    @if($socialLinks->isNotEmpty())
    <div class="flex gap-6">
        @foreach($socialLinks as $link)
            <a class="w-10 h-10 rounded-full border border-surface-variant flex items-center justify-center text-surface-bright hover:bg-surface-bright hover:text-inverse-surface transition-colors" href="{{ $link->url }}" target="_blank" rel="noopener noreferrer" aria-label="{{ $link->platform }}">
                @if($link->icon)
                    <img src="{{ Storage::url($link->icon) }}" alt="{{ $link->platform }}" class="w-5 h-5 object-contain" style="filter: brightness(0) invert(1);">
                @else
                    <span class="material-symbols-outlined text-lg">link</span>
                @endif
            </a>
        @endforeach
    </div>
    @endif

    @if($footerNavLinks->isNotEmpty())
    <nav class="flex flex-wrap justify-center gap-6 mt-4">
        @foreach($footerNavLinks as $navLink)
            <a class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest" href="{{ $navLink->url }}">
                {{ $navLink->label }}
            </a>
        @endforeach
    </nav>
    @endif

    @if(!empty($settings['footer_address']) || !empty($settings['footer_phone']) || !empty($settings['footer_email']))
    <div class="flex flex-wrap justify-center gap-6 mt-2">
        @if(!empty($settings['footer_address']))
            <span class="font-label-sm text-label-sm text-surface-variant uppercase tracking-widest">{{ $settings['footer_address'] }}</span>
        @endif
        @if(!empty($settings['footer_phone']))
            <a href="tel:{{ $settings['footer_phone'] }}" class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest">{{ $settings['footer_phone'] }}</a>
        @endif
        @if(!empty($settings['footer_email']))
            <a href="mailto:{{ $settings['footer_email'] }}" class="font-label-sm text-label-sm text-surface-variant hover:text-primary-fixed-dim transition-colors uppercase tracking-widest">{{ $settings['footer_email'] }}</a>
        @endif
    </div>
    @endif

    <p class="font-label-sm text-label-sm text-surface-variant opacity-70 mt-8 text-center uppercase tracking-widest">
        {{ $settings['footer_copyright'] ?? '© 2026 DARAGT USTA KESIMÇILERI. EL BILEN TAÝÝARLANAN.' }}
    </p>
</footer>

<script>
    // Drawer Logic
    const menuToggle = document.getElementById('menuToggle');
    const closeDrawer = document.getElementById('closeDrawer');
    const navDrawer = document.getElementById('navDrawer');

    menuToggle.addEventListener('click', () => {
        navDrawer.classList.remove('-translate-x-full');
    });

    closeDrawer.addEventListener('click', () => {
        navDrawer.classList.add('-translate-x-full');
    });

    // Hero Carousel Logic
    const heroCarousel = document.getElementById('heroCarousel');
    const prevBtn = document.getElementById('prevSlide');
    const nextBtn = document.getElementById('nextSlide');
    const dots = document.getElementById('heroDots').children;
    let currentSlide = 0;
    const totalSlides = {{ $heroSlides->count() }};

    function updateCarousel() {
        heroCarousel.style.transform = `translateX(-${currentSlide * 100}%)`;
        Array.from(dots).forEach((dot, index) => {
            if (index === currentSlide) {
                dot.classList.remove('opacity-30');
                dot.classList.add('bg-primary');
                dot.classList.remove('bg-inverse-surface');
            } else {
                dot.classList.add('opacity-30');
                dot.classList.remove('bg-primary');
                dot.classList.add('bg-inverse-surface');
            }
        });
    }

    if (nextBtn) {
        nextBtn.addEventListener('click', () => {
            currentSlide = (currentSlide + 1) % totalSlides;
            updateCarousel();
        });
    }

    if (prevBtn) {
        prevBtn.addEventListener('click', () => {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            updateCarousel();
        });
    }

    // Autoplay — advances every 5 seconds, stops on manual interaction
    let heroAutoplay = setInterval(() => {
        currentSlide = (currentSlide + 1) % totalSlides;
        updateCarousel();
    }, 5000);

    [prevBtn, nextBtn].forEach((btn) => {
        btn?.addEventListener('click', () => clearInterval(heroAutoplay));
    });

    // Swipe logic for hero
    let startX;
    if (heroCarousel) {
        heroCarousel.addEventListener('touchstart', (e) => {
            startX = e.touches[0].clientX;
            clearInterval(heroAutoplay);
        }, { passive: true });

        heroCarousel.addEventListener('touchend', (e) => {
            const endX = e.changedTouches[0].clientX;
            if (startX - endX > 50) {
                currentSlide = (currentSlide + 1) % totalSlides;
                updateCarousel();
            } else if (endX - startX > 50) {
                currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                updateCarousel();
            }
        }, { passive: true });
    }
</script>
</body>
</html>
