<script setup>
import { AnimatePresence, motion } from 'motion-v'
import {
  ArrowRightLeft,
  Briefcase,
  Calendar,
  Check,
  CheckCircle,
  ChevronDown,
  Clock,
  Cog,
  Compass,
  Eye,
  Flame,
  Fuel,
  Gift,
  Info,
  Luggage,
  Leaf,
  MapPin,
  MessageSquare,
  Phone,
  Send,
  Shield,
  ShieldCheck,
  Sparkles,
  Star,
  Tag,
  Users,
  Volume2,
  Wand2,
  X,
  Zap,
  Snowflake,
} from 'lucide-vue-next'
import { useInternationalPhone } from '~/composables/useInternationalPhone'
import { loadResolvedVehicleDetail } from '~/content/vehicles'
import { resolveTripEconomy } from '~/utils/trip-economy'

const props = defineProps({
  car: {
    type: Object,
    default: null,
  },
  insuranceOptions: {
    type: Array,
    default: () => [],
  },
  allCars: {
    type: Array,
    default: () => [],
  },
  location: {
    type: String,
    default: 'Tbilisi Airport',
  },
  pickupLocation: {
    type: Object,
    default: null,
  },
  dropoffLocation: {
    type: Object,
    default: null,
  },
  bookingPayload: {
    type: Object,
    default: null,
  },
})

const emit = defineEmits(['close'])

const currentIndex = ref(0)
const selectedInsuranceId = ref('')
const damageAmount = ref(0)
const isSimulatorOpen = ref(false)
const activeAddons = ref([])
const isBooking = ref(false)
const bookingMethod = ref('wa')
const customerFirstName = ref('')
const customerLastName = ref('')
const quoteLoading = ref(false)
const quoteError = ref('')
const liveQuote = ref(null)
const bookingSubmitting = ref(false)
const bookingError = ref('')
const createdBooking = ref(null)
const submitSuccess = ref(false)
const quickViewHydrating = ref(false)
const runtimeConfig = useRuntimeConfig()
const {
  combinePhone,
  handlePhoneChange,
  handlePhoneCountryCodeChange,
  isPhoneValid,
  phoneCountryCode,
  phoneNumber,
} = useInternationalPhone('+995')

const images = computed(() => {
  const galleryUrls = Array.isArray(props.car?.gallery) ? props.car.gallery : []
  const galleryMediaUrls = Array.isArray(props.car?.galleryMedia) ? props.car.galleryMedia.map((item) => item?.url).filter(Boolean) : []
  const imageUrls = Array.isArray(props.car?.images) ? props.car.images : []
  const fallbackImage = props.car?.image ? [props.car.image] : []

  return [...new Set([...imageUrls, ...galleryUrls, ...galleryMediaUrls, ...fallbackImage].filter(Boolean))]
})
const interiorImages = computed(() => props.car?.interiorImages || [])
const allImages = computed(() => [...images.value, ...interiorImages.value])
const selectedExtraIds = computed(() => activeAddons.value.map((id) => Number(id)).filter(Boolean))
const selectedExtrasPayload = computed(() => {
  const ids = [...selectedExtraIds.value]
  const insuranceId = Number(selectedInsuranceId.value || 0)

  if (insuranceId && !isIncludedInsurance(selectedInsuranceOption.value)) {
    ids.push(insuranceId)
  }

  return [...new Set(ids)].map((extraId) => ({ extra_id: extraId, quantity: 1 }))
})
const quoteSummary = computed(() => liveQuote.value?.quote || null)
const displayCurrency = computed(() => quoteSummary.value?.currency || props.bookingPayload?.currency || props.car?.currency || 'USD')
const displayTotal = computed(() => Number(quoteSummary.value?.finalTotal || props.car?.totalPrice || carDailyPrice.value || 0))
const displayDailyRate = computed(() => Number(quoteSummary.value?.dailyRate || carDailyPrice.value || 0))
const displayDeposit = computed(() => Number(quoteSummary.value?.depositAmount || basicDeposit.value || 0))
const displayQuoteLines = computed(() => Array.isArray(quoteSummary.value?.lines) ? quoteSummary.value.lines : [])
const extraQuoteLines = computed(() => displayQuoteLines.value.filter((line) => {
  const code = String(line?.code || '').trim().toLowerCase()
  return code && code !== 'rental' && code !== 'deposit' && Number(line?.amount || 0) !== 0
}))
const quoteFeesAmount = computed(() => extraQuoteLines.value.reduce((total, line) => total + Number(line?.amount || 0), 0))
const bookingDayCount = computed(() => {
  const pickupAt = props.bookingPayload?.pickup_at || props.bookingPayload?.pickupAt || null
  const dropoffAt = props.bookingPayload?.dropoff_at || props.bookingPayload?.dropoffAt || null
  const pickupDate = pickupAt ? new Date(pickupAt) : null
  const dropoffDate = dropoffAt ? new Date(dropoffAt) : null

  if (!(pickupDate instanceof Date) || Number.isNaN(pickupDate.getTime()) || !(dropoffDate instanceof Date) || Number.isNaN(dropoffDate.getTime())) {
    return 1
  }

  return Math.max(1, Math.round((dropoffDate.getTime() - pickupDate.getTime()) / (24 * 60 * 60 * 1000)))
})
const rentalTotalAmount = computed(() => Number(displayDailyRate.value || 0) * Number(bookingDayCount.value || 1))
const dueNowAmount = computed(() => 0)
const bookingTripLabel = computed(() => {
  const pickupAt = props.bookingPayload?.pickup_at || props.bookingPayload?.pickupAt || null
  const dropoffAt = props.bookingPayload?.dropoff_at || props.bookingPayload?.dropoffAt || null
  const pickupDate = pickupAt ? new Date(pickupAt) : null
  const dropoffDate = dropoffAt ? new Date(dropoffAt) : null

  if (!(pickupDate instanceof Date) || Number.isNaN(pickupDate.getTime()) || !(dropoffDate instanceof Date) || Number.isNaN(dropoffDate.getTime())) {
    return 'Select dates'
  }

  return `${formatAvailabilityDate(pickupDate)} – ${formatAvailabilityDate(dropoffDate)} (${bookingDayCount.value} day${bookingDayCount.value === 1 ? '' : 's'})`
})
const displayTotalWithCurrency = computed(() => {
  const amount = Number(displayTotal.value || 0)
  const currency = String(displayCurrency.value || 'USD').toUpperCase()
  const formattedAmount = amount.toFixed(amount % 1 === 0 ? 0 : 2)

  if (currency === 'USD') {
    return `$${formattedAmount}`
  }

  return `${currency} ${formattedAmount}`
})
const customerFirstNameValue = computed(() => String(customerFirstName.value || '').trim())
const customerLastNameValue = computed(() => String(customerLastName.value || '').trim())
const tripEconomy = computed(() => resolveTripEconomy({
  car: props.car,
  pickupLocation: props.pickupLocation,
  dropoffLocation: props.dropoffLocation,
}))
const carTitle = computed(() => String(props.car?.name || props.car?.title || '').trim())
const carCategoryLabel = computed(() => String(props.car?.category || props.car?.homeCategory || '').trim())
const carTransmissionLabel = computed(() => String(props.car?.specs?.transmission || props.car?.transmission || '').trim())
const carFuelLabel = computed(() => String(props.car?.specs?.fuel || props.car?.specs?.fuelType || props.car?.fuelType || props.car?.powertrain || '').trim())
const carDriveLabel = computed(() => String(props.car?.specs?.driveType || props.car?.driveType || '').trim())
const carSeatsLabel = computed(() => `${Number(props.car?.specs?.seats || props.car?.seats || 5)} Seats`)
const carBagsLabel = computed(() => String(props.car?.bags || props.car?.specs?.bags || '').trim())
const carYearLabel = computed(() => String(props.car?.year || '').trim())
const carDescription = computed(() => String(props.car?.description || '').trim() || `Experience luxury and comfort with ${carTitle.value}. Ideal choice for your next trip.`)
const carTrunkLabel = computed(() => String(props.car?.trunk || props.car?.specs?.luggage || props.car?.luggage || (carBagsLabel.value ? `${carBagsLabel.value} bags` : '')).trim())
const checkoutExtras = computed(() => (Array.isArray(props.insuranceOptions) ? props.insuranceOptions : [])
  .filter((item) => Number(item?.id || 0) > 0)
  .sort((left, right) => Number(left?.sortOrder || 0) - Number(right?.sortOrder || 0)))
const insuranceOptions = computed(() => checkoutExtras.value
  .filter((item) => String(item?.kind || item?.kindLabel || '').trim().toLowerCase() === 'insurance'))
const addonOptions = computed(() => checkoutExtras.value
  .filter((item) => String(item?.kind || item?.kindLabel || '').trim().toLowerCase() !== 'insurance'))
