@extends('layouts.app')
@section('content')

{{-- HERO SECTION --}}
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
    <div class="swiper hero-swiper absolute inset-0 z-0">
        <div class="swiper-wrapper">
            @forelse($banners as $banner)
            <div class="swiper-slide relative flex items-center justify-center">
                <div class="absolute inset-0 bg-cover bg-center" style="background-image:url('{{ $banner->image_url }}')"></div>
                <div class="absolute inset-0 smoke-overlay"></div>
                
                {{-- Dynamic Content for this Slide --}}
                <div class="relative z-10 text-center px-4 max-w-5xl mx-auto banner-content">
                    @if($banner->subtitle)
                        <p class="text-gold font-bangla text-xl mb-3 opacity-0 banner-subtitle">{{ $banner->subtitle }}</p>
                    @endif
                    
                    <h1 class="font-playfair text-5xl md:text-7xl lg:text-8xl text-cream font-bold leading-tight mb-6 opacity-0 banner-title">
                        {!! $banner->title ? str_replace(['Heritage', 'Bengal'], ['<span class="text-gold-gradient">Heritage</span>', 'Bengal'], $banner->title) : 'Taste the <span class="text-gold-gradient">Heritage</span><br>of Bengal' !!}
                    </h1>

                    @if($banner->description)
                        <p class="text-cream/70 text-lg md:text-xl mb-10 max-w-2xl mx-auto opacity-0 banner-desc">
                            {{ $banner->description }}
                        </p>
                    @endif

                    <div class="flex flex-col sm:flex-row gap-4 justify-center opacity-0 banner-cta">
                        <a href="{{ $banner->cta_url ?? route('menu.index') }}" class="btn-gold text-base px-10 py-4 shadow-2xl">
                            <i class="fas fa-utensils mr-2"></i>{{ $banner->cta_text ?? 'Explore Menu' }}
                        </a>
                        @if($banner->cta_url_secondary)
                            <a href="{{ $banner->cta_url_secondary }}" class="btn-outline-gold text-base px-10 py-4">
                                <i class="fas fa-calendar-alt mr-2"></i>{{ $banner->cta_text_secondary ?? 'Reserve a Table' }}
                            </a>
                        @else
                            <a href="{{ route('reservation.index') }}" class="btn-outline-gold text-base px-10 py-4">
                                <i class="fas fa-calendar-alt mr-2"></i>Reserve a Table
                            </a>
                        @endif
                    </div>
                </div>
            </div>
            @empty
            <div class="swiper-slide flex items-center justify-center">
                <div class="absolute inset-0" style="background:linear-gradient(135deg,#0D1F16 0%,#1F3A2E 50%,#3B2A22 100%)"></div>
                <div class="relative z-10 text-center px-4 max-w-5xl mx-auto">
                    <h1 class="font-playfair text-5xl md:text-7xl lg:text-8xl text-cream font-bold leading-tight mb-6">
                        Welcome to <span class="text-gold-gradient">Shalik</span>
                    </h1>
                    <a href="{{ route('menu.index') }}" class="btn-gold text-base px-10 py-4">Explore Menu</a>
                </div>
            </div>
            @endforelse
        </div>
    </div>
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce">
        <i class="fas fa-chevron-down text-gold text-xl"></i>
    </div>
</section>

{{-- CATEGORIES --}}
<section class="py-20 px-4 bengali-pattern">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-14" data-aos="fade-up">
            <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-2">Explore</p>
            <h2 class="font-playfair text-4xl md:text-5xl text-cream">Popular Categories</h2>
            <div class="section-divider mt-4"></div>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            @foreach($categories as $cat)
            <a href="{{ route('menu.index', ['category' => $cat->id]) }}"
               class="group glass-card p-5 text-center hover:border-gold/50 transition-all duration-300 hover:-translate-y-2"
               data-aos="fade-up" data-aos-delay="{{ $loop->index * 80 }}">
                <div class="w-16 h-16 rounded-full bg-gradient-to-br from-gold/20 to-burnt-orange/20 flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
                    @if($cat->image)
                        <img src="{{ $cat->image_url }}" alt="{{ $cat->name }}" class="w-12 h-12 rounded-full object-cover">
                    @else
                        <i class="fas fa-utensils text-gold text-xl"></i>
                    @endif
                </div>
                <h3 class="text-cream text-sm font-semibold font-poppins">{{ $cat->name }}</h3>
                <p class="text-gold/70 text-xs mt-1">{{ $cat->food_items_count }} items</p>
            </a>
            @endforeach
        </div>
    </div>
