{{-- Models listing content. Included by resources/views/models/index.blade.php
     and by App\Support\PageSnapshot for the visual designer. --}}
@php($snapshotMode = $snapshotMode ?? false)

@if ($snapshotMode)
    <section class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-6 lg:px-10 mb-10">
            <p class="text-red-700 text-xs font-semibold uppercase tracking-widest mb-2">Our Lineup</p>
            <h1 class="text-[#0a0a0b] text-3xl sm:text-4xl font-bold tracking-tight">Find Your Perfect Jetour</h1>
            <p class="text-neutral-500 mt-2 text-[15px]">Five models, one showroom. Book a test drive today at Oscar World Klang.</p>
        </div>
    </section>
    @include('partials.dynamic-placeholder', ['key' => 'car-models', 'label' => '🚗 Car Models (live)'])
@else
    <section class="bg-white py-16">
        <div class="max-w-7xl mx-auto px-6 lg:px-10 mb-10">
            <p class="text-red-700 text-xs font-semibold uppercase tracking-widest mb-2">Our Lineup</p>
            <h1 class="text-[#0a0a0b] text-3xl sm:text-4xl font-bold tracking-tight">Find Your Perfect Jetour</h1>
            <p class="text-neutral-500 mt-2 text-[15px]">Five models, one showroom. Book a test drive today at Oscar World Klang.</p>
        </div>
        <div class="max-w-7xl mx-auto px-6 lg:px-10 grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($models as $model)
                @include('partials.model-card', ['model' => $model, 'settings' => $settings])
            @endforeach
        </div>
    </section>
@endif

<section class="bg-neutral-50 py-20">
    <div class="max-w-7xl mx-auto px-6 lg:px-10">
        <p class="text-red-700 text-xs font-semibold uppercase tracking-widest mb-2">Side by Side</p>
        <h2 class="text-[#0a0a0b] text-3xl sm:text-4xl font-bold tracking-tight mb-8">Model Comparison</h2>
        <div class="overflow-x-auto rounded-2xl border border-black/[0.08] bg-white">
            <table class="w-full text-sm min-w-[720px]">
                <thead>
                    <tr class="bg-[#0a0a0b] text-white">
                        <th class="text-left font-semibold px-5 py-4">Specification</th>
                        @foreach ($models as $model)
                            <th class="text-left font-semibold px-5 py-4 whitespace-nowrap">{{ $model->name }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    <tr class="bg-white">
                        <td class="px-5 py-3.5 font-medium text-neutral-600">Price (OTR)</td>
                        @foreach ($models as $model)<td class="px-5 py-3.5 text-neutral-700 whitespace-nowrap">{{ $model->price }}</td>@endforeach
                    </tr>
                    <tr class="bg-neutral-50/70">
                        <td class="px-5 py-3.5 font-medium text-neutral-600">Warranty</td>
                        @foreach ($models as $model)<td class="px-5 py-3.5 text-neutral-700 whitespace-nowrap">7yr / 150,000km</td>@endforeach
                    </tr>
                    <tr class="bg-white">
                        <td class="px-5 py-3.5 font-medium text-neutral-600">Test Drive</td>
                        @foreach ($models as $model)<td class="px-5 py-3.5 text-neutral-700 whitespace-nowrap">{{ $model->no_test_drive ? 'Coming soon' : 'Available now' }}</td>@endforeach
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="text-neutral-400 text-xs mt-4">Full engine, drivetrain and ADAS specifications available on each model's page or via WhatsApp.</p>
    </div>
</section>