{{-- Home page content. Included by resources/views/home.blade.php (normal
     rendering) AND by App\Support\PageSnapshot (to seed the visual designer
     with the page's real, current design). $snapshotMode swaps the two
     auto-syncing sections (car models / news) for "Live Data" placeholders
     instead of baking today's rows into the saved design. --}}
@php
    $waNumber = $settings['whatsapp_number'] ?? '60123456789';
    $waPhone = $settings['phone_display'] ?? '+60 12-345 6789';
    $snapshotMode = $snapshotMode ?? false;
@endphp

{{-- Hero --}}
<section class="relative w-full overflow-hidden bg-[#0a0a0b]">
    <div class="relative h-[80vh] min-h-[560px]">
        <img src="{{ $settings['hero_image'] ?? 'https://images.unsplash.com/photo-1533106418989-88406c7cc8ca?q=80&w=2000&auto=format&fit=crop' }}" alt="SUV driving on a cinematic road" class="absolute inset-0 w-full h-full object-cover opacity-60">
        <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0b] via-[#0a0a0b]/50 to-[#0a0a0b]/60"></div>
        <div class="relative z-10 h-full max-w-7xl mx-auto px-6 lg:px-10 flex flex-col justify-end pb-16">
            <p class="text-red-400 text-sm font-semibold tracking-wide mb-4">{{ $settings['hero_tagline'] ?? 'Official Jetour Dealer — Klang, Selangor' }}</p>
            <h1 class="text-white text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.08] max-w-3xl tracking-tight">{{ $settings['hero_headline'] ?? "Malaysia's Best Value SUVs — Now in Klang" }}</h1>
            <p class="text-white/70 text-lg mt-5 max-w-xl leading-relaxed">{{ $settings['hero_subheadline'] ?? 'Jetour Dashing, VT9, T2, T1 & T2 i-DM — from RM109,800. 7-year warranty. Test drive available today at Prima Klang Avenue.' }}</p>
            <div class="flex flex-wrap items-center gap-4 mt-8">
                <a href="{{ route('contact') }}" class="bg-white text-[#0a0a0b] font-semibold text-[15px] px-8 py-3.5 rounded-full hover:bg-white/90 transition-all duration-200">Book Test Drive</a>
                <a href="{{ route('models.index') }}" class="border border-white/40 text-white font-semibold text-[15px] px-8 py-3.5 rounded-full hover:bg-white/10 hover:border-white/70 transition-all duration-200">View Models</a>
            </div>
            <a href="https://wa.me/{{ $waNumber }}" target="_blank" rel="noreferrer" class="inline-flex items-center gap-2 text-[#25D366] font-medium text-sm mt-6 hover:underline">
                WhatsApp us: {{ $waPhone }} →
            </a>
        </div>
    </div>
    <div class="relative z-10 max-w-6xl mx-auto px-6 -mt-10 pb-14">
        <div class="bg-white rounded-2xl shadow-xl grid grid-cols-2 sm:grid-cols-4 divide-x divide-neutral-100">
            <div class="text-center py-6 px-3"><p class="text-[#0a0a0b] text-2xl sm:text-3xl font-bold tracking-tight">{{ $settings['stat_customers'] ?? '500+' }}</p><p class="text-neutral-500 text-xs sm:text-[13px] mt-1">Happy Customers / Month</p></div>
            <div class="text-center py-6 px-3"><p class="text-[#0a0a0b] text-2xl sm:text-3xl font-bold tracking-tight">{{ $settings['stat_rating'] ?? '4.8★' }}</p><p class="text-neutral-500 text-xs sm:text-[13px] mt-1">Google Rating</p></div>
            <div class="text-center py-6 px-3"><p class="text-[#0a0a0b] text-2xl sm:text-3xl font-bold tracking-tight">{{ $settings['stat_warranty'] ?? '7yr' }}</p><p class="text-neutral-500 text-xs sm:text-[13px] mt-1">Vehicle Warranty</p></div>
            <div class="text-center py-6 px-3"><p class="text-[#0a0a0b] text-2xl sm:text-3xl font-bold tracking-tight">{{ $settings['stat_support'] ?? '24/7' }}</p><p class="text-neutral-500 text-xs sm:text-[13px] mt-1">WhatsApp Support</p></div>
        </div>
    </div>
</section>

{{-- Featured Models --}}
@if ($snapshotMode)
    @include('partials.dynamic-placeholder', ['key' => 'car-models', 'label' => '🚗 Car Models (live)'])
@else
    <section class="bg-white py-20 lg:py-24">
        <div class="max-w-7xl mx-auto px-6 lg:px-10 mb-10 flex items-end justify-between">
            <div>
                <p class="text-red-700 text-xs font-semibold uppercase tracking-widest mb-2">Our Lineup</p>
                <h2 class="text-[#0a0a0b] text-3xl sm:text-4xl font-bold tracking-tight">Find Your Perfect Jetour</h2>
            </div>
            <a href="{{ route('models.index') }}" class="hidden sm:inline-block text-sm font-semibold text-[#0a0a0b] hover:underline">View all models →</a>
        </div>
        @include('partials.scroller-start')
            @foreach ($models as $model)
                @include('partials.model-card', ['model' => $model, 'settings' => $settings])
            @endforeach
        @include('partials.scroller-end')
    </section>
@endif

{{-- News teaser --}}
@if ($snapshotMode)
    @include('partials.dynamic-placeholder', ['key' => 'news', 'label' => '📰 News & Events (live)'])
@else
    <section class="bg-neutral-50 py-20 lg:py-24">
        <div class="max-w-7xl mx-auto px-6 lg:px-10">
            <div class="flex items-end justify-between mb-10">
                <div>
                    <p class="text-red-700 text-xs font-semibold uppercase tracking-widest mb-2">Latest</p>
                    <h2 class="text-[#0a0a0b] text-3xl sm:text-4xl font-bold tracking-tight">News &amp; Events</h2>
                </div>
                <a href="{{ route('news.index') }}" class="hidden sm:inline-block text-sm font-semibold text-[#0a0a0b] hover:underline">View all →</a>
            </div>
            <div class="grid sm:grid-cols-3 gap-6">
                @foreach ($news as $item)
                    @include('partials.news-card', ['item' => $item])
                @endforeach
            </div>
        </div>
    </section>
@endif

{{-- CTA --}}
<section class="bg-[#0a0a0b] py-20">
    <div class="max-w-3xl mx-auto px-6 text-center">
        <h2 class="text-white text-3xl sm:text-4xl font-bold tracking-tight mb-4">Ready to test drive your next Jetour?</h2>
        <p class="text-white/60 text-[15px] mb-8">WhatsApp us or fill in the form — our Klang team replies within the hour.</p>
        <div class="flex flex-wrap items-center justify-center gap-4">
            <a href="{{ route('contact') }}" class="bg-white text-[#0a0a0b] font-semibold text-[15px] px-8 py-3.5 rounded-full hover:bg-white/90 transition-all duration-200">Book Test Drive</a>
            <a href="https://wa.me/{{ $waNumber }}" target="_blank" rel="noreferrer" class="border border-white/40 text-white font-semibold text-[15px] px-8 py-3.5 rounded-full hover:bg-white/10 transition-all duration-200">WhatsApp Us</a>
        </div>
    </div>
</section>