</section>

{{-- FEATURED DISHES --}}
<section class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-14" data-aos="fade-up">
            <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-2">Chef's Choice</p>
            <h2 class="font-playfair text-4xl md:text-5xl text-cream">Signature Dishes</h2>
            <div class="section-divider mt-4"></div>
        </div>
        <div class="swiper featured-swiper" data-aos="fade-up" data-aos-delay="200">
            <div class="swiper-wrapper pb-10">
                @foreach($featuredFoods as $food)
                <div class="swiper-slide">
                    <div class="food-card glass-card overflow-hidden group cursor-pointer"
                         onclick="window.location='{{ route('menu.show', $food->slug) }}'">
                        <div class="overflow-hidden h-56 relative">
                            <img src="{{ $food->thumbnail_url }}" alt="{{ $food->name }}"
                                 class="food-card-img w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-dark-brown/80 to-transparent"></div>
                            @if($food->is_bestseller)
                            <span class="absolute top-3 left-3 bg-burnt-orange text-white text-xs font-bold px-3 py-1 rounded-full">
                                <i class="fas fa-fire mr-1"></i>Bestseller
                            </span>
                            @endif
                            @if($food->is_new)
                            <span class="absolute top-3 right-3 bg-deep-green border border-gold text-gold text-xs font-bold px-3 py-1 rounded-full">New</span>
                            @endif
                        </div>
                        <div class="p-5">
                            <h3 class="font-playfair text-cream text-lg font-semibold mb-1">{{ $food->name }}</h3>
                            <p class="text-cream/50 text-xs mb-3">{{ $food->category->name }}</p>
                            <div class="flex items-center justify-between">
                                <div>
                                    <span class="text-gold font-bold text-lg">৳{{ number_format($food->effective_price, 0) }}</span>
                                    @if($food->discount_price)
                                        <span class="text-cream/40 text-sm line-through ml-2">৳{{ number_format($food->base_price, 0) }}</span>
                                    @endif
                                </div>
                                <div class="flex items-center gap-2 text-cream/50 text-xs">
                                    <i class="fas fa-clock"></i>{{ $food->preparation_time }}m
                                </div>
                            </div>
                            @if($food->spicy_level !== 'none')
                            <div class="mt-2 flex gap-1">
                                @for($i=0;$i<(['mild'=>1,'medium'=>2,'hot'=>3,'extra_hot'=>4][$food->spicy_level]??0);$i++)
                                    <i class="fas fa-pepper-hot text-red-400 text-xs"></i>
                                @endfor
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="text-center mt-8" data-aos="fade-up">
            <a href="{{ route('menu.index') }}" class="btn-outline-gold">View Full Menu <i class="fas fa-arrow-right ml-2"></i></a>
        </div>
    </div>
</section>

