<script setup>
import { AnimatePresence, motion } from 'motion-v'
import {
  Camera,
  Check,
  ArrowRight,
  Fuel,
  Maximize2,
  MessageCircle,
  Settings,
  ShieldCheck,
  Users,
} from "lucide-vue-next";
import { carTagIcons } from "~/components/city-rental/icons";
import { normalizeCityRentalHref } from "~/components/city-rental/link-utils";
import { matchesCityRentalFilter } from "~/components/city-rental/vehicle-adapter";
const props = defineProps({
  availableCars: {
    type: Object,
    required: true,
  },
  searchUrl: {
    type: String,
    default: "",
  },
  whatsappUrl: {
    type: String,
    default: "",
  },
});

const availableCars = computed(() => props.availableCars || {});
const searchUrl = computed(() => normalizeCityRentalHref(props.searchUrl));
const checkDatesUrl = computed(() => {
  const url = searchUrl.value;

  if (!url) {
    return '';
  }

  return url.includes('#available-cars') ? '#city-rental-search' : url;
});
const whatsappUrl = computed(() => normalizeCityRentalHref(props.whatsappUrl));
const activeFilter = ref("All");
const sortBy = ref("recommended");
const currency = ref("USD");
const compareList = ref([]);
const showCompareModal = ref(false);

const currencies = computed(() =>
  Array.isArray(props.availableCars?.currencies)
    ? props.availableCars.currencies
    : [],
);
const filters = computed(() =>
  ['All', 'Cheap', 'SUV', 'Family', 'Premium', 'Kazbegi / Gudauri'],
);
const labels = computed(() => ({
  sectionTitle: props.availableCars?.sectionTitle || 'Which car fits your trip?',
  sortLabel: props.availableCars?.sortLabel || 'Sort by:',
}));
const sourceCars = computed(() => Array.isArray(availableCars.value?.cars) ? availableCars.value.cars : []);

function vehicleDetailUrl(car) {
  return normalizeCityRentalHref(car?.path || car?.ctaUrl || '');
}

function normalizeTag(tag) {
  if (typeof tag === 'string') {
    return {
      label: tag,
      iconKey: '',
      color: 'bg-slate-50 text-slate-600 border-slate-200',
    };
  }

  return tag || {};
}

const activeCurrency = computed(
  () =>
    currencies.value.find((entry) => entry.code === currency.value) ||
    currencies.value[0] || { code: "USD", symbol: "$", rate: 1 },
);

function convertPrice(amount) {
  return Number(amount || 0) * Number(activeCurrency.value.rate || 1);
}

function formatPrice(amount) {
  if (!Number(amount)) {
    return '—';
  }

  return `${activeCurrency.value.symbol}${Math.round(convertPrice(amount))}`;
}

function formatBandPrice(car, bandKey) {
  const prices = car?.prices || {};
  const fallback = Number(car?.displayPriceFrom || car?.priceFrom || car?.baseDailyRate || car?.price || 0);
  const amount = bandKey === '1-3d'
    ? prices['1-3d'] ?? prices['1-2d'] ?? prices['1-4d'] ?? fallback
    : bandKey === '4-7d'
      ? prices['4-7d'] ?? prices['4-6d'] ?? prices['7-14d'] ?? car?.displayPriceFrom ?? car?.priceFrom ?? fallback
      : bandKey === '8-14d'
        ? prices['8-14d'] ?? prices['7-14d'] ?? prices['15-29d'] ?? car?.displayPriceFrom ?? car?.priceFrom ?? fallback
        : bandKey === '15+d'
          ? prices['15+d'] ?? prices['15-29d'] ?? car?.priceFrom ?? fallback
          : prices[bandKey] ?? fallback;

  return Number(amount) ? formatPrice(amount) : '—';
}

function toggleCompare(id) {
  if (compareList.value.includes(id)) {
    compareList.value = compareList.value.filter((carId) => carId !== id);
    return;
  }

  if (compareList.value.length < 3) {
    compareList.value = [...compareList.value, id];
  }
}

function clearCompare() {
  compareList.value = [];
  showCompareModal.value = false;
}

