<script setup>
import { AnimatePresence, motion } from 'motion-v'
import {
  AlertCircle,
  ArrowRight,
  ArrowLeft,
  Backpack,
  Baby,
  Briefcase,
  Building2,
  Check,
  CreditCard,
  Fuel,
  Gauge,
  Grid,
  Infinity,
  Map,
  Mountain,
  Navigation,
  Package,
  Play,
  RotateCw,
  Settings2,
  ShieldCheck,
  Snowflake,
  Star,
  Tag,
  UserPlus,
  Users,
  Wifi,
  X,
} from 'lucide-vue-next'
import VehicleBookingBuilder from '~/components/vehicles/VehicleBookingBuilder.vue'
import { buildPublicLocaleSwitchContext, useRegisterPublicLocaleSwitchContext } from '~/composables/usePublicLocaleSwitchContext'
import { buildVehicleDetailSeo, loadResolvedVehicleDetail, useVehiclesContent } from '~/content/vehicles'
import { DEFAULT_PUBLIC_LOCALE } from '~/utils/public-locales'
import { buildPublicSeoLinks } from '~/utils/public-seo'
import { normalizePublicInternalPath } from '~/utils/public-routes'

const route = useRoute()
const { locale } = usePublicLocale()
const runtimeConfig = useRuntimeConfig()
const ui = usePublicUi()
const vehicleDetailAsyncKey = computed(() => `vehicle-detail:${locale.value}:${route.path}`)
const vehiclesContent = useVehiclesContent()
const vehiclesPage = computed(() => vehiclesContent.vehiclesPage.value || null)
const vehicleDetailUi = computed(() => vehiclesContent.vehicleDetailUi.value || {})
const vehicleRentalExtras = computed(() => vehiclesContent.vehicleRentalExtras.value || [])
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const vehiclesIndexRoute = computed(() => vehiclesPage.value?.path || normalizePublicInternalPath('/vehicles', locale.value))
const { data: carData } = await useAsyncData(
  vehicleDetailAsyncKey,
  () => loadResolvedVehicleDetail({
    id: String(route.params.id || ''),
    path: route.path,
  }, locale.value, vehiclesIndexRoute.value),
  {
    watch: [locale, () => route.path, vehiclesIndexRoute],
    default: () => null,
  },
)
const car = computed(() => carData.value || null)
const gallery = computed(() => car.value?.gallery?.length ? car.value.gallery : [car.value?.image].filter(Boolean))
const hasMultipleGalleryImages = computed(() => gallery.value.length > 1)
const hasVideo = computed(() => Boolean(String(car.value?.videoUrl || '').trim()))
const detailSeo = computed(() => buildVehicleDetailSeo(car.value, locale.value, pageOrigin.value))

const showVideo = ref(false)
const show360 = ref(false)
const showGallery = ref(false)
const rotation = ref(180)
const isVehicle360Enabled = false
const luggageCount = computed(() => Number.parseInt(car.value.specs.luggage, 10) || 2)
const includedInPriceItems = computed(() => car.value?.includedInPrice || [])
const conditionReport = computed(() => car.value?.conditionReport || null)
const perfectForItems = computed(() => car.value?.suitabilityTags || [])
const reviewAggregate = computed(() => car.value?.reviewAggregate || null)
const vehiclesIndexPathsByLocale = computed(() => Object.fromEntries(
  (Array.isArray(vehiclesPage.value?.localized) ? vehiclesPage.value.localized : [])
    .filter((entry) => entry?.locale && entry?.path)
    .map((entry) => [entry.locale, entry.path]),
))
const localeSwitchContext = computed(() => buildPublicLocaleSwitchContext(car.value, {
  sectionPath: vehiclesPage.value?.path || '/vehicles',
  sectionPathsByLocale: vehiclesIndexPathsByLocale.value,
}))

useRegisterPublicLocaleSwitchContext(localeSwitchContext)

if (!car.value) {
  throw createError({
    statusCode: 404,
    statusMessage: ui.value.pages.vehicleNotFound,
  })
}

if (!car.value?.availableLocales?.includes(locale.value) && locale.value !== DEFAULT_PUBLIC_LOCALE) {
  await navigateTo(vehiclesIndexRoute.value, { redirectCode: 302 })
}