{{-- STORY SECTION --}}
<section class="py-24 px-4 relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-r from-dark-brown via-deep-green to-dark-brown bengali-pattern"></div>
    <div class="relative max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
        <div data-aos="fade-right">
            <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-3">Our Heritage</p>
            <h2 class="font-playfair text-4xl md:text-5xl text-cream font-bold mb-6 leading-tight">
                A Story Rooted in<br><span class="text-gold-gradient">Bengali Tradition</span>
            </h2>
            <p class="text-cream/70 leading-relaxed mb-5">
                Shalik Restaurant was born from a deep love for authentic Bengali cuisine — the kind passed down through
                generations, cooked slowly with care, spiced with memory, and served with unwavering hospitality.
            </p>
            <p class="text-cream/70 leading-relaxed mb-8 font-bangla text-lg">
                "আমাদের রান্নায় আছে মায়ের হাতের স্পর্শ, দেশের মাটির সুগন্ধ।"
            </p>
            <div class="grid grid-cols-3 gap-6 mb-8">
                @foreach([['12+','Years of Excellence'],['50K+','Happy Guests'],['3','Branches']] as [$num,$label])
                <div class="text-center glass-card p-4">
                    <div class="font-playfair text-3xl text-gold font-bold">{{ $num }}</div>
                    <div class="text-cream/60 text-xs mt-1">{{ $label }}</div>
                </div>
                @endforeach
            </div>
            <a href="{{ route('about') }}" class="btn-gold">Our Story <i class="fas fa-arrow-right ml-2"></i></a>
        </div>
        <div class="relative" data-aos="fade-left">
            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-4">
                    <div class="rounded-2xl overflow-hidden h-48 bg-gradient-to-br from-deep-green to-dark-brown flex items-center justify-center border border-gold/20">
                        <i class="fas fa-mortar-pestle text-gold text-5xl opacity-50"></i>
                    </div>
                    <div class="rounded-2xl overflow-hidden h-32 bg-gradient-to-br from-burnt-orange/30 to-dark-brown border border-gold/20 flex items-center justify-center">
                        <i class="fas fa-fire text-gold text-4xl opacity-50"></i>
                    </div>
                </div>
                <div class="space-y-4 pt-8">
                    <div class="rounded-2xl overflow-hidden h-32 bg-gradient-to-br from-deep-green/60 to-dark-brown border border-gold/20 flex items-center justify-center">
                        <i class="fas fa-leaf text-gold text-4xl opacity-50"></i>
                    </div>
                    <div class="rounded-2xl overflow-hidden h-48 bg-gradient-to-br from-dark-brown to-deep-green border border-gold/20 flex items-center justify-center">
                        <i class="fas fa-bowl-food text-gold text-5xl opacity-50"></i>
                    </div>
                </div>
            </div>
            <div class="absolute -bottom-4 -right-4 w-24 h-24 rounded-full bg-gold/10 border-2 border-gold/30 flex items-center justify-center">
                <span class="text-gold font-bangla text-sm text-center leading-tight px-2">হালাল খাবার</span>
            </div>
        </div>
    </div>
</section>

