@extends('layouts.artisanal')

@section('content')
<div class="overflow-hidden">
    <!-- Artisanal Hero Section -->
    <section class="bg-artisanal-dark text-white pt-48 pb-32 relative overflow-hidden">
        <!-- Decoration Icons -->
        <div class="absolute top-20 left-20 opacity-10 hidden lg:block animate-float">
            <svg class="h-32 w-32" fill="currentColor" viewBox="0 0 24 24"><path d="M16 2l-2 2h-4l-2-2-2 2H4v18h16V4h-2l-2-2z"/></svg>
        </div>
        <div class="absolute top-40 right-20 opacity-10 hidden lg:block animate-float" style="animation-delay: -1s">
            <svg class="h-24 w-24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <div class="text-center max-w-4xl mx-auto">
                <p class="text-sm font-bold uppercase tracking-[0.4em] text-white/60 mb-8 animate-reveal">
                    {{ setting('landing_hero_subtitle', 'Bringing Joy With Fresh, Homemade Baked Delights') }}
                </p>
                <h1 class="font-serif text-6xl sm:text-8xl font-bold leading-tight mb-12 animate-reveal" style="animation-delay: 0.1s">
                    {{ setting('landing_hero_title', 'Baking Smiles, One Pastry At A Time') }}
                </h1>
                <div class="animate-reveal" style="animation-delay: 0.3s">
                    <a href="{{ url('/shop') }}" class="btn-artisanal inline-block">See Our Menu</a>
                </div>
            </div>

            <!-- Big Croissant Image -->
            <div class="mt-24 -mb-80 flex justify-center animate-reveal" style="animation-delay: 0.4s">
                <div class="relative w-full max-w-5xl group">
                    <img src="{{ setting('landing_hero_image') ? asset('storage/' . setting('landing_hero_image')) : 'https://images.unsplash.com/photo-1555507036-ab1f4038808a?q=80&w=2052&auto=format&fit=crop' }}" 
                         alt="Hero Product" 
                         class="w-full h-auto drop-shadow-[0_45px_45px_rgba(0,0,0,0.6)] transform group-hover:scale-105 transition-transform duration-1000">
                    
                    <!-- Rating Card -->
                    <div class="absolute bottom-1/4 right-0 lg:-right-10 bg-white text-artisanal-dark p-8 rounded-3xl shadow-2xl hidden md:block animate-float">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="text-2xl font-black">{{ setting('landing_stats_1_value', '4.8') }}</span>
                            <div class="flex text-yellow-400">
                                @for($j=0; $j<5; $j++) <svg class="h-4 w-4 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg> @endfor
                            </div>
                        </div>
                        <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-4">{{ setting('landing_stats_1_label', '(4,582 Reviews)') }}</p>
                        <p class="text-sm font-medium italic leading-relaxed max-w-[200px]">"Amazing Baked Goods Every Time! The Perfect Spot For A Sweet Treat."</p>
                        <p class="text-xs font-bold mt-4">— Daniel K.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Spacing for Hero Overflow (Increased to prevent overlap issues) -->
    <div class="h-96"></div>

    <!-- Premium Products Section -->
    <section class="py-32">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-20">
                <h2 class="font-serif text-6xl font-bold text-artisanal-dark mb-12">Our Premium Product</h2>
                
                <!-- Category Pills -->
                <div class="flex flex-wrap justify-center gap-4">
                    <a href="{{ url('/shop') }}" class="px-8 py-3 rounded-full text-sm font-bold uppercase tracking-widest transition-all {{ !request('category') ? 'bg-artisanal-dark text-white shadow-xl' : 'bg-white text-slate-400 hover:bg-slate-50' }}">All Items</a>
                    @foreach($categories->take(6) as $category)
                        <a href="{{ url('/shop?category=' . $category->slug) }}" class="px-8 py-3 rounded-full text-sm font-bold uppercase tracking-widest transition-all bg-white text-slate-400 hover:bg-slate-50">{{ $category->name }}</a>
                    @endforeach
                </div>
            </div>

            <!-- Products Grid -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
                @foreach($featuredProducts->take(6) as $product)
                    <div class="group flex flex-col items-center text-center animate-reveal" style="animation-delay: {{ $loop->index * 0.1 }}s">
                        <a href="{{ url('/shop/' . $product->slug) }}" class="relative w-full aspect-[4/5] bg-white rounded-[3rem] overflow-hidden mb-10 shadow-sm group-hover:shadow-2xl transition-all duration-700">
                            <img src="{{ $product->images->first()?->image_path ? asset('storage/' . $product->images->first()->image_path) : 'https://placehold.co/600x800?text=' . $product->name }}" 
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-1000">
                            <div class="absolute top-8 right-8">
                                <span class="bg-white/95 backdrop-blur-md px-5 py-2.5 rounded-2xl font-black text-artisanal-dark shadow-lg">
                                    Rp {{ number_format($product->price, 0, ',', '.') }}
                                </span>
                            </div>
                        </a>
                        <div class="px-6">
                            <h3 class="font-serif text-3xl font-bold text-artisanal-dark mb-3">
                                <a href="{{ url('/shop/' . $product->slug) }}" class="hover:text-accent transition-colors">{{ $product->name }}</a>
                            </h3>
                            <p class="text-sm text-slate-400 leading-relaxed mb-10 line-clamp-2">{{ strip_tags($product->description) }}</p>
                            <button onclick="window.location.href='{{ url('/shop/' . $product->slug) }}'" class="w-full py-5 rounded-2xl bg-white border border-slate-100 text-artisanal-dark font-black uppercase tracking-widest text-[10px] hover:bg-artisanal-dark hover:text-white transition-all">Add To Cart</button>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Story Section -->
    <section class="py-32 bg-white relative">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
                <div class="relative">
                    <div class="aspect-square rounded-[4rem] overflow-hidden shadow-2xl relative z-10">
                        <img src="https://images.unsplash.com/photo-1581339399838-2a120c18bba3?q=80&w=2070&auto=format&fit=crop" class="w-full h-full object-cover">
                    </div>
                    <!-- Decorative Background Card -->
                    <div class="absolute -top-10 -left-10 w-full h-full bg-[#fdf8f4] rounded-[4rem] -z-0"></div>
                    
                    <!-- Floating Badge -->
                    <div class="absolute -bottom-10 -right-10 bg-artisanal-dark text-white p-12 rounded-[3.5rem] shadow-2xl hidden md:block max-w-sm z-20 animate-float">
                        <p class="font-serif text-2xl leading-tight">Baked Fresh Daily With Love, Just For You</p>
                    </div>
                </div>
                <div class="animate-reveal" style="animation-delay: 0.2s">
                    <p class="text-[10px] font-black uppercase tracking-[0.4em] text-accent mb-6">Our Story</p>
                    <h2 class="font-serif text-6xl font-bold text-artisanal-dark mb-10 leading-tight">
                        {{ setting('landing_about_title', 'Bite into Our Best') }}
                    </h2>
                    <p class="text-slate-500 text-lg leading-relaxed mb-12 text-balance">
                        {{ setting('landing_about_content', 'Discover Our Handcrafted Selection Of Dishes, Carefully Prepared With Fresh Ingredients And Bold Flavors. Whether You\'re Craving Classic Comfort Foods Or Innovative Creations.') }}
                    </p>
                    <a href="{{ url('/shop') }}" class="btn-artisanal inline-block">Explore More</a>
                    
                    <div class="mt-20 pt-20 border-t border-slate-100 flex items-center gap-8">
                        <div class="relative">
                            <img src="https://ui-avatars.com/api/?name=Emily+Parker&background=3b2314&color=fff&size=128" class="w-20 h-20 rounded-full border-4 border-white shadow-xl">
                            <div class="absolute -bottom-2 -right-2 bg-accent text-white p-1.5 rounded-full"><svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"/><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"/></svg></div>
                        </div>
                        <div>
                            <p class="font-serif text-2xl font-bold text-artisanal-dark">Emily Parker</p>
                            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mt-1">/ Executive Chef</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="py-40 bg-[#fdf8f4]">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-24">
                <p class="text-[10px] font-black uppercase tracking-[0.4em] text-slate-400 mb-6">Testimonials</p>
                <h2 class="font-serif text-6xl font-bold text-artisanal-dark">What they say about us</h2>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div class="bg-white p-16 rounded-[4rem] text-left shadow-sm hover:shadow-2xl transition-all duration-500 animate-reveal">
                    <div class="flex text-yellow-400 mb-8">
                        @for($i=0; $i<5; $i++) <svg class="h-6 w-6 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg> @endfor
                    </div>
                    <p class="text-slate-500 text-lg italic leading-relaxed mb-10">"I've Been Visiting This Bakery For Over A Year, And I Can Honestly Say It Keeps Getting Better. Every Visit, I'm Greeted With Warm Smiles And Treated To The Most Delicious Baked Goods I've Ever Tried."</p>
                    <div class="flex items-center gap-5">
                        <img src="https://ui-avatars.com/api/?name=Sarah+M&background=f0643a&color=fff" class="w-12 h-12 rounded-full shadow-lg">
                        <div>
                            <p class="font-bold text-artisanal-dark">Sarah M.</p>
                            <p class="text-[10px] font-black text-slate-300 uppercase tracking-widest mt-1">Verified Customer</p>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-16 rounded-[4rem] text-left shadow-sm hover:shadow-2xl transition-all duration-500 animate-reveal" style="animation-delay: 0.1s">
                    <div class="flex text-yellow-400 mb-8">
                        @for($i=0; $i<5; $i++) <svg class="h-6 w-6 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg> @endfor
                    </div>
                    <p class="text-slate-500 text-lg italic leading-relaxed mb-10">"I Am Absolutely In Love With This Bakery! The Service They Offer Is Incredible, And The Food Is Beyond Delicious. Every Time I Step In, I'm Greeted By The Most Inviting Aromas."</p>
                    <div class="flex items-center gap-5">
                        <img src="https://ui-avatars.com/api/?name=Michael+P&background=f0643a&color=fff" class="w-12 h-12 rounded-full shadow-lg">
                        <div>
                            <p class="font-bold text-artisanal-dark">Michael P.</p>
                            <p class="text-[10px] font-black text-slate-300 uppercase tracking-widest mt-1">Verified Customer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Final CTA Section -->
    <section class="py-32 bg-[#f0643a] text-white text-center rounded-t-[6rem] mt-32 relative overflow-hidden">
        <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
            <svg class="h-full w-full" fill="currentColor" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 0 L100 100 L100 0 Z"/></svg>
        </div>
        <div class="max-w-4xl mx-auto px-4 relative z-10">
            <h2 class="font-serif text-6xl font-bold mb-10">Ready For Delicious Bakes?</h2>
            <p class="text-xl mb-16 opacity-80 text-balance">Treat Yourself Today! Browse Our Menu And Order Freshly Baked Goodies Straight To Your Door.</p>
            <a href="{{ url('/shop') }}" class="px-16 py-6 bg-white text-[#f0643a] font-black rounded-full uppercase tracking-widest hover:scale-110 active:scale-95 transition-all shadow-2xl">Order Now</a>
        </div>
    </section>
</div>
@endsection