useSeoMeta({
  title: () => detailSeo.value?.title || '',
  description: () => detailSeo.value?.description || '',
  ogTitle: () => detailSeo.value?.ogTitle || detailSeo.value?.title || '',
  ogDescription: () => detailSeo.value?.ogDescription || detailSeo.value?.description || '',
  ogImage: () => detailSeo.value?.ogImage || '',
  robots: () => detailSeo.value?.robots || 'index,follow',
})

useHead(() => ({
  link: buildPublicSeoLinks(detailSeo.value),
}))

const includedIconMap = {
  'shield-check': ShieldCheck,
  infinity: Infinity,
  'credit-card': CreditCard,
}

const extraIconMap = {
  wifi: Wifi,
  baby: Baby,
  driver: UserPlus,
  package: Package,
  snowflake: Snowflake,
  shield: ShieldCheck,
  'shield-check': ShieldCheck,
}

function perfectForIcon(tag) {
  const normalized = String(tag || '').toLowerCase()

  if (normalized.includes('airport')) {
    return Navigation
  }

  if (normalized.includes('business')) {
    return Building2
  }

  if (normalized.includes('family')) {
    return Baby
  }

  if (normalized.includes('mountain') || normalized.includes('route') || normalized.includes('trip')) {
    return Mountain
  }

  return Map
}
</script>

