@extends('layouts.app')
@section('title', isset($s['home_meta_title']) && !empty($s['home_meta_title']) ? $s['home_meta_title'] : 'AVIOBOOTS - Premium Men\'s Leather Boots')

{{-- Home Page Dynamic SEO --}}
@section('seo_title', isset($s['home_meta_title']) && !empty($s['home_meta_title']) ? $s['home_meta_title'] : 'AVIOBOOTS - Premium Men\'s Leather Boots')
@section('seo_description', isset($s['home_meta_description']) && !empty($s['home_meta_description']) ? $s['home_meta_description'] : 'Premium handcrafted men\'s leather boots. Formal, casual, street and outdoor styles. Free shipping over $100. Cash on delivery available.')
@section('seo_keywords', isset($s['home_meta_keywords']) && !empty($s['home_meta_keywords']) ? $s['home_meta_keywords'] : 'men leather boots, chelsea boots, chukka boots, formal shoes, hiking boots, premium footwear')

@section('content')
<section id="home" class="hero hero-animated fade-in" @if($heroBg) style="background-image: linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('{{ asset($heroBg) }}'); background-size:cover; background-position:center;" @endif>
    <div class="container">
        <div class="hero-content">
            <h1 class="hero-title">{{ $heroTitle }}</h1>
            <p class="hero-subtitle">{{ $heroSubtitle }}</p>
            <a href="#products" class="btn btn-premium btn-glow btn-scale hero-cta">SHOP NOW</a>
        </div>
    </div>
</section>

@if($sliders->count())
<section class="section gray-bg">
    <div class="container">
        <div class="carousel fade-in">
            @foreach($sliders as $slide)
                <div class="carousel-item" style="position:relative;">
                    <img src="{{ asset($slide->image) }}" alt="{{ $slide->title }}" style="width:100%; height:400px; object-fit:cover; border-radius:12px;">
                    @if($slide->title || $slide->cta_text)
                        <div style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); border-radius:12px; text-align:center; color:#fff; padding:2rem;">
                            @if($slide->title)<h2 style="font-size:2rem; margin-bottom:.5rem; text-shadow:0 2px 8px rgba(0,0,0,.4);">{{ $slide->title }}</h2>@endif
                            @if($slide->subtitle)<p style="font-size:1.1rem; margin-bottom:1.2rem; opacity:.9;">{{ $slide->subtitle }}</p>@endif
                            @if($slide->cta_text)<a href="{{ $slide->cta_url ?: '/' }}" class="btn">{{ $slide->cta_text }}</a>@endif
                        </div>
                    @endif
                </div>
            @endforeach
        </div>
        <div style="text-align:center; margin-top:2rem;">
            <a href="#products" class="btn">View all</a>
        </div>
    </div>
</section>
@endif

<section class="section fade-in scroll-animate">
    <div class="container">
        <h2 class="section-title luxury-fade-up">{{ $taglineTitle }}</h2>
        <p style="text-align:center; font-size:1.2rem; max-width:600px; margin:0 auto;">{{ $taglineText }}</p>
    </div>
</section>

<!-- NEW ARRIVALS - First Section -->
<section class="section fade-in scroll-zoom-in">
    <div class="container">
        <h2 class="section-title luxury-fade-up stagger-1">NEW ARRIVALS</h2>
        <div class="products-grid">
            @forelse($newArrivals as $product)
                @include('partials.product-card', ['product' => $product])
            @empty
                <p style="text-align:center; width:100%;">No new arrivals yet. Check back soon!</p>
            @endforelse
        </div>
    </div>
</section>

<!-- OUR COLLECTION - Second Section -->
<section id="products" class="section gray-bg fade-in">
    <div class="container">
        <h2 class="section-title luxury-fade-up stagger-2">OUR COLLECTION</h2>
        <div class="filters">
            <button class="filter-btn active" data-filter="all">All</button>
            <button class="filter-btn" data-filter="formal">Formal</button>
            <button class="filter-btn" data-filter="casual">Casual</button>
            <button class="filter-btn" data-filter="street">Street</button>
            <button class="filter-btn" data-filter="outdoor">Outdoor</button>
        </div>
        <div class="products-grid filterable">
            @forelse($collection as $product)
                @include('partials.product-card', ['product' => $product])
            @empty
                <p style="text-align:center; width:100%;">No products in collection yet.</p>
            @endforelse
        </div>
    </div>