const selectedCars = computed(() =>
  compareList.value
    .map((id) => sourceCars.value.find((car) => car.id === id))
    .filter(Boolean),
);

const compareSummary = computed(() => {
  const template = availableCars.value?.compareDrawerSelectedTemplate || '{count} / 3 selected';
  return String(template).replace('{count}', String(selectedCars.value.length));
});

function openCompareModal() {
  if (selectedCars.value.length < 2) {
    return;
  }

  showCompareModal.value = true;
}

function closeCompareModal() {
  showCompareModal.value = false;
}

const displayedCars = computed(() => {
  const cars = [...sourceCars.value];

  const filtered = cars.filter((car) => {
    if (activeFilter.value === "All") return true;
    if (activeFilter.value === "Cheap") return Number(car.price || 0) < 50;
    return matchesCityRentalFilter(car, activeFilter.value);
  });

  return filtered.sort((left, right) => {
    if (sortBy.value === "price_asc")
      return Number(left.price || 0) - Number(right.price || 0);
    if (sortBy.value === "price_desc")
      return Number(right.price || 0) - Number(left.price || 0);
    const leftOrder = Number(left.homeSortOrder || Number.MAX_SAFE_INTEGER);
    const rightOrder = Number(right.homeSortOrder || Number.MAX_SAFE_INTEGER);

    if (leftOrder !== rightOrder) {
      return leftOrder - rightOrder;
    }

    return Number(left.price || 0) - Number(right.price || 0);
  });
});
</script>