<template>
  <div class="min-h-screen font-sans text-slate-900 flex flex-col relative overflow-hidden">
    <main class="flex-1 flex flex-col relative z-10 py-8 pb-32 lg:pb-8">
      <div class="max-w-6xl mx-auto px-4 sm:px-6 w-full">
        <NuxtLink
          :to="vehiclesIndexRoute"
          class="inline-flex items-center gap-2 text-sm font-bold text-slate-500 hover:text-brand-orange uppercase tracking-wider mb-8 transition-colors"
        >
          <ArrowLeft class="w-4 h-4" />
          {{ vehicleDetailUi.backLabel }}
        </NuxtLink>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-12">
          <div class="lg:col-span-2 space-y-8">
            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              class="relative h-[300px] md:h-[450px] lg:h-[500px] rounded-[2rem] overflow-hidden mb-8"
            >
              <div
                v-if="!hasMultipleGalleryImages"
                class="relative w-full h-full group cursor-pointer overflow-hidden bg-gradient-to-br from-slate-50 via-white to-slate-100/80"
                @click="showGallery = true"
              >
                <div class="absolute inset-0 p-4 md:p-6">
                  <img
                    :src="gallery[0]"
                    :alt="`${car.brand} ${car.model}`"
                    class="h-full w-full object-contain object-center transition-transform duration-700 group-hover:scale-105"
                    referrerpolicy="no-referrer"
                  >
                </div>
                <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                <div class="absolute top-6 left-6 flex gap-2 z-10">
                  <span
                    v-for="tag in car.tags"
                    :key="tag"
                    class="px-4 py-2 bg-white/90 backdrop-blur-md text-slate-900 rounded-xl text-xs font-bold uppercase tracking-widest shadow-sm"
                  >
                    {{ tag }}
                  </span>
                </div>

                <div class="absolute bottom-4 left-4 md:bottom-6 md:left-6 flex flex-wrap gap-3 z-20">
                  <button
                    v-if="isVehicle360Enabled"
                    class="bg-slate-900/80 backdrop-blur-md text-white px-4 py-2.5 rounded-xl text-sm font-bold shadow-lg flex items-center gap-2 hover:bg-brand-orange transition-colors border border-white/10"
                    @click.stop="show360 = true"
                  >
                    <RotateCw class="w-4 h-4" />
                    {{ vehicleDetailUi.view360ButtonLabel }}
                  </button>
                  <button
                    v-if="hasVideo"
                    class="bg-white/90 backdrop-blur-md text-slate-900 px-4 py-2.5 rounded-xl text-sm font-bold shadow-lg flex items-center gap-2 hover:bg-white transition-colors"
                    @click.stop="showVideo = true"
                  >
                    <Play class="w-4 h-4" />
                    {{ vehicleDetailUi.playVideoButtonLabel }}
                  </button>
                </div>
              </div>

              <div
                v-else
                class="relative grid grid-cols-1 md:grid-cols-4 md:grid-rows-2 gap-2 md:gap-3 h-full"
              >
                <div class="md:col-span-2 md:row-span-2 relative group cursor-pointer overflow-hidden bg-gradient-to-br from-slate-50 via-white to-slate-100/80" @click="showGallery = true">
                  <div class="absolute inset-0 p-4 md:p-6">
                    <img
                      :src="gallery[0]"
                      :alt="`${car.brand} ${car.model}`"
                      class="h-full w-full object-contain object-center transition-transform duration-700 group-hover:scale-105"
                      referrerpolicy="no-referrer"
                    >
                  </div>
                  <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                  <div class="absolute top-6 left-6 flex gap-2 z-10">
                    <span
                      v-for="tag in car.tags"
                      :key="tag"
                      class="px-4 py-2 bg-white/90 backdrop-blur-md text-slate-900 rounded-xl text-xs font-bold uppercase tracking-widest shadow-sm"
                    >
                      {{ tag }}
                    </span>
                  </div>

                  <div class="absolute bottom-4 left-4 md:bottom-6 md:left-6 flex flex-wrap gap-3 z-20">
                    <button
                      v-if="isVehicle360Enabled"
                      class="bg-slate-900/80 backdrop-blur-md text-white px-4 py-2.5 rounded-xl text-sm font-bold shadow-lg flex items-center gap-2 hover:bg-brand-orange transition-colors border border-white/10"
                      @click.stop="show360 = true"
                    >
                      <RotateCw class="w-4 h-4" />
                      {{ vehicleDetailUi.view360ButtonLabel }}
                    </button>
                    <button
                      v-if="hasVideo"
                      class="bg-white/90 backdrop-blur-md text-slate-900 px-4 py-2.5 rounded-xl text-sm font-bold shadow-lg flex items-center gap-2 hover:bg-white transition-colors"
                      @click.stop="showVideo = true"
                    >
                      <Play class="w-4 h-4" />
                      {{ vehicleDetailUi.playVideoButtonLabel }}
                    </button>
                  </div>
                </div>

                <div
                  v-for="(image, index) in gallery.slice(1)"
                  :key="image"
                  class="hidden md:block relative group cursor-pointer overflow-hidden bg-gradient-to-br from-slate-50 via-white to-slate-100/80"
                  @click="showGallery = true"
                >
                  <div class="absolute inset-0 p-3">
                    <img :src="image" class="h-full w-full object-contain object-center transition-transform duration-700 group-hover:scale-105" referrerpolicy="no-referrer">
                  </div>
                  <div class="absolute inset-0 bg-black/10 group-hover:bg-transparent transition-colors duration-500" />
                  <button
                    v-if="index === gallery.slice(1).length - 1"
                    class="absolute bottom-4 right-4 bg-white/90 backdrop-blur-md text-slate-900 px-4 py-2.5 rounded-xl text-sm font-bold shadow-lg flex items-center gap-2 hover:bg-white transition-colors"
                    @click.stop="showGallery = true"
                  >
                    <Grid class="w-4 h-4" />
                    {{ vehicleDetailUi.showAllLabel }}
                  </button>
                </div>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.1 }"
              class="flex flex-col md:flex-row md:items-end justify-between gap-4"
            >
              <div>
                <div class="text-sm font-bold text-brand-orange uppercase tracking-widest mb-1">{{ car.category }}</div>
                <h1 class="text-4xl md:text-5xl font-display font-black text-slate-900 tracking-tight uppercase leading-none">
                  {{ car.brand }} <span class="text-slate-500">{{ car.model }}</span>
                </h1>
              </div>
              <div
                v-if="reviewAggregate?.rating || car.rating"
                class="flex items-center gap-2 bg-white/60 backdrop-blur-md px-4 py-2 rounded-xl shadow-sm border border-white/60"
              >
                <Star class="w-5 h-5 text-brand-orange fill-current" />
                <span class="text-lg font-bold text-slate-900">{{ reviewAggregate?.rating || car.rating }}</span>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.2 }"
            >
              <p class="text-lg leading-relaxed text-slate-600">{{ car.description }}</p>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.3 }"
              class="grid grid-cols-2 md:grid-cols-4 gap-4"
            >
              <div class="col-span-2 bg-gradient-to-br from-white to-slate-50/80 border border-white/80 p-6 rounded-3xl shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 flex items-center justify-between group overflow-hidden relative">
                <div class="absolute -right-6 -top-6 w-32 h-32 bg-brand-orange/5 rounded-full blur-2xl group-hover:bg-brand-orange/10 transition-colors" />
                <div>
                  <div class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-1">{{ vehicleDetailUi.capacityLabel }}</div>
                  <div class="flex items-baseline gap-2">
                    <span class="text-5xl font-black text-slate-900 tracking-tighter">{{ car.specs.seats }}</span>
                    <span class="text-lg font-bold text-slate-500">{{ vehicleDetailUi.adultsLabel }}</span>
                  </div>
                </div>
                <Users class="w-12 h-12 text-slate-200 group-hover:text-brand-orange/20 transition-colors relative z-10" />
              </div>

              <div class="col-span-1 bg-gradient-to-br from-white to-slate-50/80 border border-white/80 p-5 rounded-3xl shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
                <Settings2 class="w-6 h-6 text-slate-400 group-hover:text-brand-orange transition-colors mb-4" />
                <div>
                  <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ vehicleDetailUi.gearboxLabel }}</div>
                  <div class="font-bold text-slate-900 text-lg leading-tight">{{ car.specs.transmission }}</div>
                </div>
              </div>

              <div class="col-span-1 bg-gradient-to-br from-white to-slate-50/80 border border-white/80 p-5 rounded-3xl shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
                <Fuel class="w-6 h-6 text-slate-400 group-hover:text-brand-orange transition-colors mb-4" />
                <div>
                  <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ vehicleDetailUi.fuelTypeLabel }}</div>
                  <div class="font-bold text-slate-900 text-lg leading-tight">{{ car.specs.fuel }}</div>
                </div>
              </div>

              <div class="col-span-1 bg-gradient-to-br from-white to-slate-50/80 border border-white/80 p-5 rounded-3xl shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
                <Gauge class="w-6 h-6 text-slate-400 group-hover:text-brand-orange transition-colors mb-4" />
                <div>
                  <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ vehicleDetailUi.driveLabel }}</div>
                  <div class="font-bold text-slate-900 text-lg leading-tight">{{ car.specs.power || '-' }}</div>
                </div>
              </div>

              <div class="col-span-1 bg-gradient-to-br from-white to-slate-50/80 border border-white/80 p-5 rounded-3xl shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 flex flex-col justify-between group">
                <Settings2 class="w-6 h-6 text-slate-400 group-hover:text-brand-orange transition-colors mb-4" />
                <div>
                  <div class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">{{ vehicleDetailUi.powertrainLabel }}</div>
                  <div class="font-bold text-slate-900 text-lg leading-tight">{{ car.specs.engine || '-' }}</div>
                </div>
              </div>

              <div class="col-span-2 bg-gradient-to-br from-white to-slate-50/80 border border-white/80 p-6 rounded-3xl shadow-sm hover:shadow-md hover:-translate-y-1 transition-all duration-300 flex items-center justify-between group overflow-hidden relative">
                <div class="absolute -left-6 -bottom-6 w-32 h-32 bg-blue-500/5 rounded-full blur-2xl group-hover:bg-blue-500/10 transition-colors" />
                <div class="relative z-10">
                  <div class="text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">{{ vehicleDetailUi.luggageSpaceLabel }}</div>
                  <div class="flex items-end gap-1.5">
                    <Briefcase
                      v-for="index in Math.ceil(luggageCount / 2)"
                      :key="`large-${index}`"
                      class="w-8 h-8 text-slate-700 group-hover:-translate-y-1 transition-transform duration-300"
                      :style="{ transitionDelay: `${(index - 1) * 50}ms` }"
                      :stroke-width="1.5"
                    />
                    <Backpack
                      v-for="index in Math.max(luggageCount - Math.ceil(luggageCount / 2), 0)"
                      :key="`small-${index}`"
                      class="w-6 h-6 text-slate-400 group-hover:-translate-y-1 transition-transform duration-300"
                      :style="{ transitionDelay: `${(index + 1) * 50}ms` }"
                      :stroke-width="1.5"
                    />
                  </div>
                </div>
                <div class="text-right relative z-10">
                  <div class="text-4xl font-black text-slate-900 tracking-tighter">{{ luggageCount }}</div>
                  <div class="text-sm font-bold text-slate-500">{{ vehicleDetailUi.totalBagsLabel }}</div>
                </div>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.35 }"
              class="pt-12"
            >
              <h3 class="text-2xl font-display font-bold text-slate-900 mb-8">{{ vehicleDetailUi.includedInPriceTitle }}</h3>
              <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">
                <div v-for="item in includedInPriceItems" :key="item.title" class="flex gap-4">
                  <div class="mt-1">
                    <component :is="includedIconMap[item.iconKey] || ShieldCheck" class="w-6 h-6 text-emerald-600" :stroke-width="1.5" />
                  </div>
                  <div>
                    <div class="font-bold text-slate-900 mb-1">{{ item.title }}</div>
                    <div class="text-sm text-slate-500 leading-relaxed">{{ item.description }}</div>
                  </div>
                </div>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.4 }"
              class="pt-12 mt-12 border-t border-slate-200/60"
            >
              <div class="flex items-center gap-3 mb-8">
                <h3 class="text-2xl font-display font-bold text-slate-900">{{ vehicleDetailUi.conditionReportTitle }}</h3>
                <div v-if="conditionReport?.verified" class="flex items-center gap-1.5 bg-emerald-50 px-2.5 py-1 rounded-md">
                  <Check class="w-3.5 h-3.5 text-emerald-600" :stroke-width="2.5" />
                  <span class="text-[10px] font-bold text-emerald-700 uppercase tracking-widest">{{ conditionReport.verifiedLabel || vehicleDetailUi.conditionReportVerifiedLabel }}</span>
                </div>
              </div>

              <div class="flex flex-col md:flex-row gap-12 items-center">
                <div class="relative w-32 h-64 shrink-0">
                  <svg viewBox="0 0 100 200" class="w-full h-full drop-shadow-sm" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="12" y="40" width="6" height="20" rx="3" fill="#94a3b8" />
                    <rect x="82" y="40" width="6" height="20" rx="3" fill="#94a3b8" />
                    <rect x="10" y="140" width="6" height="20" rx="3" fill="#94a3b8" />
                    <rect x="84" y="140" width="6" height="20" rx="3" fill="#94a3b8" />
                    <path d="M20 30 C20 10, 80 10, 80 30 L85 170 C85 190, 15 190, 15 170 Z" fill="#f8fafc" stroke="#cbd5e1" stroke-width="2" />
                    <path d="M25 60 Q50 50 75 60 L70 90 Q50 95 30 90 Z" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="1" />
                    <path d="M28 140 Q50 135 72 140 L68 160 Q50 165 32 160 Z" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="1" />
                    <path d="M30 90 Q50 95 70 90 L72 140 Q50 135 28 140 Z" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1" />
                  </svg>

                  <div v-if="conditionReport?.verified" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
                    <div class="w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center shadow-lg shadow-emerald-500/30 border-2 border-white">
                      <Check class="w-4 h-4 text-white" />
                    </div>
                  </div>
                </div>

                <div class="flex-1 space-y-6 w-full">
                  <div v-for="item in conditionReport?.items || []" :key="item.title" class="flex items-start gap-4">
                    <div class="mt-0.5">
                      <Check v-if="conditionReport?.verified" class="w-5 h-5 text-slate-400" :stroke-width="1.5" />
                      <AlertCircle v-else class="w-5 h-5 text-amber-500" :stroke-width="1.5" />
                    </div>
                    <div>
                      <div class="font-bold text-slate-900">{{ item.title }}</div>
                      <div class="text-sm text-slate-500 mt-1">{{ item.description }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.45 }"
              class="pt-12 mt-12 border-t border-slate-200/60"
            >
              <h3 class="text-2xl font-display font-bold text-slate-900 mb-8">{{ vehicleDetailUi.featuresTitle }}</h3>
              <div class="grid grid-cols-2 sm:grid-cols-3 gap-y-4 gap-x-8">
                <div v-for="feature in car.features" :key="feature" class="flex items-center gap-3">
                  <Check class="w-4 h-4 text-emerald-500 shrink-0" :stroke-width="2" />
                  <span class="text-slate-700">{{ feature }}</span>
                </div>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.5 }"
              class="pt-12 mt-12 border-t border-slate-200/60"
            >
              <h3 class="text-2xl font-display font-bold text-slate-900 mb-8">{{ vehicleDetailUi.perfectForTitle }}</h3>
              <div class="flex flex-wrap gap-4">
                <div v-for="tag in perfectForItems" :key="tag" class="flex items-center gap-3 bg-slate-100/50 px-4 py-2.5 rounded-lg">
                  <component :is="perfectForIcon(tag)" class="w-5 h-5 text-slate-600" :stroke-width="1.5" />
                  <span class="font-medium text-slate-900">{{ tag }}</span>
                </div>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.6 }"
              class="pt-12 mt-12 border-t border-slate-200/60"
            >
              <div class="flex items-baseline justify-between mb-8">
                <h3 class="text-2xl font-display font-bold text-slate-900">{{ vehicleDetailUi.availableExtrasTitle }}</h3>
                <span class="text-sm text-slate-500">{{ vehicleDetailUi.availableExtrasHint }}</span>
              </div>
              <div v-if="vehicleRentalExtras.length" class="grid grid-cols-2 sm:grid-cols-4 gap-6">
                <div v-for="item in vehicleRentalExtras" :key="item.id" class="group cursor-pointer">
                  <div class="w-12 h-12 rounded-xl bg-slate-100 flex items-center justify-center mb-4 group-hover:bg-brand-orange/10 transition-colors">
                    <component :is="extraIconMap[item.iconKey] || Package" class="w-5 h-5 text-slate-600 group-hover:text-brand-orange transition-colors" :stroke-width="1.5" />
                  </div>
                  <div class="font-bold text-slate-900 mb-1">{{ item.name }}</div>
                  <div class="text-xs text-slate-500">{{ item.price ? `$${item.price}${vehicleDetailUi.pricePerDaySuffix}` : item.description }}</div>
                </div>
              </div>
              <div v-else class="rounded-3xl border border-slate-200 bg-slate-50/70 px-6 py-10 text-center">
                <h4 class="text-xl font-display font-bold text-slate-900 mb-3">{{ vehicleDetailUi.availableExtrasEmptyTitle }}</h4>
                <p class="text-slate-500 max-w-2xl mx-auto">{{ vehicleDetailUi.availableExtrasEmptyDescription }}</p>
              </div>
            </motion.div>

            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0 }"
              :transition="{ delay: 0.7 }"
              class="pt-12 mt-12 border-t border-slate-200/60"
            >
              <div class="flex items-baseline justify-between mb-8">
                <div class="flex items-center gap-4">
                  <h3 class="text-2xl font-display font-bold text-slate-900">{{ vehicleDetailUi.reviewsTitle }}</h3>
                  <div v-if="reviewAggregate?.rating" class="flex items-center gap-1.5 bg-amber-50 px-2.5 py-1 rounded-md">
                    <Star class="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
                    <span class="text-sm font-bold text-amber-700">{{ reviewAggregate.rating }}</span>
                  </div>
                </div>
                <span class="text-sm text-slate-500">
                  {{
                    reviewAggregate?.count
                      ? `${reviewAggregate.count} ${reviewAggregate.count === 1 ? vehicleDetailUi.reviewSingularLabel : vehicleDetailUi.reviewPluralLabel}`
                      : vehicleDetailUi.reviewsHint
                  }}
                </span>
              </div>

              <div class="rounded-3xl border border-slate-200 bg-slate-50/70 px-6 py-10 text-center">
                <h4 class="text-xl font-display font-bold text-slate-900 mb-3">{{ vehicleDetailUi.reviewsEmptyTitle }}</h4>
                <p class="text-slate-500 max-w-2xl mx-auto">{{ vehicleDetailUi.reviewsEmptyDescription }}</p>
              </div>
            </motion.div>
          </div>

          <motion.div
            :initial="{ opacity: 0, x: 20 }"
            :animate="{ opacity: 1, x: 0 }"
            :transition="{ delay: 0.2 }"
            class="lg:col-span-1"
          >
            <VehicleBookingBuilder :car="car" />
          </motion.div>
        </div>
      </div>
    </main>

    <AnimatePresence>
      <div v-if="showGallery" class="fixed inset-0 z-[100] flex flex-col bg-white">
        <motion.div
          :initial="{ opacity: 0, y: 100 }"
          :animate="{ opacity: 1, y: 0 }"
          :exit="{ opacity: 0, y: 100 }"
          :transition="{ type: 'spring', damping: 25, stiffness: 200 }"
          class="flex-1 overflow-y-auto bg-white"
        >
          <div class="sticky top-0 z-10 flex items-center px-6 py-4 bg-white/90 backdrop-blur-md">
            <button
              class="w-10 h-10 rounded-full hover:bg-slate-100 flex items-center justify-center text-slate-900 transition-colors"
              @click="showGallery = false"
            >
              <ArrowLeft class="w-5 h-5" />
            </button>
          </div>
          <div class="max-w-4xl mx-auto p-4 sm:p-6 md:p-8 pb-24">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div
                v-for="(image, idx) in gallery"
                :key="image"
                :class="idx % 3 === 0 ? 'md:col-span-2' : 'md:col-span-1'"
                class="rounded-xl bg-gradient-to-br from-slate-50 via-white to-slate-100/80 p-4 shadow-sm ring-1 ring-slate-900/5"
              >
                <div class="overflow-hidden rounded-lg" :style="{ aspectRatio: idx % 3 === 0 ? '16/9' : '4/3' }">
                  <img
                    :src="image"
                    :alt="`${car.brand} ${car.model} - ${idx + 1}`"
                    class="h-full w-full object-contain object-center hover:opacity-95 transition-opacity"
                    referrerpolicy="no-referrer"
                  >
                </div>
              </div>
            </div>
          </div>
        </motion.div>
      </div>

      <div v-if="showVideo && hasVideo" class="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
        <motion.div
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1 }"
          :exit="{ opacity: 0 }"
          class="absolute inset-0 bg-slate-900/90 backdrop-blur-xl"
          @click="showVideo = false"
        />
        <motion.div
          :initial="{ scale: 0.95, opacity: 0, y: 20 }"
          :animate="{ scale: 1, opacity: 1, y: 0 }"
          :exit="{ scale: 0.95, opacity: 0, y: 20 }"
          class="relative w-full max-w-5xl aspect-video bg-black rounded-[2rem] overflow-hidden shadow-2xl border border-white/10"
        >
          <button
            class="absolute top-6 right-6 z-20 w-12 h-12 bg-black/40 hover:bg-black/60 backdrop-blur-md rounded-full flex items-center justify-center text-white transition-colors border border-white/10"
            @click="showVideo = false"
            >
              <X class="w-6 h-6" />
            </button>
          <div class="w-full h-full flex items-center justify-center bg-slate-950 px-10 text-center">
            <video
              v-if="car.videoUrl"
              class="w-full h-full object-cover"
              :src="car.videoUrl"
              controls
              playsinline
              preload="metadata"
            />
            <p v-else class="text-white/70 max-w-2xl leading-relaxed">{{ vehicleDetailUi.mediaEmptyLabel }}</p>
          </div>
        </motion.div>
      </div>

      <div v-if="isVehicle360Enabled && show360" class="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
        <motion.div
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1 }"
          :exit="{ opacity: 0 }"
          class="absolute inset-0 bg-slate-900/90 backdrop-blur-xl"
          @click="show360 = false"
        />
        <motion.div
          :initial="{ scale: 0.95, opacity: 0, y: 20 }"
          :animate="{ scale: 1, opacity: 1, y: 0 }"
          :exit="{ scale: 0.95, opacity: 0, y: 20 }"
          class="relative w-full max-w-4xl bg-white rounded-[2.5rem] p-8 md:p-12 flex flex-col items-center shadow-2xl"
        >
          <button
            class="absolute top-6 right-6 z-20 w-12 h-12 bg-slate-100 hover:bg-slate-200 rounded-full flex items-center justify-center text-slate-600 transition-colors"
            @click="show360 = false"
          >
            <X class="w-6 h-6" />
          </button>

          <div class="text-center mb-8">
            <h3 class="text-3xl font-display font-black text-slate-900 uppercase tracking-tight mb-2">{{ vehicleDetailUi.view360Title }}</h3>
            <p class="text-slate-500">{{ vehicleDetailUi.view360Description }}</p>
          </div>

          <div class="relative w-full max-w-2xl aspect-[16/9] flex items-center justify-center mb-8">
            <img
              :src="car.image"
              alt="360 view"
              :style="{ transform: `perspective(1000px) rotateY(${rotation - 180}deg)` }"
              class="w-full h-full object-contain pointer-events-none drop-shadow-2xl transition-transform duration-75"
              referrerpolicy="no-referrer"
            >
            <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 pointer-events-none">
              <div class="bg-black/50 backdrop-blur-md text-white px-6 py-3 rounded-full flex items-center gap-3 font-bold text-sm tracking-wider uppercase">
                <ArrowLeft class="w-4 h-4" />
                {{ vehicleDetailUi.view360DragHint }}
                <ArrowRight class="w-4 h-4" />
              </div>
            </div>
          </div>

          <input v-model.number="rotation" type="range" min="0" max="360" class="w-full max-w-md h-2 bg-slate-200 rounded-lg appearance-none cursor-ew-resize accent-brand-orange">
        </motion.div>
      </div>
    </AnimatePresence>
  </div>
</template>
