@extends('layouts.app')

@section('title', 'دكان موتورز - بيع وشراء السيارات في مصر')

@section('content')
    {{-- Hero --}}
    <section class="relative overflow-hidden">
        <div class="absolute inset-0 bg-cover bg-center brightness-125 contrast-105 saturate-110"
             style="background-image:url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1920&q=80&auto=format&fit=crop');"></div>
        {{-- Dark gradient only on the text (right) side so the car stays visible on the left --}}
        <div class="absolute inset-0 bg-gradient-to-l from-black/85 via-black/45 to-black/5"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/35 to-transparent"></div>

        <div class="relative max-w-7xl mx-auto px-4 py-20 md:py-28">
            <span class="inline-block rounded-full bg-brand-400/15 border border-brand-400/30 px-4 py-1 text-sm font-bold text-brand-400 mb-5">
                أكبر سوق سيارات في مصر
            </span>
            <h1 class="text-3xl md:text-5xl font-extrabold leading-tight max-w-2xl text-white">
                لاقي عربية أحلامك أو <span class="text-brand-400">بيع عربيتك</span> بسهولة
            </h1>
            <p class="mt-4 text-lg text-zinc-300 max-w-xl">
                آلاف السيارات الجديدة والمستعملة من الأفراد والمعارض في كل محافظات مصر.
            </p>

            {{-- Quick search --}}
            <form action="{{ route('listings.index') }}" method="GET"
                  class="mt-8 bg-ink-900/90 backdrop-blur border border-ink-800 rounded-2xl p-3 md:p-4 shadow-2xl grid grid-cols-1 md:grid-cols-4 gap-3 max-w-3xl">
                <input type="text" name="q" placeholder="ابحث عن سيارة..."
                       class="dm-field md:col-span-2">
                <select name="condition" class="dm-field dm-select">
                    <option value="">كل الحالات</option>
                    <option value="new">جديدة</option>
                    <option value="used">مستعملة</option>
                </select>
                <button type="submit" class="rounded-lg bg-brand-400 px-6 py-2.5 text-sm font-bold text-black hover:bg-brand-300 transition">
                    ابحث
                </button>
            </form>
        </div>
    </section>

    {{-- Browse by make --}}
    <section class="max-w-7xl mx-auto px-4 py-12">
        <h2 class="text-xl sm:text-2xl font-extrabold text-fg mb-6">تصفح حسب الماركة</h2>
        {{-- Mobile: horizontal slider --}}
        <div class="sm:hidden -mx-4 px-4 flex gap-3 overflow-x-auto pb-2 snap-x [&::-webkit-scrollbar]:hidden" style="scrollbar-width:none;">
            @foreach ($makes as $make)
                @include('partials.brand-card', ['extra' => 'shrink-0 w-[84px] snap-start'])
            @endforeach
        </div>

        {{-- Desktop: grid --}}
        <div class="hidden sm:grid grid-cols-6 gap-3">
            @foreach ($makes as $make)
                @include('partials.brand-card')
            @endforeach
        </div>
    </section>

    {{-- Featured --}}
    @if ($featured->isNotEmpty())
        <section class="max-w-7xl mx-auto px-4 py-6">
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl sm:text-2xl font-extrabold text-fg">إعلانات مميزة</h2>
                <a href="{{ route('listings.index') }}" class="text-sm font-semibold text-accent hover:underline">عرض الكل</a>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
                @foreach ($featured as $listing)
                    <x-listing-card :listing="$listing" />
                @endforeach
            </div>
        </section>
    @endif

    {{-- Latest --}}
    <section class="max-w-7xl mx-auto px-4 py-6">
        <div class="flex items-center justify-between mb-6">
            <h2 class="text-xl sm:text-2xl font-extrabold text-fg">أحدث الإعلانات</h2>
            <a href="{{ route('listings.index') }}" class="text-sm font-semibold text-accent hover:underline">عرض الكل</a>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            @foreach ($latest as $listing)
                <x-listing-card :listing="$listing" />
            @endforeach
        </div>
    </section>
@endsection