<template>
  <section id="available-cars" class="mb-24 relative">
    <div
      class="flex flex-col md:flex-row justify-between items-start md:items-end mb-6 sm:mb-10 gap-4 sm:gap-6"
    >
      <div>
        <h2
          class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-3 sm:mb-4 tracking-tight"
        >
          {{ availableCars.title }}
        </h2>
        <p
          class="text-base sm:text-lg text-slate-600 max-w-2xl leading-relaxed"
        >
          {{ availableCars.description }}
        </p>
      </div>
    </div>

    <div
      class="mb-6 sm:mb-10 flex flex-col xl:flex-row xl:items-end justify-between gap-5 sm:gap-6"
    >
      <div class="w-full xl:w-auto overflow-visible">
        <div
          class="text-[11px] sm:text-sm font-bold text-slate-800 uppercase tracking-wider mb-3 sm:mb-4 border-l-4 border-brand-orange pl-2 sm:pl-3"
        >
          {{ labels.sectionTitle }}
        </div>
        <div
          class="flex overflow-x-auto pb-4 pt-2 sm:pt-3 hide-scrollbar gap-2 snap-x pr-4 sm:pr-0"
        >
          <button
            v-for="filter in filters"
            :key="filter"
            type="button"
            :class="[
              'snap-start shrink-0 whitespace-nowrap px-4 sm:px-5 py-2 sm:py-2.5 rounded-full font-bold text-[13px] sm:text-sm transition-all shadow-sm',
              activeFilter === filter
                ? 'bg-slate-900 sm:bg-brand-orange text-white ring-2 ring-slate-900 sm:ring-brand-orange ring-inset'
                : 'bg-white text-slate-600 hover:bg-slate-50 border border-slate-200 hover:border-slate-300',
            ]"
            @click="activeFilter = filter"
          >
            {{ filter }}
          </button>
        </div>
      </div>

      <div
        class="flex items-center gap-3 shrink-0 w-full sm:w-auto mt-2 sm:mt-0"
      >
        <span
          class="hidden sm:inline text-[11px] sm:text-sm font-bold text-slate-500 uppercase tracking-wider"
          >{{ labels.sortLabel }}</span
        >
        <select
          v-model="sortBy"
          class="w-full sm:w-auto bg-slate-50 border border-slate-200 text-slate-900 text-[13px] sm:text-sm font-bold rounded-xl px-4 py-3 sm:py-2.5 focus:outline-none focus:ring-2 focus:ring-slate-900/10 appearance-none pr-10 relative bg-[url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E')] bg-[length:20px] bg-[position:right_10px_center] bg-no-repeat"
        >
          <option
            v-for="option in availableCars.sortOptions"
            :key="option.value"
            :value="option.value"
          >
            {{ option.label }}
          </option>
        </select>
      </div>
    </div>

    <div
      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
      itemScope
      itemType="https://schema.org/ItemList"
    >
      <div
        v-for="(car, index) in displayedCars"
        :key="car.id"
        itemProp="itemListElement"
        itemScope
        itemType="https://schema.org/Product"
        class="group bg-white rounded-3xl border border-slate-100 shadow-[0_4px_20px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all overflow-hidden flex flex-col relative"
      >
        <meta itemProp="position" :content="String(index + 1)" />

        <div class="absolute top-4 right-4 z-10">
          <button
            type="button"
            :class="[
              'flex items-center gap-2 px-3 py-1.5 rounded-full text-[11px] font-bold uppercase tracking-wider border shadow-sm backdrop-blur-md transition-colors',
              compareList.includes(car.id)
                ? 'bg-slate-900 border-slate-900 text-white'
                : 'bg-white/90 border-slate-200 text-slate-700 hover:bg-white',
            ]"
            @click="toggleCompare(car.id)"
          >
            <Check v-if="compareList.includes(car.id)" class="w-3.5 h-3.5" />
            <Maximize2 v-else class="w-3.5 h-3.5" />
            {{
              compareList.includes(car.id)
                ? availableCars.addedLabel || "Added"
                : availableCars.compareLabel || "Compare"
            }}
          </button>
        </div>

        <NuxtLink
          v-if="vehicleDetailUrl(car)"
          :to="vehicleDetailUrl(car)"
          class="relative aspect-[4/3] bg-slate-50 overflow-hidden block"
          :aria-label="`Open ${car.name} details`"
        >
          <img
            :src="car.image"
            :alt="`Rental car ${car.name} in Tbilisi`"
            class="w-full h-full object-contain p-4 sm:p-5 group-hover:scale-105 transition-transform duration-700"
            loading="lazy"
            itemProp="image"
          />

          <span
            class="absolute bottom-4 left-4 bg-slate-900/80 backdrop-blur-md text-white px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-2 hover:bg-slate-900 transition-colors"
          >
            <Camera class="w-4 h-4" />
            {{ Number(car.photosCount) > 0 ? car.photosCount : '—' }} Real Photos
          </span>
        </NuxtLink>
        <div
          v-else
          class="relative aspect-[4/3] bg-slate-50 overflow-hidden"
        >
          <img
            :src="car.image"
            :alt="`Rental car ${car.name} in Tbilisi`"
            class="w-full h-full object-contain p-4 sm:p-5 group-hover:scale-105 transition-transform duration-700"
            loading="lazy"
            itemProp="image"
          />

          <button
            class="absolute bottom-4 left-4 bg-slate-900/80 backdrop-blur-md text-white px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-2 hover:bg-slate-900 transition-colors"
          >
            <Camera class="w-4 h-4" />
            {{ Number(car.photosCount) > 0 ? car.photosCount : '—' }} Real Photos
          </button>
        </div>

        <div class="px-6 pt-5 pb-6 flex flex-col flex-1">
          <div class="flex flex-wrap gap-2 mb-4">
            <span
              v-for="tag in car.tags"
              :key="normalizeTag(tag).label"
              :class="`flex items-center gap-1 px-2.5 py-1.5 border rounded-md text-[10px] uppercase font-bold tracking-wider ${normalizeTag(tag).color || 'bg-slate-50 text-slate-600 border-slate-200'}`"
            >
              <component
                :is="carTagIcons[normalizeTag(tag).iconKey] || ShieldCheck"
                class="w-3 h-3"
              />
              {{ normalizeTag(tag).label || tag }}
            </span>
          </div>

          <div class="flex justify-between items-start mb-4">
            <div class="flex-1 min-w-0 pr-3">
              <div
                class="text-[10px] sm:text-xs font-bold text-slate-400 uppercase tracking-wider mb-1 truncate"
              >
                {{ car.category }}
              </div>
              <NuxtLink
                v-if="vehicleDetailUrl(car)"
                :to="vehicleDetailUrl(car)"
                class="group inline-flex items-center gap-2 text-lg sm:text-xl font-bold text-slate-900 leading-tight hover:text-brand-orange transition-colors"
              >
                {{ car.name }}
              </NuxtLink>
              <h3
                v-else
                class="text-lg sm:text-xl font-bold text-slate-900 leading-tight"
              >
                {{ car.name }}
              </h3>
            </div>

            <div
              class="flex flex-col items-end text-right shrink-0"
              itemProp="offers"
              itemScope
              itemType="https://schema.org/Offer"
            >
              <meta itemProp="priceCurrency" :content="activeCurrency.code" />
              <meta
                v-if="Number(car.price)"
                itemProp="price"
                :content="String(Math.round(convertPrice(car.price)))"
              />
              <link itemProp="availability" href="https://schema.org/InStock" />

              <div
                class="flex gap-1 text-[9px] sm:text-[10px] uppercase font-bold text-slate-400 mb-1 bg-slate-50 px-1.5 sm:px-2 py-0.5 rounded-md border border-slate-100"
              >
                <template
                  v-for="(entry, index) in currencies"
                  :key="entry.code"
                >
                  <button
                    type="button"
                    :class="
                      currency === entry.code
                        ? 'text-brand-orange'
                        : 'hover:text-slate-600 transition-colors'
                    "
                    @click="currency = entry.code"
                  >
                    {{ entry.code }}
                  </button>
                  <span v-if="index < currencies.length - 1" class="opacity-50">
                    ·
                  </span>
                </template>
              </div>

              <div class="flex items-baseline gap-1">
                <span class="text-[11px] sm:text-sm text-slate-500 font-medium"
                  >from</span
                >
                <div
                  class="text-xl sm:text-2xl font-black text-brand-orange tracking-tight"
                >
                  {{ formatPrice(car.price) }}
                </div>
                <span class="text-[11px] sm:text-sm font-medium text-slate-500"
                  >/d</span
                >
              </div>
            </div>
          </div>

          <div
            class="bg-slate-50 rounded-xl p-2.5 sm:p-3 mb-5 sm:mb-6 grid grid-cols-4 gap-1.5 sm:gap-2 border border-slate-100"
          >
            <div class="text-center">
              <div
                class="text-[9px] sm:text-[10px] text-slate-400 font-bold mb-0.5 sm:mb-1"
              >
                1-3d
              </div>
              <div class="text-[11px] sm:text-sm font-bold text-slate-800">
                {{ formatBandPrice(car, '1-3d') }}
              </div>
            </div>
            <div class="text-center">
              <div
                class="text-[9px] sm:text-[10px] text-slate-400 font-bold mb-0.5 sm:mb-1"
              >
                4-7d
              </div>
              <div class="text-[11px] sm:text-sm font-bold text-slate-800">
                {{ formatBandPrice(car, '4-7d') }}
              </div>
            </div>
            <div class="text-center">
              <div
                class="text-[9px] sm:text-[10px] text-slate-400 font-bold mb-0.5 sm:mb-1"
              >
                8-14d
              </div>
              <div class="text-[11px] sm:text-sm font-bold text-slate-800">
                {{ formatBandPrice(car, '8-14d') }}
              </div>
            </div>
            <div class="text-center">
              <div
                class="text-[9px] sm:text-[10px] text-slate-400 font-bold mb-0.5 sm:mb-1"
              >
                15+d
              </div>
              <div class="text-[11px] sm:text-sm font-bold text-slate-800">
                {{ formatBandPrice(car, '15+d') }}
              </div>
            </div>
          </div>

          <div
            class="grid grid-cols-2 gap-y-2 sm:gap-y-3 gap-x-2 sm:gap-x-4 mb-5 sm:mb-6 mt-auto"
          >
            <div
              class="flex items-center gap-1.5 sm:gap-2 text-[12px] sm:text-sm text-slate-600 font-medium"
            >
              <Settings
                class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-400 shrink-0"
              />
              <span class="truncate">{{ car.specs.transmission }}</span>
            </div>
            <div
              class="flex items-center gap-1.5 sm:gap-2 text-[12px] sm:text-sm text-slate-600 font-medium"
            >
              <Users
                class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-400 shrink-0"
              />
              <span class="truncate">{{ car.specs.seats == null ? '—' : `${car.specs.seats} seats` }}</span>
            </div>
            <div
              class="flex items-center gap-1.5 sm:gap-2 text-[12px] sm:text-sm text-slate-600 font-medium"
            >
              <Fuel class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-400 shrink-0" />
              <span class="truncate">{{ car.specs.fuel }}</span>
            </div>
            <div
              class="flex items-center gap-1.5 sm:gap-2 text-[12px] sm:text-sm text-slate-600 font-medium"
            >
              <Briefcase
                class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-slate-400 shrink-0"
              />
              <span class="truncate">{{ car.specs.luggage == null ? '—' : `${car.specs.luggage} bags` }}</span>
            </div>
          </div>

          <div
            class="flex justify-between items-center bg-slate-50/80 rounded-xl px-3 py-2.5 sm:p-3 mb-5 sm:mb-6 border border-slate-100"
          >
            <div
              class="flex items-center gap-1.5 sm:gap-2 text-[13px] sm:text-sm"
            >
              <ShieldCheck class="w-4 h-4 text-slate-500" />
              <span class="text-slate-700 font-medium">{{
                availableCars.refundableDepositLabel
              }}</span>
            </div>
            <div class="text-[13px] sm:text-sm font-bold text-slate-900">
              {{ car.deposit == null ? '—' : formatPrice(car.deposit) }}
            </div>
          </div>

          <div class="flex gap-2">
            <NuxtLink
              v-if="checkDatesUrl"
              :to="checkDatesUrl"
              class="flex-1 bg-slate-900 hover:bg-slate-800 text-white py-3 sm:py-3.5 rounded-xl text-[13px] sm:text-sm font-bold transition-colors shadow-lg shadow-slate-900/10 text-center"
            >
              {{ availableCars.checkDatesLabel }}
            </NuxtLink>
            <a
              v-if="whatsappUrl"
              :href="whatsappUrl"
              target="_blank"
              rel="noreferrer"
              class="bg-[#25D366]/10 hover:bg-[#25D366]/20 text-[#25D366] p-3 sm:p-3.5 rounded-xl transition-colors border border-[#25D366]/20"
            >
              <MessageCircle class="w-5 h-5 sm:w-5 sm:h-5" />
            </a>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="compareList.length > 0"
      class="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 shadow-[-0_10px_40px_rgba(0,0,0,0.1)] transform transition-transform border-t border-slate-200"
    >
      <div
        class="absolute inset-0 bg-white/90 backdrop-blur-xl border-t border-white/50"
      />
      <div class="relative max-w-7xl mx-auto flex items-center justify-between">
        <div class="flex items-center gap-6">
          <div>
            <div
              class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1"
            >
              {{ availableCars.compareDrawerTitle }}
            </div>
            <div class="font-bold text-slate-900">
              {{
                availableCars.compareDrawerSelectedTemplate.replace(
                  "{count}",
                  String(compareList.length),
                )
              }}
            </div>
          </div>
          <div class="hidden md:flex items-center gap-2">
            <div
              v-for="id in compareList"
              :key="id"
              class="flex items-center gap-2 bg-slate-100 pl-2 pr-3 py-1.5 rounded-lg border border-slate-200"
            >
              <NuxtLink :to="(sourceCars.find((car) => car.id === id) || {}).path || (sourceCars.find((car) => car.id === id) || {}).ctaUrl || ''">
                <img
                  :src="(sourceCars.find((car) => car.id === id) || {}).image"
                  :alt="
                    (sourceCars.find((car) => car.id === id) || {}).name
                  "
                  class="w-8 h-6 object-contain rounded shadow-sm bg-white p-0.5"
                />
              </NuxtLink>
              <NuxtLink
                :to="(sourceCars.find((car) => car.id === id) || {}).path || (sourceCars.find((car) => car.id === id) || {}).ctaUrl || ''"
                class="text-xs font-bold text-slate-800 hover:text-brand-orange"
              >
                {{
                  (sourceCars.find((car) => car.id === id) || {}).name
                }}
              </NuxtLink>
              <button
                type="button"
                class="ml-1 text-slate-400 hover:text-red-500"
                @click="toggleCompare(id)"
              >
                &times;
              </button>
            </div>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <button
            type="button"
            class="text-sm font-bold text-slate-500 hover:text-slate-900 transition-colors"
            @click="clearCompare"
          >
            {{ availableCars.compareDrawerClearLabel }}
          </button>
          <button
            type="button"
            :disabled="selectedCars.length < 2"
            class="bg-brand-orange text-white px-6 py-3 rounded-xl font-bold shadow-lg shadow-brand-orange/20 hover:opacity-90 transition-opacity"
            :class="selectedCars.length < 2 ? 'opacity-50 cursor-not-allowed hover:opacity-50' : ''"
            @click="openCompareModal"
          >
            {{ availableCars.compareDrawerActionLabel }}
          </button>
        </div>
      </div>
    </div>
  </section>

  <AnimatePresence>
    <div
      v-if="showCompareModal && selectedCars.length > 0"
      class="fixed inset-0 z-[80] flex items-center justify-center p-4 sm:p-6 md:p-10"
    >
      <motion.div
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
        :exit="{ opacity: 0 }"
        class="absolute inset-0 bg-slate-950/65 backdrop-blur-sm"
        @click="closeCompareModal"
      />

      <motion.div
        :initial="{ opacity: 0, y: 18, scale: 0.98 }"
        :animate="{ opacity: 1, y: 0, scale: 1 }"
        :exit="{ opacity: 0, y: 18, scale: 0.98 }"
        class="relative w-full max-w-7xl max-h-[90vh] bg-white/92 backdrop-blur-2xl rounded-[2rem] shadow-2xl overflow-hidden flex flex-col border border-white/60"
      >
        <div class="flex items-start justify-between gap-4 px-5 sm:px-6 py-4 sm:py-5 border-b border-slate-100 bg-white/70">
          <div>
            <div class="text-[10px] font-bold uppercase tracking-[0.24em] text-slate-400 mb-1">
              {{ availableCars.compareDrawerTitle }}
            </div>
            <h3 class="text-2xl sm:text-3xl font-display font-bold text-slate-900 tracking-tight">
              {{ compareSummary }}
            </h3>
          </div>
          <div class="flex items-center gap-2 sm:gap-3">
            <button
              type="button"
              class="px-4 py-2.5 text-sm font-bold text-slate-500 hover:text-slate-900 hover:bg-slate-100 rounded-xl transition-all"
              @click="clearCompare"
            >
              {{ availableCars.compareDrawerClearLabel }}
            </button>
            <button
              type="button"
              class="w-10 h-10 rounded-full bg-slate-50 hover:bg-slate-100 text-slate-500 hover:text-slate-900 flex items-center justify-center transition-colors"
              @click="closeCompareModal"
            >
              <X class="w-5 h-5" />
            </button>
          </div>
        </div>

        <div class="flex-1 overflow-y-auto p-5 sm:p-6 bg-slate-50/60">
          <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 sm:gap-5">
            <div
              v-for="car in selectedCars"
              :key="car.id"
              class="bg-white rounded-[1.75rem] border border-slate-100 shadow-[0_10px_30px_rgba(15,23,42,0.05)] overflow-hidden flex flex-col"
            >
              <NuxtLink
                v-if="vehicleDetailUrl(car)"
                :to="vehicleDetailUrl(car)"
                class="relative aspect-[4/3] bg-slate-50 overflow-hidden block"
                :aria-label="`Open ${car.name} details`"
              >
                <img
                  :src="car.image"
                  :alt="`Rental car ${car.name} in Tbilisi`"
                  class="w-full h-full object-contain p-4 sm:p-5"
                  loading="lazy"
                />
                <div class="absolute top-4 left-4">
                  <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/90 backdrop-blur-md text-slate-700 text-[10px] font-bold uppercase tracking-wider shadow-sm border border-white/60">
                    <Camera class="w-3.5 h-3.5 text-brand-orange" />
                    {{ Number(car.photosCount) > 0 ? car.photosCount : '—' }} Photos
                  </span>
                </div>
              </NuxtLink>

              <div class="p-5 sm:p-6 flex flex-col flex-1">
                <div class="flex items-start justify-between gap-3 mb-4">
                  <div class="min-w-0">
                    <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1 truncate">
                      {{ car.brand }}
                    </div>
                    <NuxtLink
                      v-if="vehicleDetailUrl(car)"
                      :to="vehicleDetailUrl(car)"
                      class="text-xl font-display font-bold text-slate-900 hover:text-brand-orange transition-colors"
                    >
                      {{ car.name }}
                    </NuxtLink>
                    <h3 v-else class="text-xl font-display font-bold text-slate-900">
                      {{ car.name }}
                    </h3>
                  </div>
                  <div class="text-right shrink-0">
                    <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1">
                      from
                    </div>
                    <div class="text-2xl font-black text-brand-orange">
                      {{ formatPrice(car.price) }}
                    </div>
                    <div class="text-[10px] font-bold uppercase tracking-wider text-slate-400">/d</div>
                  </div>
                </div>

                <div class="grid grid-cols-2 gap-2 mb-5">
                  <div class="rounded-2xl bg-slate-50 border border-slate-100 p-3">
                    <div class="text-[10px] uppercase tracking-wider text-slate-400 font-bold mb-1">1-3d</div>
                    <div class="text-sm font-bold text-slate-900">{{ formatBandPrice(car, '1-3d') }}</div>
                  </div>
                  <div class="rounded-2xl bg-slate-50 border border-slate-100 p-3">
                    <div class="text-[10px] uppercase tracking-wider text-slate-400 font-bold mb-1">4-7d</div>
                    <div class="text-sm font-bold text-slate-900">{{ formatBandPrice(car, '4-7d') }}</div>
                  </div>
                  <div class="rounded-2xl bg-slate-50 border border-slate-100 p-3">
                    <div class="text-[10px] uppercase tracking-wider text-slate-400 font-bold mb-1">8-14d</div>
                    <div class="text-sm font-bold text-slate-900">{{ formatBandPrice(car, '8-14d') }}</div>
                  </div>
                  <div class="rounded-2xl bg-slate-50 border border-slate-100 p-3">
                    <div class="text-[10px] uppercase tracking-wider text-slate-400 font-bold mb-1">15+d</div>
                    <div class="text-sm font-bold text-slate-900">{{ formatBandPrice(car, '15+d') }}</div>
                  </div>
                </div>

                <div class="space-y-2.5 text-sm text-slate-600 mb-5">
                  <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-400 font-medium">Transmission</span>
                    <span class="font-bold text-slate-900">{{ car.specs.transmission || '—' }}</span>
                  </div>
                  <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-400 font-medium">Seats</span>
                    <span class="font-bold text-slate-900">{{ car.specs.seats == null ? '—' : `${car.specs.seats}` }}</span>
                  </div>
                  <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-400 font-medium">Fuel</span>
                    <span class="font-bold text-slate-900">{{ car.specs.fuel || '—' }}</span>
                  </div>
                  <div class="flex items-center justify-between gap-3">
                    <span class="text-slate-400 font-medium">Deposit</span>
                    <span class="font-bold text-slate-900">{{ car.deposit == null ? '—' : formatPrice(car.deposit) }}</span>
                  </div>
                </div>

                <div class="flex items-center justify-between mt-auto pt-4 border-t border-slate-100">
                  <NuxtLink
                    v-if="vehicleDetailUrl(car)"
                    :to="vehicleDetailUrl(car)"
                    class="inline-flex items-center gap-2 text-sm font-bold text-brand-orange hover:text-brand-orange/80 transition-colors"
                  >
                    Open car
                    <ArrowRight class="w-4 h-4" />
                  </NuxtLink>
                  <button
                    type="button"
                    class="text-sm font-bold text-slate-400 hover:text-red-500 transition-colors"
                    @click="toggleCompare(car.id)"
                  >
                    Remove
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  </AnimatePresence>
</template>