{{-- RESERVATION CTA --}}
<section class="py-20 px-4">
    <div class="max-w-4xl mx-auto">
        <div class="glass-card p-12 text-center relative overflow-hidden" data-aos="zoom-in">
            <div class="absolute inset-0 bengali-pattern opacity-30"></div>
            <div class="relative">
                <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-3">Reserve Your Seat</p>
                <h2 class="font-playfair text-4xl md:text-5xl text-cream font-bold mb-5">
                    Book Your Table Today
                </h2>
                <p class="text-cream/60 mb-8 max-w-xl mx-auto">
                    Experience the finest Bengali hospitality. Reserve your table in advance for a seamless dining experience.
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('reservation.index') }}" class="btn-gold text-base px-10 py-4">
                        <i class="fas fa-calendar-check mr-2"></i>Make Reservation
                    </a>
                    <a href="https://wa.me/{{ env('WHATSAPP_NUMBER') }}" target="_blank" class="btn-outline-gold text-base px-10 py-4">
                        <i class="fab fa-whatsapp mr-2"></i>WhatsApp Us
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- REVIEWS --}}
@if($reviews->count())
<section class="py-20 px-4 bengali-pattern">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-14" data-aos="fade-up">
            <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-2">Testimonials</p>
            <h2 class="font-playfair text-4xl md:text-5xl text-cream">What Our Guests Say</h2>
            <div class="section-divider mt-4"></div>
        </div>
        <div class="swiper reviews-swiper" data-aos="fade-up" data-aos-delay="150">
            <div class="swiper-wrapper pb-10">
                @foreach($reviews as $review)
                <div class="swiper-slide">
                    <div class="glass-card p-8 h-full">
                        <div class="flex items-center gap-1 mb-4 text-gold">
                            @for($i=0;$i<$review->rating;$i++)<i class="fas fa-star text-sm"></i>@endfor
                        </div>
                        <p class="text-cream/80 leading-relaxed mb-6 italic font-playfair text-lg">"{{ $review->content }}"</p>
                        <div class="flex items-center gap-4">
                            <img src="{{ $review->avatar_url }}" alt="{{ $review->customer_name }}"
                                 class="w-12 h-12 rounded-full object-cover border-2 border-gold">
                            <div>
                                <div class="text-cream font-semibold text-sm">{{ $review->customer_name }}</div>
                                <div class="text-cream/50 text-xs">{{ $review->customer_location }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</section>
@endif

{{-- ACTIVE OFFERS --}}
@if($activeOffers->count())
<section class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-14" data-aos="fade-up">
            <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-2">Special Deals</p>
            <h2 class="font-playfair text-4xl md:text-5xl text-cream">Ongoing Offers</h2>
            <div class="section-divider mt-4"></div>
        </div>
        <div class="grid md:grid-cols-3 gap-6">
            @foreach($activeOffers as $offer)
            <a href="{{ route('offers.show', $offer->slug) }}"
               class="glass-card overflow-hidden group hover:-translate-y-2 transition-all duration-300"
               data-aos="fade-up" data-aos-delay="{{ $loop->index * 100 }}">
                <div class="h-48 bg-gradient-to-br from-deep-green to-dark-brown relative overflow-hidden">
                    @if($offer->image)
                        <img src="{{ $offer->image_url }}" alt="{{ $offer->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @endif
                    @if($offer->badge_text)
                    <span class="absolute top-3 right-3 bg-burnt-orange text-white text-xs font-bold px-3 py-1 rounded-full">{{ $offer->badge_text }}</span>
                    @endif
                </div>
                <div class="p-5">
                    <h3 class="font-playfair text-cream text-xl font-semibold mb-2">{{ $offer->title }}</h3>
                    <p class="text-cream/60 text-sm mb-3">{{ Str::limit($offer->description, 80) }}</p>
                    <div class="flex items-center justify-between">
                        <span class="text-gold text-xs">Ends {{ $offer->valid_until->format('M d') }}</span>
                        @if($offer->coupon_code)
                        <span class="bg-gold/20 border border-gold/40 text-gold text-xs px-3 py-1 rounded-full font-mono">{{ $offer->coupon_code }}</span>
                        @endif
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- BRANCHES --}}
@if($branches->count())
<section class="py-20 px-4 bg-deep-green/30 bengali-pattern">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-14" data-aos="fade-up">
            <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-2">Find Us</p>
            <h2 class="font-playfair text-4xl md:text-5xl text-cream">Our Locations</h2>
            <div class="section-divider mt-4"></div>
        </div>
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($branches as $branch)
            <div class="glass-card p-6 hover:-translate-y-1 transition-all" data-aos="fade-up" data-aos-delay="{{ $loop->index*100 }}">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-10 h-10 rounded-full bg-gold/20 flex items-center justify-center">
                        <i class="fas fa-map-marker-alt text-gold"></i>
                    </div>
                    <div>
                        <h3 class="text-cream font-semibold text-lg">{{ $branch->name }}</h3>
                        @if($branch->is_main)<span class="text-xs text-gold">(Main Branch)</span>@endif
                    </div>
                </div>
                <p class="text-cream/60 text-sm mb-3"><i class="fas fa-location-dot mr-2 text-gold/50"></i>{{ $branch->address }}, {{ $branch->city }}</p>
                <p class="text-cream/60 text-sm mb-3"><i class="fas fa-phone mr-2 text-gold/50"></i>{{ $branch->phone }}</p>
                <p class="text-cream/60 text-sm mb-4"><i class="fas fa-clock mr-2 text-gold/50"></i>{{ $branch->opening_time }} – {{ $branch->closing_time }}</p>
                <a href="{{ route('reservation.index') }}?branch_id={{ $branch->id }}" class="btn-outline-gold text-xs px-4 py-2">
                    Book Here
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- LATEST BLOG --}}
@if($latestBlogs->count())
<section class="py-20 px-4">
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-14" data-aos="fade-up">
            <p class="text-gold text-sm tracking-widest uppercase font-poppins mb-2">Latest Stories</p>
            <h2 class="font-playfair text-4xl md:text-5xl text-cream">From Our Blog</h2>
            <div class="section-divider mt-4"></div>
        </div>
        <div class="grid md:grid-cols-3 gap-8">
            @foreach($latestBlogs as $blog)
            <a href="{{ route('blog.show', $blog->slug) }}"
               class="glass-card overflow-hidden group hover:-translate-y-2 transition-all duration-300"
               data-aos="fade-up" data-aos-delay="{{ $loop->index*120 }}">
                <div class="h-52 overflow-hidden bg-gradient-to-br from-deep-green to-dark-brown">
                    <img src="{{ $blog->thumbnail_url }}" alt="{{ $blog->title }}"
                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-6">
                    @if($blog->blogCategory)
                    <span class="text-xs text-gold border border-gold/30 px-3 py-1 rounded-full font-poppins">{{ $blog->blogCategory->name }}</span>
                    @endif
                    <h3 class="font-playfair text-cream text-xl font-semibold mt-3 mb-2 group-hover:text-gold transition-colors">{{ $blog->title }}</h3>
                    <p class="text-cream/60 text-sm mb-4">{{ Str::limit($blog->excerpt, 100) }}</p>
                    <div class="flex items-center justify-between text-xs text-cream/40">
                        <span><i class="fas fa-user mr-1"></i>{{ $blog->author?->name ?? 'Shalik Team' }}</span>
                        <span><i class="fas fa-calendar mr-1"></i>{{ $blog->published_at?->format('M d, Y') }}</span>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
        <div class="text-center mt-10" data-aos="fade-up">
            <a href="{{ route('blog.index') }}" class="btn-outline-gold">Read All Articles <i class="fas fa-arrow-right ml-2"></i></a>
        </div>
    </div>