</section>

<!-- SPECIAL OFFERS -->
<section class="special-offers fade-in">
    <div class="container">
        <h2 class="section-title luxury-fade-up stagger-3">SPECIAL OFFERS</h2>
        <section class="promo fade-in">
            <div class="container">
                <h2>{{ $promoTitle }}</h2>
                <p style="font-size:1.5rem; margin-bottom:1rem;">{{ $promoSub }}</p>
                <div class="countdown" style="font-size:2rem; font-weight:600; margin:20px 0;"></div>
                <a href="{{ route('offers') }}" class="btn" style="border-color:#fff; background:#fff; color:#000;">SHOP SALE</a>
            </div>
        </section>
        <div class="products-grid">
            @foreach($specialOffers as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
</section>

<section class="section gray-bg fade-in">
    <div class="container">
        <h2 class="section-title luxury-fade-up stagger-4">BEST SELLERS</h2>
        <div class="products-grid">
            @foreach($bestSellers as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
</section>

<section class="section fade-in">
    <div class="container">
        <h2 class="section-title luxury-fade-up stagger-5">CUSTOMER FAVORITES</h2>
        <div class="carousel">
            @foreach($favorites as $product)
                <div class="carousel-item">
                    @include('partials.product-card', ['product' => $product])
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="section gray-bg fade-in">
    <div class="container">
        <h2 class="section-title luxury-fade-up">WHY CHOOSE AVIOBOOTS</h2>
        <div class="products-grid" style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
            <div style="text-align:center; padding:2rem;"><h3>Bespoke Only</h3><p>Every pair made exclusively to your order</p></div>
            <div style="text-align:center; padding:2rem;"><h3>Premium Leather</h3><p>Hand-selected full-grain leather uppers</p></div>
            <div style="text-align:center; padding:2rem;"><h3>Size Exchange</h3><p>Size issues? We exchange — no questions asked</p></div>
            <div style="text-align:center; padding:2rem;"><h3>DHA Lahore</h3><p>Visit us at E 158 C Riffle Range Road</p></div>
        </div>
    </div>
</section>

<section class="section fade-in">
    <div class="container">
        <h2 class="section-title luxury-fade-up">WHAT OUR CUSTOMERS SAY</h2>
        @if($testimonials->isNotEmpty())
        <div class="carousel">
            @foreach($testimonials as $t)
            <div style="text-align:center; padding:2rem; max-width:620px; margin:0 auto;">
                @if($t->image)
                    <img src="{{ asset($t->image) }}" alt="{{ $t->customer_name }}" style="width:72px; height:72px; border-radius:50%; object-fit:cover; margin:0 auto .75rem; display:block; border:3px solid #f59e0b;">
                @else
                    <div style="width:72px; height:72px; border-radius:50%; background:#f59e0b; color:#0f172a; font-size:1.5rem; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto .75rem;">{{ strtoupper(substr($t->customer_name,0,1)) }}</div>
                @endif
                <div style="margin-bottom:.6rem; color:#f59e0b;">
                    @for($i=1; $i<=5; $i++)<i class="fa-solid fa-star" style="{{ $i <= $t->rating ? 'color:#f59e0b' : 'color:#e2e8f0' }}"></i>@endfor
                </div>
                <p style="font-style:italic; font-size:1.05rem; line-height:1.7; color:#374151;">"{{ $t->review }}"</p>
                <h4 style="margin-top:.75rem; font-weight:600;">— {{ $t->customer_name }}@if($t->customer_role), <span style="font-weight:400; color:#64748b;">{{ $t->customer_role }}</span>@endif</h4>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</section>

<section class="newsletter fade-in">
    <div class="container">
        <h2 class="section-title">JOIN THE AVIO CLUB</h2>
        <p style="font-size:1.2rem; margin-bottom:2rem;">New designs • Bespoke updates • Exclusive offers from DHA Lahore</p>
        <form>
            @csrf
            <input type="email" placeholder="Enter your email" required>
            <button type="submit" class="btn" style="background:#fff; color:#000; border-color:#fff;">SUBSCRIBE</button>
        </form>
    </div>
</section>
@endsection