const includedInsuranceOptions = computed(() => insuranceOptions.value.filter((item) => String(item?.pricingType || '').trim().toLowerCase() === 'included'))
const paidInsuranceOptions = computed(() => insuranceOptions.value.filter((item) => String(item?.pricingType || '').trim().toLowerCase() !== 'included'))
const includedAddonOptions = computed(() => addonOptions.value.filter((item) => String(item?.pricingType || '').trim().toLowerCase() === 'included'))
const paidAddonOptions = computed(() => addonOptions.value.filter((item) => String(item?.pricingType || '').trim().toLowerCase() !== 'included'))
const selectedAddonOptions = computed(() => addonOptions.value.filter((item) => selectedExtraIds.value.includes(Number(item?.id || 0))))
const selectedPaidAddonOptions = computed(() => selectedAddonOptions.value.filter((item) => String(item?.pricingType || '').trim().toLowerCase() !== 'included'))
const selectedInsuranceOption = computed(() => insuranceOptions.value.find((item) => String(item?.id || '').trim() === selectedInsuranceId.value)
  || insuranceOptions.value.find((item) => String(item?.pricingType || '').trim().toLowerCase() === 'included')
  || insuranceOptions.value[0]
  || null)
const selectedInsuranceName = computed(() => String(selectedInsuranceOption.value?.name || 'Insurance').trim())
const insurancePrice = computed(() => Number(selectedInsuranceOption.value?.pricingType === 'included' ? 0 : selectedInsuranceOption.value?.price || 0))
const quotePayload = computed(() => {
  const vehicleGroupId = Number(props.car?.vehicleGroupId || props.car?.id || 0)

  if (!vehicleGroupId || !props.bookingPayload) {
    return null
  }

  return {
    ...props.bookingPayload,
    vehicle_group_id: vehicleGroupId,
    extras: selectedExtrasPayload.value,
  }
})
const canSubmitBooking = computed(() => customerFirstNameValue.value.length >= 2 && customerLastNameValue.value.length >= 2 && isPhoneValid.value && !bookingSubmitting.value && Boolean(quotePayload.value))
const includedItems = computed(() => (
  Array.isArray(props.car?.includedInPrice)
    ? [...props.car.includedInPrice]
      .sort((left, right) => Number(left?.sortOrder || 0) - Number(right?.sortOrder || 0))
      .slice(0, 3)
    : []
))
const carDailyPrice = computed(() => Number(props.car?.price || props.car?.priceFrom || props.car?.displayPriceFrom || 0))
const showReviewsSection = false
const showSuperhostBadge = true
const showHostSection = false
const insuranceIconByKey = {
  shield: Shield,
  'shield-check': ShieldCheck,
  sparkles: Sparkles,
}

function formatAvailabilityDate(value) {
  if (!value) {
    return ''
  }

  const date = new Date(value)
  if (Number.isNaN(date.getTime())) {
    return String(value)
  }

  return new Intl.DateTimeFormat('en', { month: 'short', day: 'numeric' }).format(date)
}

const basicDeposit = computed(() => Number(props.car?.deposit || props.car?.filterMeta?.deposit?.amount || 300))

const damageOptions = [
  { id: 0, label: 'No Accidents', icon: Sparkles, color: 'text-[#10b981]' },
  { id: 500, label: 'Scratch', icon: Eye, color: 'text-[#f59e0b]' },
  { id: 2000, label: 'Light Accident', icon: Zap, color: 'text-[#f97316]' },
  { id: 15000, label: 'Total Loss', icon: Flame, color: 'text-[#ef4444]' },
]

const similarCars = computed(() => {
  const cars = Array.isArray(props.allCars) ? props.allCars : []
  return cars.filter((item) => item?.id !== props.car?.id && item?.category === props.car?.category).slice(0, 2)
})

function setScrollLock(locked) {
  if (typeof document === 'undefined') return

  if (locked) {
    document.body.style.overflow = 'hidden'
    document.body.style.overscrollBehavior = 'none'
    document.body.style.touchAction = 'none'
    document.documentElement.style.overflow = 'hidden'
    document.body.dataset.scrollLock = 'true'
    return
  }

  document.body.style.overflow = ''
  document.body.style.overscrollBehavior = ''
  document.body.style.touchAction = ''
  document.documentElement.style.overflow = ''
  delete document.body.dataset.scrollLock
}

watch(
  () => props.car,
  (car) => {
    currentIndex.value = 0
    damageAmount.value = 0
    isSimulatorOpen.value = false
    activeAddons.value = []
    isBooking.value = false
    bookingMethod.value = 'wa'
    phoneNumber.value = ''
    submitSuccess.value = false
    setScrollLock(Boolean(car))
  },
  { immediate: true },
)

watch(
  () => insuranceOptions.value,
  (options) => {
    const defaultOption = options.find((item) => String(item?.pricingType || '').trim().toLowerCase() === 'included') || options[0] || null
    selectedInsuranceId.value = defaultOption ? String(defaultOption.id || '').trim() : ''
  },
  { immediate: true },
)

watch(
  () => JSON.stringify(quotePayload.value || {}),
  () => {
    void fetchQuote()
  },
  { immediate: true },
)

onBeforeUnmount(() => {
  setScrollLock(false)
})

function formatMoney(value, currency = displayCurrency.value) {
  const amount = Number(value || 0)
  const normalizedCurrency = String(currency || 'USD').toUpperCase()
  const formattedAmount = amount.toFixed(amount % 1 === 0 ? 0 : 2)

  return normalizedCurrency === 'USD' ? `$${formattedAmount}` : `${normalizedCurrency} ${formattedAmount}`
}

function toggleAddon(addon) {
  const id = Number(addon?.id || 0)

  if (!id) {
    return
  }

  if (activeAddons.value.includes(id)) {
    activeAddons.value = activeAddons.value.filter((itemId) => itemId !== id)
  } else {
    activeAddons.value = [...activeAddons.value, id]
  }
}

function closeModal() {
  emit('close')
}

function selectImage(index) {
  currentIndex.value = index
}

function cyclePrev() {
  if (!allImages.value.length) return
  currentIndex.value = currentIndex.value > 0 ? currentIndex.value - 1 : allImages.value.length - 1
}

function cycleNext() {
  if (!allImages.value.length) return
  currentIndex.value = currentIndex.value < allImages.value.length - 1 ? currentIndex.value + 1 : 0
}


async function fetchQuote() {
  if (!quotePayload.value) {
    liveQuote.value = null
    quoteError.value = ''
    return
  }

  quoteLoading.value = true
  quoteError.value = ''

  try {
    const response = await $fetch(`${runtimeConfig.public.apiBaseUrl}/public-catalog/quote`, {
      method: 'POST',
      body: quotePayload.value,
    })
    liveQuote.value = response?.data || null
  } catch (error) {
    liveQuote.value = null
    quoteError.value = error?.data?.message || error?.message || 'Unable to calculate quote.'
  } finally {
    quoteLoading.value = false
  }
}

async function hydrateQuickViewVehicle(car = props.car) {
  const baseCar = car || null

  if (!baseCar) {
    return null
  }

  if (Number(baseCar.vehicleGroupId || 0) > 0) {
    return baseCar
  }

  const contentKey = String(baseCar.contentKey || baseCar.content_key || baseCar.entityId || baseCar.entity_id || '').trim()

  if (!contentKey) {
    return baseCar
  }

  quickViewHydrating.value = true

  try {
    const resolvedCar = await loadResolvedVehicleDetail(contentKey, locale.value)

    if (!resolvedCar) {
      return baseCar
    }

    const resolvedVehicleGroupId = Number(resolvedCar.vehicleGroupId || 0)

    if (!resolvedVehicleGroupId) {
      return {
        ...baseCar,
        ...resolvedCar,
      }
    }

    return {
      ...baseCar,
      ...resolvedCar,
      vehicleGroupId: resolvedVehicleGroupId,
      id: resolvedCar.id || baseCar.id || contentKey,
      key: resolvedCar.contentKey || resolvedCar.entityId || contentKey,
    }
  } catch {
    return baseCar
  } finally {
    quickViewHydrating.value = false
  }
}

async function submitBookingRequest() {
  if (customerFirstNameValue.value.length < 2 || customerLastNameValue.value.length < 2) {
    bookingError.value = 'Please enter your first and last name.'
    return
  }

  if (!isPhoneValid.value) {
    bookingError.value = 'Please enter a valid phone number.'
    return
  }

  if (!quotePayload.value) {
    bookingError.value = 'Choose dates and pickup location first.'
    return
  }

  bookingSubmitting.value = true
  bookingError.value = ''

  try {
    const response = await $fetch(`${runtimeConfig.public.apiBaseUrl}/public-bookings`, {
      method: 'POST',
      body: {
        ...quotePayload.value,
        customer: {
          first_name: customerFirstNameValue.value,
          last_name: customerLastNameValue.value,
          phone: combinePhone(),
        },
        comment: `Preferred contact: ${bookingMethod.value}`,
      },
    })

    createdBooking.value = response?.data || null
    submitSuccess.value = true
  } catch (error) {
    bookingError.value = error?.data?.message || error?.message || 'Unable to submit request.'
  } finally {
    bookingSubmitting.value = false
  }
}