</section>
@endif

@push('scripts')
<script>
// Hero Swiper with GSAP
const heroSwiper = new Swiper('.hero-swiper', {
    loop: true,
    autoplay: { delay: 6000, disableOnInteraction: false },
    effect: 'fade',
    speed: 1000,
    on: {
        init: function() {
            animateSlide(this.slides[this.activeIndex]);
        },
        slideChangeTransitionStart: function() {
            // Reset others
            gsap.set('.banner-subtitle, .banner-title, .banner-desc, .banner-cta', { y: 30, opacity: 0 });
            animateSlide(this.slides[this.activeIndex]);
        }
    }
});

function animateSlide(slide) {
    const subtitle = slide.querySelector('.banner-subtitle');
    const title    = slide.querySelector('.banner-title');
    const desc     = slide.querySelector('.banner-desc');
    const cta      = slide.querySelector('.banner-cta');

    const tl = gsap.timeline();
    if(subtitle) tl.fromTo(subtitle, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: 'power2.out' }, 0.2);
    if(title)    tl.fromTo(title,    { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: 'power3.out' }, subtitle ? 0.4 : 0.2);
    if(desc)     tl.fromTo(desc,     { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: 'power2.out' }, 0.7);
    if(cta)      tl.fromTo(cta,      { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: 'power2.out' }, 0.9);
}

// Other Swipers
new Swiper('.featured-swiper', {
    slidesPerView:1, spaceBetween:20,
    pagination:{ el:'.featured-swiper .swiper-pagination', clickable:true },
    breakpoints:{ 640:{ slidesPerView:2 }, 1024:{ slidesPerView:3 } },
    autoplay:{ delay:4000, disableOnInteraction:false },
});
new Swiper('.reviews-swiper', {
    slidesPerView:1, spaceBetween:20,
    pagination:{ el:'.reviews-swiper .swiper-pagination', clickable:true },
    breakpoints:{ 768:{ slidesPerView:2 }, 1024:{ slidesPerView:3 } },
    autoplay:{ delay:5000 },
});
</script>
@endpush
@endsection