{{--
    Карточка автомобиля для каталога.
    Всегда 4 спека 2×2. Без class=reveal — анимация через родительский .stagger.
    Бейджи с непрозрачным фоном, градиент сверху для читаемости на любом фото.
--}}
<div class="car-card" onclick="window.location='{{ route('catalog.show', $car->id) }}'" style="cursor:pointer">

    <div class="car-img">
        @if($car->photo_main)
            <img src="{{ asset('storage/' . $car->photo_main) }}" alt="{{ $car->make }} {{ $car->model }}" loading="lazy"/>
        @else
            <div style="width:100%;height:100%;background:var(--bg2);display:flex;align-items:center;justify-content:center;color:var(--light);font-size:40px;min-height:200px">🚗</div>
        @endif

        {{-- Градиент сверху — фон под бейджи --}}
        <div style="position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 55%);pointer-events:none"></div>

        {{-- Бейджи — колонкой, чтобы не обрезались и не перекрывались с ♡ --}}
        <div class="car-img-badges" style="flex-direction:column;align-items:flex-start;gap:5px">
            <span class="chip chip-dark">В наличии</span>
            @if($car->condition === 'new')
                <span class="chip" style="background:var(--red);color:#fff">Новый</span>
            @elseif($car->condition === 'used')
                <span class="chip" style="background:rgba(255,255,255,.9);color:var(--text)">С пробегом</span>
            @endif
        </div>

        {{-- ♡ — с data-car-id для JS-логики избранного --}}
        <div class="car-img-fav"
             data-car-id="{{ $car->id }}"
             onclick="event.stopPropagation(); toggleFavorite({{ $car->id }}, this)"
             title="Добавить в избранное">♡</div>
    </div>

    <div class="car-body">

        @if($car->country_origin || $car->city)
        <div class="car-origin">
            @if($car->country_origin){{ $countryFlags[$car->country_origin] ?? '🌍' }} {{ $car->country_origin }}@endif
            @if($car->country_origin && $car->city) · @endif
            @if($car->city){{ $car->city }}@endif
        </div>
        @endif

        <div class="car-name">{{ $car->make }} {{ $car->model }}</div>

        {{-- Всегда 4 спека: год / мощность / топливо / пробег --}}
        <div class="car-specs-row">
            <div class="car-spec-box">
                <div class="car-spec-label">Год</div>
                <div class="car-spec-val">{{ $car->year }}</div>
            </div>
            <div class="car-spec-box">
                <div class="car-spec-label">Мощность</div>
                <div class="car-spec-val">{{ $car->engine_power_hp ? $car->engine_power_hp . ' л.с.' : '—' }}</div>
            </div>
            <div class="car-spec-box">
                <div class="car-spec-label">Топливо</div>
                <div class="car-spec-val">{{ $car->engine_type ? ($fuelLabels[$car->engine_type] ?? $car->engine_type) : '—' }}</div>
            </div>
            <div class="car-spec-box">
                <div class="car-spec-label">Пробег</div>
                <div class="car-spec-val">
                    @if($car->mileage_km !== null)
                        {{ $car->mileage_km > 0 ? number_format($car->mileage_km, 0, '.', ' ') . ' км' : '0 км' }}
                    @else —@endif
                </div>
            </div>
        </div>

        <div class="car-footer">
            <div>
                <div class="car-price-label">Под ключ в РФ</div>
                @if($car->price_rub)
                    <div class="car-price">{{ number_format($car->price_rub, 0, '.', ' ') }} <em>₽</em></div>
                @elseif($car->price_usd)
                    <div class="car-price">{{ number_format($car->price_usd, 0, '.', ' ') }} <em>$</em></div>
                @else
                    <div class="car-price" style="font-size:16px;color:var(--muted)">По запросу</div>
                @endif
            </div>
            <div class="car-go">→</div>
        </div>

    </div>
</div>