function selectInsuranceOption(optionId) {
  selectedInsuranceId.value = String(optionId || '').trim()
}

function resolveInsuranceIcon(option) {
  return insuranceIconByKey[String(option?.iconKey || '').trim()] || Shield
}

function isIncludedInsurance(option) {
  return String(option?.pricingType || '').trim().toLowerCase() === 'included'
}
</script>

<template>
  <Teleport to="body">
    <AnimatePresence>
      <motion.div
        v-if="car"
        :initial="{ opacity: 0 }"
        :animate="{ opacity: 1 }"
        :exit="{ opacity: 0 }"
        class="fixed inset-0 z-[120] overflow-y-auto"
      >
        <div
          class="fixed inset-0 bg-slate-900/60 backdrop-blur-md transition-opacity"
          @click="closeModal"
        />

        <div class="min-h-full flex flex-col py-8 sm:py-12 lg:py-16 items-center justify-start sm:px-4 lg:px-8 pointer-events-none relative z-10 w-full">
          <motion.div
            :initial="{ opacity: 0, scale: 0.95, y: 20 }"
            :animate="{ opacity: 1, scale: 1, y: 0 }"
            :exit="{ opacity: 0, scale: 0.95, y: 20 }"
            :transition="{ type: 'spring', damping: 30, stiffness: 300, mass: 0.8 }"
            class="relative w-full lg:max-w-5xl xl:max-w-[1040px] bg-[#eff2f6] shadow-2xl rounded-t-[40px] sm:rounded-[40px] flex flex-col pointer-events-auto shrink-0 mt-auto sm:mt-16 sm:mb-16 sm:mx-auto"
          >
            <div class="absolute top-0 left-0 w-full h-24 bg-gradient-to-b from-black/20 to-transparent z-[80] sm:hidden pointer-events-none rounded-t-[40px]" />
            <button
              type="button"
              class="absolute top-4 right-4 sm:top-6 sm:right-6 z-[90] w-10 h-10 bg-white/80 backdrop-blur-md rounded-full flex items-center justify-center text-slate-900 hover:bg-white transition-colors shadow-sm"
              @click="closeModal"
            >
              <X class="w-5 h-5" />
            </button>

          <div class="flex-1 flex flex-col w-full lg:w-auto relative bg-[#eff2f6] rounded-t-[40px] sm:rounded-[40px]">
            <div class="w-full shrink-0 rounded-t-[40px] sm:rounded-t-[40px] overflow-hidden relative">
              <div class="w-full h-[35vh] sm:h-[45vh] lg:h-[50vh] relative bg-[#eff2f6] shrink-0">
                <div class="absolute top-6 left-6 z-20 flex gap-2">
                  <button
                    v-if="images.length > 0"
                    type="button"
                    :class="[
                      'px-5 py-2.5 rounded-full font-bold text-[11px] uppercase tracking-widest transition-all',
                      currentIndex < images.length ? 'bg-[#1e293b] text-white shadow-md' : 'bg-white text-slate-500 hover:text-slate-900 shadow-sm',
                    ]"
                    @click="selectImage(0)"
                  >
                    Exterior
                  </button>
                  <button
                    v-if="interiorImages.length > 0"
                    type="button"
                    :class="[
                      'px-5 py-2.5 rounded-full font-bold text-[11px] uppercase tracking-widest transition-all',
                      currentIndex >= images.length ? 'bg-[#1e293b] text-white shadow-md' : 'bg-white text-slate-500 hover:text-slate-900 shadow-sm',
                    ]"
                    @click="selectImage(images.length)"
                  >
                    Interior
                  </button>
                </div>

                <div class="absolute inset-0 flex items-center justify-center p-10 mt-8">
                    <motion.img
                      v-if="allImages[currentIndex]"
                      :key="currentIndex"
                      :src="allImages[currentIndex]"
                    :initial="{ opacity: 0, scale: 0.95 }"
                    :animate="{ opacity: 1, scale: 1 }"
                    :exit="{ opacity: 0, scale: 0.95 }"
                    :transition="{ duration: 0.3 }"
                    class="w-full h-full object-contain mix-blend-multiply drop-shadow-[0_20px_40px_rgba(0,0,0,0.15)]"
                  />
                </div>

                <button
                  type="button"
                  class="absolute left-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center text-slate-800 shadow-sm opacity-0 hover:opacity-100 transition-all hover:scale-110 z-20"
                  @click="cyclePrev"
                >
                  <ChevronDown class="w-5 h-5 rotate-90" />
                </button>
                <button
                  type="button"
                  class="absolute right-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/80 backdrop-blur-md flex items-center justify-center text-slate-800 shadow-sm opacity-0 hover:opacity-100 transition-all hover:scale-110 z-20"
                  @click="cycleNext"
                >
                  <ChevronDown class="w-5 h-5 -rotate-90" />
                </button>

                <div class="absolute bottom-6 left-1/2 -translate-x-1/2 bg-white/90 backdrop-blur-md p-2 rounded-[32px] shadow-sm border border-slate-100 flex gap-2 justify-center items-center h-[72px] min-w-[200px]">
                  <button
                    v-for="(img, idx) in allImages"
                    :key="idx"
                    type="button"
                    :class="[
                      'relative h-[56px] w-[84px] rounded-[24px] overflow-hidden transition-all duration-300 flex items-center justify-center bg-[#eff2f6] p-1 shrink-0',
                      idx === currentIndex ? 'border-[2px] border-brand-orange shadow-sm' : 'border-2 border-transparent opacity-50 hover:opacity-100 mix-blend-multiply',
                    ]"
                    @click="selectImage(idx)"
                  >
                    <img :src="img" class="max-w-full max-h-full object-contain mix-blend-multiply">
                  </button>
                </div>
              </div>
            </div>

            <div class="flex-1 bg-white p-6 md:p-10 relative w-full sm:rounded-t-[40px] flex flex-col lg:flex-row gap-10 lg:gap-16 items-start z-20">
              <div class="flex-1 flex flex-col w-full lg:w-auto min-w-0">
                <div class="flex items-center justify-between mb-8">
                  <div>
                    <div class="text-[12px] font-bold text-[#f97316] uppercase tracking-widest mb-1.5">
                      {{ carCategoryLabel }}
                    </div>
                    <h2 class="text-3xl sm:text-4xl lg:text-[42px] font-bold text-[#0f172a] leading-none tracking-tight">{{ carTitle }}</h2>
                  </div>
                  <button
                    type="button"
                    class="w-12 h-12 rounded-full bg-[#f8fafc] flex items-center justify-center text-[#64748b] hover:bg-[#f1f5f9] hover:text-[#0f172a] transition-colors shrink-0"
                  >
                    <Volume2 class="w-5 h-5" />
                  </button>
                </div>

                <div class="mb-8 p-6 rounded-3xl bg-slate-50 border border-slate-100 flex flex-wrap gap-4 lg:gap-8 shadow-inner items-center">
                  <div class="flex flex-col gap-1 items-start">
                    <div class="text-[11px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1"><Cog class="w-3.5 h-3.5" /> Transmission</div>
                    <span class="font-black text-slate-800 text-[16px]">{{ carTransmissionLabel }}</span>
                  </div>
                  <div class="w-[1px] h-8 bg-slate-200 hidden sm:block" />
                  <div class="flex flex-col gap-1 items-start">
                    <div class="text-[11px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1"><Fuel class="w-3.5 h-3.5" /> Fuel</div>
                    <span class="font-black text-slate-800 text-[16px]">{{ carFuelLabel }}</span>
                  </div>
                  <div class="w-[1px] h-8 bg-slate-200 hidden sm:block" />
                  <div class="flex flex-col gap-1 items-start">
                    <div class="text-[11px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1"><Users class="w-3.5 h-3.5" /> Interior</div>
                    <span class="font-black text-slate-800 text-[16px]">{{ carSeatsLabel }}</span>
                  </div>
                  <template v-if="carTrunkLabel">
                    <div class="w-[1px] h-8 bg-slate-200 hidden sm:block" />
                    <div class="flex flex-col gap-1 items-start">
                      <div class="text-[11px] font-bold text-slate-400 uppercase tracking-widest flex items-center gap-1"><Luggage class="w-3.5 h-3.5" /> Trunk</div>
                      <div class="flex flex-wrap gap-1 mt-0.5">
                        <div class="flex items-center gap-1 bg-white/40 border border-white backdrop-blur-md shadow-md px-1.5 py-0.5 rounded-md text-[11px] font-bold text-slate-700 shadow-sm">
                          <Luggage class="w-3 h-3 text-slate-400" />
                          <span class="truncate max-w-[100px]">{{ carTrunkLabel }}</span>
                        </div>
                      </div>
                    </div>
                  </template>
                </div>

                <p class="text-[#64748b] text-[15px] leading-relaxed mb-10 font-medium">
                  {{ carDescription }}
                </p>

                <div v-if="showHostSection" class="mb-10 p-4 lg:p-5 bg-white/40 border border-white backdrop-blur-md shadow-md rounded-[24px] flex flex-col sm:flex-row items-center sm:items-start gap-4 shadow-md hover:shadow-lg transition-shadow cursor-pointer group">
                  <img src="https://i.pravatar.cc/150?u=manager33" alt="Manager" class="w-14 h-14 rounded-full object-cover border-[3px] border-[#eff2f6] shadow-sm shrink-0">
                  <div class="flex flex-col flex-1 w-full relative sm:text-left text-center">
                    <div class="absolute top-0 right-0 p-2 opacity-0 group-hover:opacity-100 transition-opacity hidden sm:block">
                      <ArrowRightLeft class="w-4 h-4 text-slate-300" />
                    </div>
                    <div class="flex flex-wrap items-center justify-center sm:justify-start gap-2 mb-1">
                      <span class="font-bold text-[15px] text-[#0f172a]">Alexander</span>
                      <span v-if="showSuperhostBadge" class="bg-emerald-100 text-emerald-700 text-[10px] font-bold uppercase px-2 py-0.5 rounded-full flex items-center gap-1"><CheckCircle class="w-3 h-3" /> Superhost</span>
                    </div>
                    <p class="text-[13px] text-slate-500 font-medium leading-relaxed mb-3 sm:pr-6">Ready to answer any questions and hand over {{ car.name }} in perfect condition.</p>
                    <div class="flex flex-wrap items-center justify-center sm:justify-start gap-x-3 gap-y-2 text-[12px] font-bold text-slate-400">
                      <div class="flex items-center gap-1 text-slate-700"><Star class="w-3.5 h-3.5 text-orange-400 fill-orange-400" /> 4.98</div>
                      <div class="hidden sm:block">•</div>
                      <div>120+ trips</div>
                      <div class="hidden sm:block">•</div>
                      <div class="flex items-center gap-1 text-[#3b82f6]"><Clock class="w-3.5 h-3.5 text-[#3b82f6]" /> Replies soon</div>
                    </div>
                  </div>
                </div>

                <div class="mb-10 w-full">
                  <h3 class="text-[14px] font-bold text-[#0f172a] mb-4">Included for free</h3>
                  <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
                    <template v-if="includedItems.length">
                      <div
                        v-for="(item, index) in includedItems"
                        :key="item.title || index"
                        class="bg-white/40 border border-white backdrop-blur-md shadow-md p-4 rounded-[20px] flex flex-col gap-2 shadow-sm hover:border-[#38bdf8] transition-colors group cursor-pointer w-full"
                        :class="index === 2 ? 'col-span-2 md:col-span-1 text-center md:text-left items-center md:items-start' : ''"
                      >
                        <div class="w-8 h-8 rounded-full bg-[#f0f9ff] text-[#38bdf8] flex items-center justify-center shrink-0 group-hover:scale-110 transition-transform"><ShieldCheck class="w-4 h-4" /></div>
                        <div class="text-[13px] font-bold text-slate-800 leading-tight">{{ item.title }}</div>
                      </div>
                    </template>

                  </div>
                </div>


                <div v-if="showReviewsSection" class="mb-10 w-[calc(100vw-32px)] sm:w-auto -ml-4 sm:ml-0 pl-4 sm:pl-0 pr-4 sm:pr-0">
                  <h3 class="text-[14px] font-bold text-[#0f172a] mb-4 hidden sm:block">Reviews for this car</h3>
                  <h3 class="text-[14px] font-bold text-[#0f172a] mb-4 sm:hidden">Guest reviews</h3>
                  <div class="flex gap-4 overflow-x-auto pb-4 snap-x hide-scroll">
                    <div
                      v-for="review in [
                        { name: 'Michael', date: 'April 2026', text: `Car is in perfect condition, clean inside and smells nice. ${car.name} did not let us down in the mountains!` },
                        { name: 'Elena', date: 'March 2026', text: 'Alexander handed over the keys very quickly. The car is top-notch, minimum consumption! I definitely recommend it.' },
                        { name: 'David', date: 'February 2026', text: 'Everything went gorgeously. Host is always in touch. I will definitely come back again.' },
                      ]"
                      :key="review.name"
                      class="min-w-[270px] max-w-[270px] bg-white/40 border border-white backdrop-blur-md shadow-md p-5 rounded-[24px] snap-center shadow-sm"
                    >
                      <div class="flex items-center justify-between mb-3">
                        <div class="flex items-center gap-3">
                          <div class="w-9 h-9 rounded-full bg-[#eff2f6] flex items-center justify-center font-bold text-slate-600 text-[13px]">{{ review.name[0] }}</div>
                          <div class="flex flex-col">
                            <span class="text-[14px] font-bold text-[#0f172a] leading-none mb-1">{{ review.name }}</span>
                            <span class="text-[11px] text-slate-400 font-medium leading-none">{{ review.date }}</span>
                          </div>
                        </div>
                        <div class="flex text-orange-400 items-center justify-center bg-orange-50 px-2 py-1 rounded-md">
                          <Star class="w-3.5 h-3.5 fill-orange-400 mr-1" /> <span class="text-[12px] font-bold text-orange-500">5.0</span>
                        </div>
                      </div>
                      <p class="text-[13px] text-slate-600 font-medium leading-normal italic">"{{ review.text }}"</p>
                    </div>
                  </div>
                </div>

                <div class="w-full">
                  <div class="w-full mb-12">
                    <div class="flex flex-col gap-2 mb-8">
                      <div class="flex items-center gap-3">
                        <div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center">
                          <ShieldCheck class="w-5 h-5 text-slate-700" />
                        </div>
                        <div>
                          <h3 class="text-[20px] font-bold text-[#0f172a] leading-none mb-1">Insurance Selection</h3>
                          <p class="text-[13px] font-medium text-[#64748b]">Protect your finances. CDW/TPL included.</p>
                        </div>
                      </div>
                    </div>

                    <div v-if="insuranceOptions.length || addonOptions.length" class="flex flex-col gap-2 mb-5">
                      <div
                        v-for="option in paidInsuranceOptions"
                        :key="option.id"
                        class="relative overflow-hidden p-5 rounded-[24px] border border-slate-200/80 transition-all duration-300 cursor-pointer flex items-center justify-between group flex-wrap sm:flex-nowrap gap-4 sm:gap-0 bg-white/85 backdrop-blur-2xl"
                        :class="selectedInsuranceId === String(option.id) ? 'bg-white border-slate-300 ring-1 ring-slate-300/60' : 'hover:bg-white hover:border-slate-300/90'"
                        @click="selectInsuranceOption(option.id)"
                      >
                        <div class="absolute inset-0 bg-gradient-to-br from-white/70 via-white/30 to-transparent pointer-events-none" />
                        <div class="flex items-center gap-4 w-full sm:w-auto">
                          <div :class="['w-12 h-12 rounded-full flex items-center justify-center shrink-0 transition-colors backdrop-blur-xl border border-slate-200/80 text-slate-500 bg-slate-50/95', selectedInsuranceId === String(option.id) ? 'bg-slate-800 text-white border-slate-800/50' : 'group-hover:bg-white']">
                            <component :is="resolveInsuranceIcon(option)" class="w-6 h-6" />
                          </div>
                          <div class="flex flex-col text-left">
                            <div class="flex items-center gap-2">
                              <span class="font-bold text-[16px] text-[#0f172a] mb-0.5">{{ option.name }}</span>
                              <span v-if="option.kindLabel" class="text-[10px] font-bold uppercase tracking-widest text-slate-400">{{ option.kindLabel }}</span>
                            </div>
                            <span class="text-[13px] font-medium text-[#64748b]">{{ option.description }}</span>
                          </div>
                        </div>
                        <div class="text-left sm:text-right w-full sm:w-auto pl-16 sm:pl-0 relative z-10">
                          <div class="font-black text-[18px] text-[#0f172a]">
                            {{ formatMoney(option.price, option.currency) }}<span class="text-[12px] opacity-70 ml-1">{{ option.pricingType === 'per_day' ? '/ day' : '' }}</span>
                          </div>
                        </div>
                        <div class="absolute inset-0 rounded-[24px] ring-1 ring-slate-200/70 pointer-events-none" />
                      </div>

                      <div v-if="includedInsuranceOptions.length" class="pt-2">
                        <div class="mb-2 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">Included in price</div>
                        <div
                          v-for="option in includedInsuranceOptions"
                          :key="option.id"
                          class="relative py-2 flex items-center justify-between group flex-wrap sm:flex-nowrap gap-3 sm:gap-0 cursor-default pointer-events-none opacity-85"
                        >
                          <div class="flex items-center gap-3 w-full sm:w-auto">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0 bg-slate-100 text-slate-400">
                              <component :is="resolveInsuranceIcon(option)" class="w-4 h-4" />
                            </div>
                            <div class="flex flex-col text-left">
                              <div class="flex items-center gap-2">
                                <span class="font-semibold text-[13px] text-slate-700 leading-tight">{{ option.name }}</span>
                                <span v-if="option.kindLabel" class="text-[9px] font-bold uppercase tracking-[0.16em] text-slate-300">{{ option.kindLabel }}</span>
                              </div>
                              <span class="text-[11px] font-medium text-slate-400 leading-snug">{{ option.description }}</span>
                            </div>
                          </div>
                          <div class="text-left sm:text-right w-full sm:w-auto pl-12 sm:pl-0">
                            <div class="inline-flex items-center gap-1 rounded-full bg-transparent px-0 py-0 text-[10px] font-bold text-slate-500">
                              <CheckCircle class="w-3 h-3 text-slate-400" />
                              Included
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="bg-slate-900 rounded-[20px] overflow-hidden shadow-xl relative text-white transition-all duration-300">
                        <div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-b from-white/10 to-transparent rounded-full blur-[60px] -translate-y-1/2 translate-x-1/3 pointer-events-none" />
                        <div class="px-3.5 py-3 sm:px-4 flex items-center justify-between cursor-pointer group hover:bg-white/5 transition-colors" @click="isSimulatorOpen = !isSimulatorOpen">
                          <div class="flex min-w-0 items-center gap-2.5">
                            <div class="w-8 h-8 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform shadow-inner">
                              <Zap class="w-3.5 h-3.5 text-yellow-400" />
                            </div>
                            <div class="min-w-0">
                              <div class="text-[13px] font-bold text-white leading-tight flex items-center gap-2">Accident Simulator <span v-if="!isSimulatorOpen" class="bg-slate-800 text-slate-300 text-[9px] uppercase font-bold px-1.5 py-0.5 rounded-full border border-slate-700">Click</span></div>
                              <div class="text-[10px] text-slate-400 font-medium truncate">Who pays if damage happens</div>
                            </div>
                          </div>

                          <div class="flex items-center gap-3 shrink-0">
                            <div class="text-right hidden sm:block">
                              <div class="text-[9px] uppercase font-bold text-slate-500 tracking-wider">Risk</div>
                              <div :class="['text-[13px] font-black leading-tight', selectedInsuranceOption?.pricingType === 'included' ? 'text-[#10b981]' : 'text-red-400']">
                                {{ selectedInsuranceName }}
                              </div>
                              <div class="text-[8px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                                {{ selectedInsuranceOption?.pricingType === 'included' ? 'Included' : `${formatMoney(insurancePrice, selectedInsuranceOption?.currency)}/day` }}
                              </div>
                            </div>
                            <div :class="['w-7 h-7 rounded-full border border-slate-700 flex items-center justify-center transition-all duration-300', isSimulatorOpen ? 'rotate-180 bg-white text-slate-900 border-white' : 'group-hover:bg-slate-800 text-slate-400']">
                              <ChevronDown class="w-3.5 h-3.5" />
                            </div>
                          </div>
                        </div>

                        <AnimatePresence>
                          <motion.div v-if="isSimulatorOpen" :initial="{ height: 0, opacity: 0 }" :animate="{ height: 'auto', opacity: 1 }" :exit="{ height: 0, opacity: 0 }" class="overflow-hidden">
                            <div class="px-3.5 pb-3 sm:px-4 border-t border-slate-800/50 pt-3">
                              <div class="grid grid-cols-2 sm:flex sm:flex-wrap gap-1.5 mb-3">
                                <button
                                  v-for="damage in damageOptions"
                                  :key="damage.id"
                                  type="button"
                                  :class="['px-2.5 py-1.5 rounded-lg text-[11px] font-bold flex items-center gap-1.5 transition-all border', damageAmount === damage.id ? 'bg-white text-slate-900 border-white shadow-[0_0_16px_rgba(255,255,255,0.16)]' : 'bg-slate-800/50 text-slate-300 hover:bg-slate-800 border-slate-700']"
                                  @click="damageAmount = damage.id"
                                >
                                  <div :class="['w-5 h-5 rounded-full flex items-center justify-center', damageAmount === damage.id ? 'bg-slate-200' : 'bg-slate-700']">
                                    <component :is="damage.icon" class="w-3 h-3" :class="damageAmount === damage.id ? damage.color : 'text-slate-400'" />
                                  </div>
                                  {{ damage.label }}
                                </button>
                              </div>

                              <div class="relative">
                                <motion.div
                                  key="simulator"
                                  :initial="{ opacity: 0, y: 10 }"
                                  :animate="{ opacity: 1, y: 0 }"
                                  class="bg-slate-800/80 backdrop-blur-md rounded-[16px] p-3 border border-slate-700 flex flex-col sm:flex-row gap-3 justify-between items-stretch"
                                >
                                  <div class="sm:w-[150px] text-left sm:border-r border-slate-700/50 sm:pr-3 flex sm:flex-col justify-between sm:justify-center items-center sm:items-start gap-2">
                                    <div class="text-[10px] font-semibold text-slate-400 mb-1 uppercase tracking-widest">Damage amount</div>
                                    <div class="text-[26px] sm:text-[30px] font-black text-white leading-none tracking-tight">$<span>{{ damageAmount }}</span></div>
                                  </div>

                                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-1.5 flex-1">
                                    <div
                                      v-for="option in paidInsuranceOptions"
                                      :key="option.id"
                                      class="p-2.5 rounded-[14px] flex justify-between items-center w-full bg-slate-800/50 border border-slate-700 opacity-95"
                                    >
                                      <div class="flex flex-col items-start text-left">
                                        <div class="text-[11px] font-bold mb-0.5 uppercase tracking-widest text-slate-300">{{ option.name }}</div>
                                        <div class="text-[10px] text-slate-400 font-medium max-w-[150px] line-clamp-2">{{ option.description }}</div>
                                      </div>
                                      <div class="text-[16px] font-black leading-none text-white">+${{ option.price }}</div>
                                    </div>
                                    <div
                                      v-for="option in includedInsuranceOptions"
                                      :key="option.id"
                                      class="py-1.5 flex justify-between items-center w-full opacity-70"
                                    >
                                      <div class="flex flex-col items-start text-left">
                                        <div class="text-[10px] font-semibold mb-0.5 uppercase tracking-[0.16em] text-slate-500">{{ option.name }}</div>
                                        <div class="text-[10px] text-slate-500 font-medium max-w-[150px]">{{ option.description }}</div>
                                      </div>
                                      <div class="inline-flex items-center gap-1 rounded-full bg-transparent px-0 py-0 text-[9px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                                        <Check class="w-3 h-3" />
                                        Included
                                      </div>
                                    </div>
                                  </div>
                                </motion.div>
                              </div>
                            </div>
                          </motion.div>
                        </AnimatePresence>
                      </div>

                      <div v-if="paidAddonOptions.length" class="pt-1.5 border-t border-slate-100">
                        <div class="mb-1.5 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400">Equipment & services</div>
                        <div
                          v-for="addon in paidAddonOptions"
                          :key="addon.id"
                          class="relative overflow-hidden p-2.5 rounded-[14px] border transition-all duration-300 cursor-pointer flex items-center justify-between group gap-2.5 backdrop-blur-2xl"
                          :class="activeAddons.includes(Number(addon.id)) ? 'bg-[#eff6ff] text-[#0f172a] border-[#bfdbfe] ring-1 ring-[#bfdbfe]/70' : 'bg-white/75 border-slate-200/80 hover:bg-white hover:border-slate-300/90'"
                          @click="toggleAddon(addon)"
                        >
                          <div :class="['absolute inset-0 pointer-events-none transition-opacity', activeAddons.includes(Number(addon.id)) ? 'bg-[radial-gradient(circle_at_top_right,_rgba(59,130,246,0.10),_transparent_55%)] opacity-100' : 'bg-gradient-to-br from-white/60 via-white/20 to-transparent opacity-100']" />
                          <div class="flex items-center gap-2.5 w-full sm:w-auto relative z-10 min-w-0">
                            <div :class="['w-8 h-8 rounded-full flex items-center justify-center shrink-0 transition-colors backdrop-blur-xl border border-slate-200/80', activeAddons.includes(Number(addon.id)) ? 'bg-white text-blue-600 border-[#bfdbfe]' : 'bg-slate-50 text-slate-500']">
                              <component :is="addon.kind === 'insurance' ? Shield : Briefcase" class="w-4 h-4" />
                            </div>
                            <div class="flex flex-col text-left min-w-0">
                              <div class="flex items-center gap-2 min-w-0">
                                <span class="font-bold text-[12px] text-inherit leading-tight truncate">{{ addon.name }}</span>
                                <span v-if="addon.kindLabel" class="text-[8px] font-bold uppercase tracking-widest text-slate-400 truncate">{{ addon.kindLabel }}</span>
                              </div>
                              <span :class="['text-[9px] font-medium leading-snug line-clamp-1 sm:line-clamp-2', activeAddons.includes(Number(addon.id)) ? 'text-[#475569]' : 'text-[#64748b]']">{{ addon.description }}</span>
                            </div>
                          </div>
                          <div class="text-left sm:text-right shrink-0 relative z-10">
                            <div :class="['font-black text-[14px] whitespace-nowrap', activeAddons.includes(Number(addon.id)) ? 'text-[#0f172a]' : 'text-[#0f172a]']">
                              {{ formatMoney(addon.price, addon.currency) }}<span class="text-[9px] opacity-70 ml-1">{{ addon.pricingType === 'per_day' ? '/ day' : '' }}</span>
                            </div>
                          </div>
                          <div :class="['w-4.5 h-4.5 rounded-full border-[2px] flex items-center justify-center relative z-10 shrink-0', activeAddons.includes(Number(addon.id)) ? 'border-[#3b82f6] bg-white' : 'border-[#cbd5e1] bg-white']">
                            <Check v-if="activeAddons.includes(Number(addon.id))" class="w-3 h-3 text-[#3b82f6]" />
                          </div>
                          <div v-if="selectedExtraIds.includes(Number(addon.id))" class="absolute inset-0 rounded-[14px] ring-1 ring-[#bfdbfe]/60 pointer-events-none" />
                        </div>
                      </div>

                    </div>

                    <div v-if="false" class="bg-slate-900 rounded-[24px] overflow-hidden shadow-xl relative text-white transition-all duration-300">
                      <div class="absolute top-0 right-0 w-40 h-40 bg-gradient-to-b from-white/10 to-transparent rounded-full blur-[60px] -translate-y-1/2 translate-x-1/3 pointer-events-none" />
                      <div class="px-4 py-3.5 sm:px-5 flex items-center justify-between cursor-pointer group hover:bg-white/5 transition-colors" @click="isSimulatorOpen = !isSimulatorOpen">
                        <div class="flex min-w-0 items-center gap-3">
                          <div class="w-9 h-9 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center shrink-0 group-hover:scale-105 transition-transform shadow-inner">
                            <Zap class="w-4 h-4 text-yellow-400" />
                          </div>
                          <div class="min-w-0">
                            <div class="text-[14px] font-bold text-white leading-tight flex items-center gap-2">Accident Simulator <span v-if="!isSimulatorOpen" class="bg-slate-800 text-slate-300 text-[9px] uppercase font-bold px-1.5 py-0.5 rounded-full border border-slate-700">Click</span></div>
                            <div class="text-[11px] text-slate-400 font-medium truncate">Who pays if damage happens</div>
                          </div>
                        </div>

                      <div class="flex items-center gap-3 shrink-0">
                        <div class="text-right hidden sm:block">
                          <div class="text-[9px] uppercase font-bold text-slate-500 tracking-wider">Risk</div>
                            <div :class="['text-[14px] font-black', selectedInsuranceOption?.pricingType === 'included' ? 'text-[#10b981]' : 'text-red-400']">
                              {{ selectedInsuranceName }}
                            </div>
                            <div class="text-[9px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                              {{ selectedInsuranceOption?.pricingType === 'included' ? 'Included' : `${formatMoney(insurancePrice, selectedInsuranceOption?.currency)}/day` }}
                            </div>
                          </div>
                          <div :class="['w-8 h-8 rounded-full border border-slate-700 flex items-center justify-center transition-all duration-300', isSimulatorOpen ? 'rotate-180 bg-white text-slate-900 border-white' : 'group-hover:bg-slate-800 text-slate-400']">
                            <ChevronDown class="w-4 h-4" />
                          </div>
                        </div>
                      </div>

                      <AnimatePresence>
                        <motion.div v-if="isSimulatorOpen" :initial="{ height: 0, opacity: 0 }" :animate="{ height: 'auto', opacity: 1 }" :exit="{ height: 0, opacity: 0 }" class="overflow-hidden">
                          <div class="px-4 pb-4 sm:px-5 border-t border-slate-800/50 pt-4">
                            <div class="grid grid-cols-2 sm:flex sm:flex-wrap gap-2 mb-4">
                              <button
                                v-for="damage in damageOptions"
                                :key="damage.id"
                                type="button"
                                :class="['px-3 py-2 rounded-xl text-[12px] font-bold flex items-center gap-2 transition-all border', damageAmount === damage.id ? 'bg-white text-slate-900 border-white shadow-[0_0_16px_rgba(255,255,255,0.16)]' : 'bg-slate-800/50 text-slate-300 hover:bg-slate-800 border-slate-700']"
                                @click="damageAmount = damage.id"
                              >
                                <div :class="['w-6 h-6 rounded-full flex items-center justify-center', damageAmount === damage.id ? 'bg-slate-200' : 'bg-slate-700']">
                                  <component :is="damage.icon" class="w-3.5 h-3.5" :class="damageAmount === damage.id ? damage.color : 'text-slate-400'" />
                                </div>
                                {{ damage.label }}
                              </button>
                            </div>

                            <div class="relative">
                              <motion.div
                                key="simulator"
                                :initial="{ opacity: 0, y: 10 }"
                                :animate="{ opacity: 1, y: 0 }"
                                class="bg-slate-800/80 backdrop-blur-md rounded-[20px] p-4 border border-slate-700 flex flex-col sm:flex-row gap-4 justify-between items-stretch"
                              >
                                <div class="sm:w-[160px] text-left sm:border-r border-slate-700/50 sm:pr-4 flex sm:flex-col justify-between sm:justify-center items-center sm:items-start gap-3">
                                  <div class="text-[12px] font-semibold text-slate-400 mb-1 uppercase tracking-widest">Damage amount</div>
                                  <div class="text-[30px] sm:text-[34px] font-black text-white leading-none tracking-tight">$<span>{{ damageAmount }}</span></div>
                                </div>

                                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 flex-1">
                                  <div
                                    v-for="option in paidInsuranceOptions"
                                    :key="option.id"
                                    class="p-3 rounded-[16px] flex justify-between items-center w-full bg-slate-800/50 border border-slate-700 opacity-95"
                                  >
                                    <div class="flex flex-col items-start text-left">
                                      <div class="text-[12px] font-bold mb-1 uppercase tracking-widest text-slate-300">{{ option.name }}</div>
                                      <div class="text-[11px] text-slate-400 font-medium max-w-[150px]">{{ option.description }}</div>
                                    </div>
                                    <div class="text-[18px] font-black leading-none text-white">+${{ option.price }}</div>
                                  </div>
                                  <div
                                    v-for="option in includedInsuranceOptions"
                                    :key="option.id"
                                    class="py-2 flex justify-between items-center w-full opacity-75"
                                  >
                                    <div class="flex flex-col items-start text-left">
                                      <div class="text-[10px] font-semibold mb-0.5 uppercase tracking-[0.16em] text-slate-500">{{ option.name }}</div>
                                      <div class="text-[10px] text-slate-500 font-medium max-w-[150px]">{{ option.description }}</div>
                                    </div>
                                    <div class="inline-flex items-center gap-1 rounded-full bg-transparent px-0 py-0 text-[9px] font-semibold uppercase tracking-[0.16em] text-slate-400">
                                      <Check class="w-3 h-3" />
                                      Included
                                    </div>
                                  </div>
                                </div>
                              </motion.div>
                            </div>
                          </div>
                        </motion.div>
                      </AnimatePresence>
                    </div>
                  </div>

                </div>

                <div v-if="tripEconomy" class="mt-6 mb-5 w-full bg-slate-900 rounded-[22px] p-4 relative overflow-hidden grid gap-4 text-white shadow-lg sm:grid-cols-[1fr_auto] sm:items-center group">
                  <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/noise-lines.png')] opacity-10" />

                  <div class="relative z-10 w-full lg:flex-1">
                    <div class="text-[12px] font-bold text-emerald-400 uppercase tracking-widest mb-1.5 flex items-center gap-1.5"><Leaf class="w-3.5 h-3.5" /> Trip economy</div>
                    <h3 class="text-[16px] sm:text-[17px] font-bold leading-snug">{{ tripEconomy.routeLabel }} · {{ tripEconomy.distanceKm }} km</h3>
                    <p class="text-[12px] text-slate-400 font-medium truncate">Fuel estimate for {{ car.name }}</p>
                  </div>

                  <div class="grid grid-cols-2 gap-4 relative z-10 shrink-0 sm:min-w-[360px]">
                    <div class="flex flex-col">
                      <div class="text-[11px] text-slate-400 font-medium uppercase mb-1">Avg. consumption</div>
                      <div class="text-[20px] font-bold flex items-end gap-1">
                        {{ tripEconomy.consumptionLabel }}
                        <span class="text-[12px] text-slate-400 font-medium pb-1">/100km</span>
                      </div>
                    </div>
                    <div class="absolute left-1/2 top-1/2 hidden h-9 w-px -translate-y-1/2 bg-slate-700 sm:block" />
                    <div class="flex flex-col">
                      <div class="text-[11px] text-slate-400 font-medium uppercase mb-1">Estimated fuel</div>
                      <div class="text-[20px] font-bold text-emerald-400 flex items-end gap-1">
                        {{ tripEconomy.estimatedCostLabel }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="pt-6 border-t border-white/60 w-full mb-10 lg:mb-0">
                  <div class="text-[14px] font-bold text-[#0f172a] mb-4">Similar cars:</div>
                  <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <div
                      v-for="carItem in similarCars"
                      :key="carItem.id"
                      class="bg-white/40 border border-white backdrop-blur-md p-3 rounded-[20px] flex items-center gap-3 cursor-pointer hover:border-[#3b82f6] hover:bg-[#eff6ff] hover:shadow-md transition-all group"
                      @click="emit('close')"
                    >
                      <div class="w-16 h-12 bg-white rounded-lg flex items-center justify-center shrink-0 border border-slate-100 group-hover:border-[#bfdbfe] overflow-hidden relative">
                        <img :src="carItem.image" :alt="carItem.name" class="absolute inset-0 w-full h-full object-contain p-1 mix-blend-multiply group-hover:scale-110 transition-transform">
                      </div>
                      <div class="flex flex-col">
                        <div class="text-[13px] font-bold text-slate-900 leading-tight mb-0.5">{{ carItem.name }}</div>
                        <div class="text-[12px] font-bold text-[#38bdf8]">${{ carItem.price }} / day</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="w-full lg:w-[320px] xl:w-[360px] shrink-0 sticky top-8 self-start pb-24 lg:pb-0">
                <div class="bg-[#f8fafc] rounded-[32px] p-8 flex flex-col shadow-sm border border-slate-100 overflow-hidden relative">
                  <AnimatePresence mode="popLayout">
                    <motion.div
                      v-if="!isBooking && !submitSuccess"
                      key="breakdown"
                      :initial="{ opacity: 0, x: -20 }"
                      :animate="{ opacity: 1, x: 0 }"
                      :exit="{ opacity: 0, x: -20 }"
                      class="flex flex-col w-full"
                    >
                      <div class="flex flex-col gap-2 mb-4 p-3.5 bg-white rounded-[22px] border border-slate-100 shadow-sm">
                        <div class="flex items-center gap-2 text-[11px] font-bold text-slate-800">
                          <MapPin class="w-3.5 h-3.5 text-slate-400" /> {{ location }}
                        </div>
                        <div class="flex items-center gap-2 text-[11px] font-bold text-slate-800">
                          <Clock class="w-3.5 h-3.5 text-slate-400" /> {{ bookingTripLabel }}
                        </div>
                      </div>

                      <div class="mb-4 rounded-[24px] border border-slate-100 bg-white p-4">
                        <div class="text-[11px] font-bold text-[#64748b] uppercase tracking-[0.18em] mb-3">Price breakdown</div>

                        <div class="space-y-3">
                          <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                              <div class="text-[14px] font-medium text-[#64748b]">Car rental</div>
                              <div class="text-[11px] text-slate-400">{{ formatMoney(displayDailyRate) }} × {{ bookingDayCount }} days</div>
                            </div>
                            <div class="text-[14px] font-bold text-[#0f172a] text-right">
                              {{ formatMoney(rentalTotalAmount) }}
                            </div>
                          </div>

                      <div class="flex items-start justify-between gap-3">
                        <div class="min-w-0">
                          <div class="text-[14px] font-medium text-[#64748b]">Insurance</div>
                          <div class="text-[11px] text-slate-400">{{ selectedInsuranceName }}</div>
                        </div>
                            <div v-if="selectedInsuranceOption?.pricingType === 'included'" class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-emerald-700 ring-1 ring-emerald-100">
                              Included
                            </div>
                            <div v-else class="text-[14px] font-bold text-[#0f172a] text-right">
                              {{ formatMoney(insurancePrice, selectedInsuranceOption?.currency) }}
                            </div>
                          </div>

                          <div class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                              <div class="text-[14px] font-medium text-[#64748b]">Refundable deposit</div>
                              <div class="text-[11px] text-slate-400">Refunded after vehicle return, subject to inspection.</div>
                            </div>
                            <div class="text-[14px] font-bold text-[#0f172a] text-right">
                              {{ formatMoney(displayDeposit) }}
                            </div>
                          </div>

                          <div v-if="quoteFeesAmount" class="flex items-start justify-between gap-3">
                            <div class="min-w-0">
                              <div class="text-[14px] font-medium text-[#64748b]">Taxes / fees</div>
                              <div class="text-[11px] text-slate-400">Any backend-applied extras or service fees</div>
                            </div>
                            <div class="text-[14px] font-bold text-[#0f172a] text-right">
                              {{ formatMoney(quoteFeesAmount) }}
                            </div>
                          </div>
                        </div>
                      </div>

                      <div v-if="selectedPaidAddonOptions.length" class="mb-4 rounded-[24px] border border-slate-100 bg-white p-4">
                        <div class="text-[11px] font-bold text-[#64748b] uppercase tracking-[0.18em] mb-3">Selected extras</div>

                        <div class="space-y-3">
                          <div
                            v-for="addon in selectedPaidAddonOptions"
                            :key="addon.id"
                            class="flex items-start justify-between gap-3"
                          >
                            <div class="min-w-0">
                              <div class="text-[14px] font-medium text-[#64748b]">{{ addon.name }}</div>
                              <div class="text-[11px] text-slate-400">{{ addon.description }}</div>
                            </div>
                            <div v-if="String(addon.pricingType || '').toLowerCase() === 'included'" class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-emerald-700 ring-1 ring-emerald-100">
                              Included
                            </div>
                            <div v-else class="text-[14px] font-bold text-[#0f172a] text-right">
                              {{ formatMoney(Number(addon.price || 0) * (String(addon.pricingType || '').toLowerCase() === 'per_day' ? bookingDayCount : 1), addon.currency) }}
                            </div>
                          </div>
                        </div>
                      </div>

                      <div v-if="includedAddonOptions.length" class="mb-4 rounded-[24px] border border-slate-100 bg-white p-4">
                        <div class="text-[11px] font-bold text-[#64748b] uppercase tracking-[0.18em] mb-3">Included add-ons</div>

                        <div class="space-y-3">
                          <div
                            v-for="addon in includedAddonOptions"
                            :key="addon.id"
                            class="flex items-start justify-between gap-3"
                          >
                            <div class="min-w-0">
                              <div class="text-[14px] font-medium text-[#64748b]">{{ addon.name }}</div>
                              <div class="text-[11px] text-slate-400">{{ addon.description }}</div>
                            </div>
                            <div class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.16em] text-emerald-700 ring-1 ring-emerald-100">
                              Included
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="mb-4 rounded-[24px] border border-slate-100 bg-slate-50/80 p-4">
                        <div class="text-[11px] font-bold text-[#64748b] uppercase tracking-[0.18em] mb-3">Payment summary</div>

                        <div class="space-y-2">
                          <div class="flex items-center justify-between gap-3">
                            <span class="text-[14px] font-medium text-[#64748b]">Due now</span>
                            <span class="text-[14px] font-bold text-emerald-700">{{ formatMoney(dueNowAmount) }}</span>
                          </div>

                          <div class="flex items-end justify-between gap-3">
                            <div class="min-w-0">
                              <div class="text-[14px] font-medium text-[#64748b]">Estimated total</div>
                              <div class="text-[11px] text-slate-400">Paid at pickup / later</div>
                            </div>
                            <div class="text-[32px] font-bold text-[#0f172a] tracking-tight leading-none">
                              {{ quoteLoading ? '...' : displayTotalWithCurrency }}
                            </div>
                          </div>

                          <div class="flex items-center justify-between gap-3">
                            <span class="text-[14px] font-medium text-[#64748b]">Refundable deposit</span>
                            <span class="text-[14px] font-bold text-[#0f172a]">{{ formatMoney(displayDeposit) }}</span>
                          </div>
                        </div>
                      </div>

                      <div class="mt-1 mb-4 bg-[#ecfdf5] border border-[#d1fae5] rounded-xl p-3 flex items-start gap-3">
                        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center shrink-0 text-[#10b981]">
                          <ShieldCheck class="w-4 h-4" />
                        </div>
                        <div>
                          <div class="text-[12px] font-bold text-[#065f46] mb-0.5">Secure transaction</div>
                          <div class="text-[11px] text-[#047857]/80 leading-tight font-medium">Free cancellation 48h prior. You pay nothing right now.</div>
                        </div>
                      </div>

                      <button
                        type="button"
                        class="w-full bg-[#0f172a] text-white font-bold py-4 rounded-[24px] hover:bg-black hover:shadow-[0_10px_30px_rgba(15,23,42,0.3)] hover:-translate-y-0.5 transition-all flex items-center justify-center text-[16px]"
                        @click="isBooking = true"
                      >
                        Continue booking
                      </button>
                    </motion.div>

                    <motion.div
                      v-else-if="submitSuccess"
                      key="success"
                      :initial="{ opacity: 0, scale: 0.95 }"
                      :animate="{ opacity: 1, scale: 1 }"
                      class="flex flex-col items-center justify-center text-center py-8 w-full"
                    >
                      <div class="w-16 h-16 bg-[#10b981] rounded-full flex items-center justify-center mb-6 text-white shadow-lg">
                        <Check class="w-8 h-8" />
                      </div>
                      <h3 class="text-[20px] font-bold text-[#0f172a] mb-2">Request sent!</h3>
                      <p class="text-[14px] text-[#64748b] font-medium mb-8">Our manager will contact you shortly to confirm the booking.</p>
                      <button
                        type="button"
                        class="text-[14px] font-bold text-[#0f172a] hover:text-[#3b82f6] transition-colors"
                        @click="closeModal"
                      >
                        Back to list
                      </button>
                    </motion.div>

                    <motion.div
                      v-else
                      key="form"
                      :initial="{ opacity: 0, x: 20 }"
                      :animate="{ opacity: 1, x: 0 }"
                      :exit="{ opacity: 0, x: 20 }"
                      class="flex flex-col w-full relative"
                    >
                      <button
                        type="button"
                        class="absolute -top-4 -left-4 w-8 h-8 flex items-center justify-center text-[#64748b] hover:text-[#0f172a] hover:bg-slate-200 rounded-full transition-all z-10"
                        @click="isBooking = false"
                      >
                        <ChevronDown class="w-5 h-5 rotate-90" />
                      </button>
                      <div class="mb-6 pt-2">
                        <div class="text-[20px] font-bold text-[#0f172a] leading-none mb-2 text-center">Checkout</div>
                        <p class="text-[13px] text-[#64748b] text-center font-medium">Leave a number, we will contact you to confirm.</p>
                      </div>

                      <div class="flex flex-col gap-5 mb-8">
                        <div>
                          <label class="text-[12px] font-bold text-[#334155] mb-2 block uppercase tracking-widest">Where to write?</label>
                          <div class="flex gap-2">
                            <button type="button" :class="['flex-1 py-3 rounded-xl flex items-center justify-center gap-2 font-bold text-[13px] transition-colors', bookingMethod === 'wa' ? 'bg-[#22c55e] text-white' : 'bg-slate-100 text-[#64748b] hover:bg-slate-200']" @click="bookingMethod = 'wa'">
                              <MessageSquare class="w-4 h-4" />WA
                            </button>
                            <button type="button" :class="['flex-1 py-3 rounded-xl flex items-center justify-center gap-2 font-bold text-[13px] transition-colors', bookingMethod === 'tg' ? 'bg-[#3b82f6] text-white' : 'bg-slate-100 text-[#64748b] hover:bg-slate-200']" @click="bookingMethod = 'tg'">
                              <Send class="w-4 h-4" />TG
                            </button>
                            <button type="button" :class="['flex-1 py-3 rounded-xl flex items-center justify-center gap-2 font-bold text-[13px] transition-colors', bookingMethod === 'viber' ? 'bg-[#8b5cf6] text-white' : 'bg-slate-100 text-[#64748b] hover:bg-slate-200']" @click="bookingMethod = 'viber'">
                              <Phone class="w-4 h-4" />Vi
                            </button>
                          </div>
                        </div>

                        <div>
                          <label class="text-[12px] font-bold text-[#334155] mb-2 block uppercase tracking-widest">Phone number</label>
                          <div class="flex gap-2 items-start">
                            <input
                              :value="phoneCountryCode"
                              type="tel"
                              inputmode="tel"
                              placeholder="+995"
                              class="w-[92px] shrink-0 bg-white border border-[#e2e8f0] px-3 py-3.5 rounded-xl text-[15px] font-bold outline-none focus:border-[#3b82f6] focus:ring-4 focus:ring-[#3b82f6]/10 transition-all placeholder:font-medium placeholder:text-slate-400"
                              @input="handlePhoneCountryCodeChange"
                            >
                            <input
                              :value="phoneNumber"
                              type="tel"
                              inputmode="tel"
                              placeholder="599 22 34 10"
                              class="flex-1 min-w-0 bg-white border border-[#e2e8f0] px-4 py-3.5 rounded-xl text-[15px] font-bold outline-none focus:border-[#3b82f6] focus:ring-4 focus:ring-[#3b82f6]/10 transition-all placeholder:font-medium placeholder:text-slate-400"
                              @input="handlePhoneChange"
                            >
                          </div>
                          <p v-if="phoneNumber && !isPhoneValid" class="mt-2 text-[11px] font-medium text-amber-600">
                            Enter a valid phone number.
                          </p>
                        </div>
                      </div>

                      <div class="mt-1">
                        <label class="text-[12px] font-bold text-[#334155] mb-2 block uppercase tracking-widest">Full name</label>
                        <div class="grid grid-cols-2 gap-2">
                          <input
                            v-model="customerFirstName"
                            type="text"
                            placeholder="John"
                            class="w-full bg-white border border-[#e2e8f0] px-4 py-3.5 rounded-xl text-[15px] font-bold outline-none focus:border-[#3b82f6] focus:ring-4 focus:ring-[#3b82f6]/10 transition-all placeholder:font-medium placeholder:text-slate-400"
                          >
                          <input
                            v-model="customerLastName"
                            type="text"
                            placeholder="Smith"
                            class="w-full bg-white border border-[#e2e8f0] px-4 py-3.5 rounded-xl text-[15px] font-bold outline-none focus:border-[#3b82f6] focus:ring-4 focus:ring-[#3b82f6]/10 transition-all placeholder:font-medium placeholder:text-slate-400"
                          >
                        </div>
                      </div>

                      <p v-if="bookingError" class="mb-4 text-[12px] font-bold text-red-500 leading-snug">{{ bookingError }}</p>

                      <button
                        type="button"
                        :disabled="!canSubmitBooking"
                        class="w-full bg-[#0f172a] text-white font-bold py-4 rounded-[20px] hover:bg-black hover:shadow-lg disabled:opacity-50 disabled:hover:scale-100 disabled:hover:bg-[#0f172a] disabled:cursor-not-allowed transition-all"
                        @click="submitBookingRequest"
                      >
                        {{ bookingSubmitting ? 'Sending...' : 'Submit request' }}
                      </button>
                    </motion.div>
                  </AnimatePresence>
                </div>
              </div>
            </div>
          </div>

          <div v-if="!isBooking && !submitSuccess" class="lg:hidden fixed bottom-6 left-4 right-4 bg-white/90 backdrop-blur-xl border border-white p-3 z-[100] shadow-[0_10px_40px_rgba(0,0,0,0.15)] rounded-2xl flex items-center justify-between pointer-events-auto transition-transform duration-300">
            <div class="flex flex-col ml-2">
              <span class="text-[10px] font-bold text-slate-500 uppercase tracking-widest leading-none mb-0.5">Total per day</span>
              <span class="text-[20px] font-black text-[#0f172a] leading-none">{{ formatMoney(displayTotal) }}</span>
            </div>
            <button type="button" class="bg-[#0f172a] text-white px-6 py-2.5 rounded-[12px] font-bold hover:bg-black transition-colors shadow-lg active:scale-95" @click="isBooking = true">
              Checkout
            </button>
          </div>
          </motion.div>
        </div>
      </motion.div>
    </AnimatePresence>
  </Teleport>
</template>
