<script setup>
import { AnimatePresence, motion } from 'motion-v'
import { parsePhoneNumberFromString } from 'libphonenumber-js/max'
import {
  ArrowRight,
  Building,
  Calendar,
  Check,
  ChevronDown,
  Clock,
  DollarSign,
  MapPin,
  Plane,
  Star,
  Tag,
  User,
} from 'lucide-vue-next'
import { format } from 'date-fns'
import AppCalendar from '~/components/shared/AppCalendar.vue'
import HeroOfferPrompt from '~/components/home/hero/HeroOfferPrompt.vue'
import HeroPostSubmitView from '~/components/home/hero/HeroPostSubmitView.vue'
import HeroRequestSuccess from '~/components/home/hero/HeroRequestSuccess.vue'
import HeroTabButton from '~/components/home/hero/HeroTabButton.vue'
import HeroTimePopover from '~/components/home/hero/HeroTimePopover.vue'
import HeroVehicleClassIcon from '~/components/home/hero/HeroVehicleClassIcon.vue'
import { useHomeContent } from '~/content/home'
import { formatPublicMoney } from '~/content/utils'
import { resolvePublicApiError } from '~/content/utils'
import { applyImageSourceFallback, buildHomeImageAttrs } from '~/utils/public-image-derivatives'
import { matchHomeOfferToCarType } from '~/utils/offer-marketing'
import { buildRequestRoute, buildRentSearchRoute, buildRentTripQuery } from '~/utils/public-routes'

const config = useRuntimeConfig()

const homeContent = useHomeContent()
const homeHeroContent = computed(() => homeContent.homeHeroContent.value || {})
const homeHeroRequestForm = computed(() => homeContent.homeHeroRequestForm.value || { carTypes: [], budgetOptions: [] })
const homeHeroRequestStatus = computed(() => homeContent.homeHeroRequestStatus.value || {})
const homeHeroSearchForm = computed(() => homeContent.homeHeroSearchForm.value || {})
const homeHeroTabs = computed(() => homeContent.homeHeroTabs.value || [])
const homeOfferCards = computed(() => homeContent.homeOfferCards.value || [])
const homeFleetSection = computed(() => homeContent.homeFleetSection.value || {})
const homeFleetVehicles = computed(() => homeContent.homeFleetVehicles.value || [])

const { currency } = usePublicPreferences()
const { locale, localizedPath } = usePublicLocale()
const ui = usePublicUi()
const { hasActiveRequest, requestDetails } = useRequestOverlay()
const { locations, loadLocations } = usePublicSiteLocations()
const { baseDay, buildDate, buildDateTime } = usePublicDateDefaults()

const activeTab = ref('request')
const layoutTab = ref('request')
const leftContentTab = ref('request')
const rightContentTab = ref('request')
const isTransitioning = ref(false)
const isSubmitted = ref(false)
const isRightSubmitted = ref(false)
const isSubmitting = ref(false)
const submissionError = ref('')

const selectedCar = ref('')
const hasSelectedCarInteraction = ref(false)
const activePopover = ref(null)
const location = ref(null)
const dateRange = ref({
  from: buildDateTime(0, '12:30'),
  to: buildDateTime(3, '08:30'),
})
const phoneCountryCode = ref('+995')
const budget = ref(null)
const phoneNumber = ref('')

const searchLocation = ref(null)
const returnToSameLocation = ref(true)
const searchReturnLocation = ref(null)
const searchDateRange = ref({
  from: buildDate(3),
  to: buildDate(10),
})
const searchPickupTime = ref('12:30')
const searchReturnTime = ref('08:30')
const isDriverAge21To65 = ref(true)
const promoCode = ref('')
const isPromoApplied = ref(false)

const timers = []

function schedule(callback, delay) {
  const timer = window.setTimeout(callback, delay)
  timers.push(timer)
  return timer
}

function clearTimers() {
  timers.splice(0).forEach((timer) => window.clearTimeout(timer))
}

function syncSelectedLocation(targetRef, fallbackIndex = 0) {
  if (!locations.value.length) {
    return
  }

  const nextLocation = locations.value.find((item) => item.id === targetRef.value?.id) || locations.value[fallbackIndex] || null
  targetRef.value = nextLocation
}

function resolveDefaultSearchLocation() {
  const findByText = (predicate) => locations.value.find((item) => {
    const value = `${item?.name || ''} ${item?.city || ''} ${item?.code || ''} ${item?.rawCode || ''}`.toLowerCase()
    return predicate(value, item)
  })

  const downtownOffice = findByText((value, item) => value.includes('tbilisi') && value.includes('downtown') && value.includes('office'))
  const downtown = findByText((value, item) => value.includes('downtown') && (value.includes('tbilisi') || item?.type === 'office'))
  const office = findByText((value, item) => item?.type === 'office' && value.includes('tbilisi'))
  const tbilisi = findByText((value) => value.includes('tbilisi') || value.includes('თბილისი'))

  return downtownOffice || downtown || office || tbilisi || locations.value.find((item) => item.type === 'airport') || locations.value[0] || null
}

watch(
  locations,
  () => {
    syncSelectedLocation(location, 0)
    if (!searchLocation.value?.backendId) {
      searchLocation.value = resolveDefaultSearchLocation()
    } else {
      syncSelectedLocation(searchLocation, 0)
    }
    syncSelectedLocation(searchReturnLocation, 1)
  },
  { immediate: true },
)

const selectedCarLabel = computed(() => {
  return homeHeroRequestForm.value.carTypes.find((car) => car.id === selectedCar.value)?.label || selectedCar.value
})

const premiumHasLiveOffer = computed(() => {
  return !!matchHomeOfferToCarType(homeOfferCards.value, 'PREMIUM')
})

const heroTabLabels = computed(() => {
  return homeHeroTabs.value.reduce((accumulator, item) => {
    accumulator[item.id] = item.label
    return accumulator
  }, {})
})

const activeRequestLabel = computed(() => {
  if (requestDetails.value?.requestId) {
    return `Request #${requestDetails.value.requestId}`
  }

  return ui.value.request.trackRequest
})

const requestTrackHref = computed(() => requestDetails.value?.trackUrl || '')
const requestTrackPath = computed(() => requestDetails.value?.trackPath || '')
const heroEditorialImageAttrs = computed(() => buildHomeImageAttrs(homeHeroContent.value?.rightImage, {
  derivativeWidth: 680,
  sizes: '(min-width: 1280px) 590px, (min-width: 1024px) 48vw, 100vw',
}))

const searchDropoffLocation = computed(() => {
  return returnToSameLocation.value ? searchLocation.value : searchReturnLocation.value
})

const searchSummaryVehicleCount = computed(() => {
  return homeFleetVehicles.value.length
})

const searchSummaryStartingPrice = computed(() => {
  const prices = homeFleetVehicles.value
    .map((item) => Number(item.price))
    .filter((value) => Number.isFinite(value) && value > 0)

  if (!prices.length) {
    return null
  }

  return Math.min(...prices)
})
const searchSummaryCurrency = computed(() => homeFleetVehicles.value.find((item) => item.currency)?.currency || currency.value || 'USD')
const searchSummaryStartingPriceLabel = computed(() => {
  if (searchSummaryStartingPrice.value === null) {
    return ''
  }

  return formatPublicMoney(searchSummaryStartingPrice.value, searchSummaryCurrency.value, locale.value)
})

const requestPreviewDetails = computed(() => ({
  location: location.value?.name || homeHeroRequestStatus.value.trackPendingLabel,
  carType: selectedCarLabel.value || homeHeroRequestStatus.value.trackPendingLabel,
  dates: buildRequestDatesLabel(),
  budget: budget.value?.label || homeHeroRequestStatus.value.trackPendingLabel,
}))

const requestStatusDetails = computed(() => {
  return isSubmitting.value ? requestPreviewDetails.value : requestDetails.value
})

const requestStatusLabel = computed(() => {
  return isSubmitting.value ? (ui.value.common.sendingRequest || homeHeroRequestStatus.value.waitTitle) : activeRequestLabel.value
})

function sanitizePhoneCountryCode(value) {
  const digitsOnly = String(value || '').replace(/\D/g, '').slice(0, 4)
  return digitsOnly ? `+${digitsOnly}` : '+'
}

function sanitizePhoneNumber(value) {
  return String(value || '')
    .replace(/[^\d\s()+-]/g, '')
    .replace(/\s{2,}/g, ' ')
    .trimStart()
}

function parseRequestPhone(countryCode = phoneCountryCode.value, phone = phoneNumber.value) {
  const normalizedCountryCode = sanitizePhoneCountryCode(countryCode)
  const normalizedPhone = sanitizePhoneNumber(phone)

  if (normalizedCountryCode === '+' || !normalizedPhone) {
    return null
  }

  return parsePhoneNumberFromString(`${normalizedCountryCode} ${normalizedPhone}`)
}

const phoneDigits = computed(() => phoneNumber.value.replace(/\D/g, ''))

const phoneValidationState = computed(() => {
  if (!phoneDigits.value) {
    return { valid: false, message: '' }
  }

  const parsedPhone = parseRequestPhone()

  if (parsedPhone?.isValid()) {
    return { valid: true, message: '', number: parsedPhone.number }
  }

  return {
    valid: false,
    message: homeHeroRequestForm.value.phoneValidationMessage || ui.value.common.couldNotSubmitRequest,
  }
})

const hasPhoneError = computed(() => {
  return Boolean(phoneValidationState.value.message)
})

const isRequestValid = computed(() => {
  return phoneValidationState.value.valid && !!dateRange.value?.from && !!dateRange.value?.to && !!location.value?.backendId && !isSubmitting.value
})

const isSearchValid = computed(() => {
  return !!searchDateRange.value?.from && !!searchDateRange.value?.to && !!searchLocation.value?.backendId && !!searchDropoffLocation.value?.backendId
})

watch(
  [isRequestValid, isSearchValid, leftContentTab],
  ([requestValid, searchValid, activeTab]) => {
    if (submissionError.value !== ui.value.common.fillRequiredFields) {
      return
    }

    if ((activeTab === 'request' && requestValid) || (activeTab === 'search' && searchValid)) {
      submissionError.value = ''
    }
  },
)

function handleClickOutside(event) {
  if (!activePopover.value) {
    return
  }

  const target = event.target

  if (target instanceof Element && target.closest('[data-hero-popover-scope]')) {
    return
  }

  activePopover.value = null
}

function handlePhoneChange(event) {
  phoneNumber.value = sanitizePhoneNumber(event.target.value)
}

function handleHeroImageError(event) {
  applyImageSourceFallback(event, homeHeroContent.value?.rightImage)
}

function handlePhoneCountryCodeChange(event) {
  phoneCountryCode.value = sanitizePhoneCountryCode(event.target.value)
}

function togglePopover(popover) {
  activePopover.value = activePopover.value === popover ? null : popover
}

function buildRequestDatesLabel() {
  return `${format(dateRange.value.from, 'MMM d')} - ${format(dateRange.value.to, 'MMM d')}`
}

function combinePhone() {
  return phoneValidationState.value.number || `${sanitizePhoneCountryCode(phoneCountryCode.value)} ${sanitizePhoneNumber(phoneNumber.value)}`.trim()
}

function buildTrackLabel(payload) {
  if (payload?.request_id) {
    return `Request #${payload.request_id}`
  }

  return ui.value.request.trackRequest
}

watch(
  homeHeroRequestForm,
  (value) => {
    if (!selectedCar.value && value.carTypes?.length) {
      selectedCar.value = value.carTypes[0].id
    }

    if (!budget.value && value.budgetOptions?.length) {
      budget.value = value.budgetOptions[0]
    }
  },
  { immediate: true },
)

function buildTrackPath(payload) {
  if (!payload?.track_token) {
    return ''
  }

  return buildRequestRoute(payload.track_token, {}, {
    locale: locale.value,
  }).path
}

function mergeDateAndTime(date, time) {
  if (!date || !time) {
    return null
  }

  const nextDate = new Date(date)
  const [hours, minutes] = time.split(':').map((value) => Number(value))
  nextDate.setHours(hours || 0, minutes || 0, 0, 0)
  return nextDate.toISOString()
}

async function handleTabChange(newTab) {
  if (newTab === 'luxury') {
    await navigateTo(localizedPath('/luxury'))
    return
  }

  if (newTab === activeTab.value || isTransitioning.value) {
    return
  }

  clearTimers()

  isTransitioning.value = true
  isSubmitted.value = false
  isRightSubmitted.value = false
  submissionError.value = ''

  activeTab.value = newTab
  leftContentTab.value = ''

  schedule(() => {
    layoutTab.value = newTab

    schedule(() => {
      leftContentTab.value = newTab

      schedule(() => {
        rightContentTab.value = newTab
        isTransitioning.value = false
      }, 300)
    }, 400)
  }, 200)
}

async function submitRequest() {
  if (!isRequestValid.value) {
    submissionError.value = ui.value.common.fillRequiredFields
    return
  }

  activePopover.value = null
  isSubmitted.value = true
  isRightSubmitted.value = false
  isSubmitting.value = true
  submissionError.value = ''

  try {
    const response = await $fetch(`${config.public.apiBaseUrl}/public-requests`, {
      method: 'POST',
      body: {
        location_id: location.value.backendId,
        car_type: selectedCarLabel.value,
        pickup_at: dateRange.value.from.toISOString(),
        dropoff_at: dateRange.value.to.toISOString(),
        budget_tier: budget.value?.tier || 'budget_any',
        currency: currency.value,
        phone: combinePhone(),
      },
    })

    const payload = response?.data || {}

    hasActiveRequest.value = true
    requestDetails.value = {
      requestId: payload.request_id || null,
      requestLabel: buildTrackLabel(payload),
      trackToken: payload.track_token || '',
      trackUrl: payload.track_url || '',
      trackPath: buildTrackPath(payload),
      location: location.value.name,
      carType: selectedCarLabel.value,
      dates: buildRequestDatesLabel(),
      budget: budget.value?.label || homeHeroRequestStatus.value.trackPendingLabel,
    }

    schedule(() => {
      isRightSubmitted.value = true
    }, 1000)
  } catch (error) {
    isSubmitted.value = false
    submissionError.value = resolvePublicApiError(error, ui.value.request.couldNotSubmit, locale.value)
    console.error('Failed to submit public request', error)
  } finally {
    isSubmitting.value = false
  }
}

async function submitSearch() {
  if (!isSearchValid.value) {
    submissionError.value = ui.value.common.fillRequiredFields
    return
  }

  submissionError.value = ''

  await navigateTo(buildRentSearchRoute(buildRentTripQuery({
    pickupLocationId: searchLocation.value.backendId,
    dropoffLocationId: searchDropoffLocation.value.backendId,
    pickupAt: mergeDateAndTime(searchDateRange.value.from, searchPickupTime.value),
    dropoffAt: mergeDateAndTime(searchDateRange.value.to, searchReturnTime.value),
    returnToSameLocation: returnToSameLocation.value ? '1' : '0',
    driverAge: isDriverAge21To65.value ? '21-65' : 'other',
    promoCode: promoCode.value || undefined,
  }), {
    locale: locale.value,
  }))
}

async function handleSubmit() {
  if (leftContentTab.value === 'request') {
    await submitRequest()
    return
  }

  if (leftContentTab.value === 'search') {
    await submitSearch()
  }
}

onMounted(async () => {
  document.addEventListener('pointerdown', handleClickOutside)
  await loadLocations()
})

onBeforeUnmount(() => {
  document.removeEventListener('pointerdown', handleClickOutside)
  clearTimers()
})
</script>

<template>
  <div class="w-full flex flex-col lg:flex-row gap-6 lg:gap-8 items-stretch min-h-[600px]">
    <motion.div
      :class="[
        'w-full shrink-0 bg-white/70 backdrop-blur-2xl rounded-[2rem] p-6 lg:p-8 shadow-[0_8px_40px_rgb(0,0,0,0.04)] border border-white/40 flex flex-col relative z-20 transition-[width] duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]',
        layoutTab === 'search' ? 'lg:flex-1' : 'lg:w-[420px] xl:w-[480px]',
      ]"
    >
      <div class="mb-6">
        <h2 class="text-2xl font-display font-bold text-slate-900 mb-1">{{ homeHeroContent.formTitle }}</h2>
      </div>

      <div class="flex bg-white/40 backdrop-blur-md p-1 rounded-xl mb-6 relative border border-white/50 shadow-sm">
        <HeroTabButton :active="activeTab === 'request'" :label="heroTabLabels.request || ui.common.request" @click="handleTabChange('request')" />
        <HeroTabButton :active="activeTab === 'search'" :label="heroTabLabels.search || ui.common.search" @click="handleTabChange('search')" />
        <HeroTabButton :active="activeTab === 'luxury'" :label="heroTabLabels.luxury || ui.common.luxury" @click="handleTabChange('luxury')" />
      </div>

      <div class="flex-1">
        <AnimatePresence mode="wait">
          <motion.div
            v-if="leftContentTab"
            :key="leftContentTab"
            :initial="{ opacity: 0, y: 10, filter: 'blur(4px)' }"
            :animate="{ opacity: 1, y: 0, filter: 'blur(0px)', transition: { duration: 0.4, ease: 'easeOut' } }"
            :exit="{ opacity: 0, y: -10, filter: 'blur(4px)', transition: { duration: 0.2, ease: 'easeIn' } }"
            class="space-y-4"
          >
            <template v-if="leftContentTab === 'request'">
              <AnimatePresence mode="wait">
                <motion.div
                  v-if="!isSubmitted"
                  key="request-form"
                  :initial="{ opacity: 0, y: 10 }"
                  :animate="{ opacity: 1, y: 0 }"
                  :exit="{ opacity: 0, y: -10 }"
                  :transition="{ duration: 0.3 }"
                  class="space-y-5 lg:space-y-6"
                >
                  <div data-hero-popover-scope class="relative">
                    <div
                      :class="[
                        'group relative bg-white/40 backdrop-blur-md hover:bg-white/60 border rounded-2xl p-3.5 transition-all duration-300 cursor-pointer shadow-sm',
                        activePopover === 'location' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'border-white/50',
                      ]"
                      @click="togglePopover('location')"
                    >
                      <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">{{ homeHeroRequestForm.pickupLabel }}</div>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                          <div class="w-6 h-6 rounded-full bg-brand-orange/10 flex items-center justify-center shrink-0">
                            <MapPin class="text-brand-orange w-3 h-3" :stroke-width="2.5" />
                          </div>
                          <span class="text-slate-800 font-medium text-sm">{{ location?.name }}</span>
                        </div>
                        <span class="text-[9px] font-bold text-brand-orange bg-brand-orange/10 rounded px-1.5 py-0.5">{{ location?.code }}</span>
                      </div>
                    </div>

                    <AnimatePresence>
                      <motion.div
                        v-if="activePopover === 'location'"
                        :initial="{ opacity: 0, y: 10, scale: 0.98 }"
                        :animate="{ opacity: 1, y: 0, scale: 1 }"
                        :exit="{ opacity: 0, y: 10, scale: 0.98 }"
                        :transition="{ duration: 0.2 }"
                        class="absolute top-full left-0 w-full mt-2 bg-white rounded-2xl shadow-[0_20px_40px_rgb(0,0,0,0.08)] border border-slate-100 p-2 z-50"
                      >
                        <button
                          v-for="loc in locations"
                          :key="loc.id"
                          type="button"
                          class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-white/60 transition-colors text-left group/item"
                          @click="location = loc; activePopover = null"
                        >
                          <div class="flex items-center gap-3">
                            <div class="text-slate-400 group-hover/item:text-brand-orange transition-colors">
                              <Plane v-if="loc.type === 'airport'" class="w-4 h-4" />
                              <Building v-else class="w-4 h-4" />
                            </div>
                            <span class="text-sm font-medium text-slate-700 group-hover/item:text-slate-900">{{ loc.name }}</span>
                          </div>
                          <Check v-if="location?.id === loc.id" class="w-4 h-4 text-brand-orange" />
                        </button>
                      </motion.div>
                    </AnimatePresence>
                  </div>

                  <div data-hero-popover-scope class="relative">
                    <div class="flex bg-white/40 backdrop-blur-md border border-white/50 shadow-sm rounded-2xl p-1.5 transition-all duration-300 hover:bg-white/60">
                      <div
                        :class="[
                          'flex-1 p-2.5 px-3 rounded-xl transition-all cursor-pointer group/date',
                          activePopover === 'pickupDate' ? 'bg-white/80 shadow-sm ring-2 ring-brand-orange/20' : 'hover:bg-white/60 hover:shadow-sm',
                        ]"
                        @click="togglePopover('pickupDate')"
                      >
                        <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroRequestForm.pickupDateLabel }}</div>
                        <div class="flex items-center gap-2 text-slate-800 font-medium text-sm group-hover/date:text-brand-orange transition-colors">
                          <Calendar class="w-4 h-4 text-slate-400 group-hover/date:text-brand-orange transition-colors" />
                          {{ dateRange?.from ? format(dateRange.from, 'MMM d, HH:mm') : homeHeroSearchForm.selectDateLabel }}
                        </div>
                      </div>

                      <div class="w-[1px] bg-white/50 my-3" />

                      <div
                        :class="[
                          'flex-1 p-2.5 px-3 rounded-xl transition-all cursor-pointer group/date',
                          activePopover === 'returnDate' ? 'bg-white/80 shadow-sm ring-2 ring-brand-orange/20' : 'hover:bg-white/60 hover:shadow-sm',
                        ]"
                        @click="togglePopover('returnDate')"
                      >
                        <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroRequestForm.returnDateLabel }}</div>
                        <div class="flex items-center gap-2 text-slate-800 font-medium text-sm group-hover/date:text-brand-orange transition-colors">
                          <Calendar class="w-4 h-4 text-slate-400 group-hover/date:text-brand-orange transition-colors" />
                          {{ dateRange?.to ? format(dateRange.to, 'MMM d, HH:mm') : homeHeroSearchForm.selectDateLabel }}
                        </div>
                      </div>
                    </div>

                    <AnimatePresence>
                      <motion.div
                        v-if="activePopover === 'pickupDate' || activePopover === 'returnDate'"
                        :initial="{ opacity: 0, y: 10, scale: 0.98 }"
                        :animate="{ opacity: 1, y: 0, scale: 1 }"
                        :exit="{ opacity: 0, y: 10, scale: 0.98 }"
                        :transition="{ duration: 0.2 }"
                        class="absolute top-full left-1/2 -translate-x-1/2 mt-2 bg-white rounded-2xl shadow-[0_20px_40px_rgb(0,0,0,0.08)] border border-slate-100 p-4 z-50 flex flex-col items-center w-max"
                      >
                        <AppCalendar
                          mode="range"
                          :selected="dateRange"
                          :number-of-months="1"
                          :disabled="{ before: baseDay }"
                          class="font-sans"
                          @select="(range) => { dateRange = range; if (range?.from && range?.to) { activePopover = null } else if (range?.from && activePopover === 'pickupDate') { activePopover = 'returnDate' } }"
                        />
                        <div class="w-full flex justify-end mt-2">
                          <button
                            type="button"
                            class="px-4 py-2 bg-slate-900 text-white rounded-xl text-sm font-bold hover:bg-brand-orange transition-colors shadow-lg shadow-slate-900/20"
                            @click="activePopover = null"
                          >
                            {{ homeHeroRequestForm.calendarDoneLabel }}
                          </button>
                        </div>
                      </motion.div>
                    </AnimatePresence>
                  </div>

                  <div class="pt-2">
                    <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-2.5">{{ homeHeroRequestForm.vehicleClassLabel }}</div>
                    <div class="grid grid-cols-4 gap-2.5">
                      <button
                        v-for="car in homeHeroRequestForm.carTypes"
                        :key="car.id"
                        type="button"
                        :class="[
                          'relative flex flex-col items-center justify-center py-3 px-1 rounded-xl border transition-all duration-300 backdrop-blur-md',
                          selectedCar === car.id
                            ? 'border-brand-orange bg-brand-orange/10 text-brand-orange shadow-sm'
                            : 'border-white/50 bg-white/40 text-slate-500 hover:border-brand-orange/30 hover:text-brand-orange hover:bg-white/60 hover:shadow-sm',
                        ]"
                        @click="selectedCar = car.id; hasSelectedCarInteraction = true"
                      >
                        <div
                          v-if="car.id === 'PREMIUM' && premiumHasLiveOffer"
                          class="absolute -right-2 -top-2 z-10 rounded-full bg-gradient-to-r from-red-500 to-orange-500 px-1.5 py-0.5 text-[9px] font-black text-white shadow-lg animate-bounce"
                        >
                          HOT
                        </div>
                        <HeroVehicleClassIcon :type="car.icon" class="w-8 h-5 mb-1.5" />
                        <span class="text-[8px] font-display font-bold tracking-wider uppercase">{{ car.label }}</span>
                      </button>
                    </div>
                  </div>

                  <HeroOfferPrompt
                    :offers="homeOfferCards"
                    :is-active="hasSelectedCarInteraction"
                    :selected-car="selectedCar"
                    :selected-car-label="selectedCarLabel"
                  />

                  <div class="grid grid-cols-1 sm:grid-cols-[minmax(0,1.95fr)_150px] lg:grid-cols-[minmax(0,2.3fr)_140px] gap-4 items-start mt-1">
                    <div class="relative">
                      <div
                        :class="[
                          'group relative bg-white/40 backdrop-blur-md hover:bg-white/60 border shadow-sm rounded-2xl p-3.5 transition-all duration-300 focus-within:bg-white/80 cursor-text',
                          hasPhoneError
                            ? 'border-red-500 focus-within:border-red-500 focus-within:ring-4 focus-within:ring-red-500/10'
                            : 'border-white/50 focus-within:border-brand-orange/30 focus-within:ring-4 focus-within:ring-brand-orange/5',
                        ]"
                      >
                        <div :class="['text-[10px] font-semibold uppercase tracking-wider mb-1.5', hasPhoneError ? 'text-red-500' : 'text-slate-400']">{{ homeHeroRequestForm.phoneLabel }}</div>
                        <div class="grid grid-cols-[72px_minmax(0,1fr)] lg:grid-cols-[64px_minmax(0,1fr)] items-center gap-2">
                          <input
                            type="text"
                            inputmode="tel"
                            :value="phoneCountryCode"
                            class="w-full min-w-0 rounded-xl border border-white/60 bg-white/70 px-2 text-center text-sm font-semibold text-slate-800 outline-none transition-colors placeholder:text-slate-300 focus:border-brand-orange/40"
                            placeholder="+995"
                            :aria-label="homeHeroRequestForm.phoneLabel"
                            @input="handlePhoneCountryCodeChange"
                          >
                          <div class="flex items-center rounded-xl border border-white/60 bg-white/70 px-3">
                            <input
                              type="tel"
                              inputmode="tel"
                              :value="phoneNumber"
                              class="w-full min-w-0 bg-transparent outline-none text-slate-800 font-medium placeholder:text-slate-300 text-sm"
                              :placeholder="homeHeroRequestForm.phonePlaceholder"
                              @input="handlePhoneChange"
                            >
                          </div>
                        </div>
                      </div>

                      <p v-if="hasPhoneError" class="absolute left-1 top-full mt-1 text-[10px] text-red-500">{{ phoneValidationState.message }}</p>
                    </div>

                    <div data-hero-popover-scope class="relative">
                      <div
                        :class="[
                          'group relative bg-white/40 backdrop-blur-md hover:bg-white/60 border rounded-2xl p-3.5 transition-all duration-300 cursor-pointer shadow-sm',
                          activePopover === 'budget' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'border-white/50 hover:border-brand-orange/30 hover:bg-white/60 hover:shadow-sm',
                        ]"
                        @click="togglePopover('budget')"
                      >
                        <div class="text-[10px] font-semibold text-slate-400 uppercase tracking-wider mb-1.5">{{ homeHeroRequestForm.budgetLabel }}</div>
                        <div class="flex items-center justify-between">
                          <div class="flex items-center gap-2 text-slate-800 font-medium text-sm">
                            <DollarSign class="w-4 h-4 text-slate-400 group-hover:text-brand-orange transition-colors" />
                            {{ budget?.label }}
                          </div>
                          <ChevronDown class="w-4 h-4 text-slate-400" />
                        </div>
                      </div>

                      <AnimatePresence>
                        <motion.div
                          v-if="activePopover === 'budget'"
                          :initial="{ opacity: 0, y: 10, scale: 0.98 }"
                          :animate="{ opacity: 1, y: 0, scale: 1 }"
                          :exit="{ opacity: 0, y: 10, scale: 0.98 }"
                          :transition="{ duration: 0.2 }"
                          class="absolute top-full right-0 w-[200px] mt-2 bg-white rounded-2xl shadow-[0_20px_40px_rgb(0,0,0,0.08)] border border-slate-100 p-2 z-50"
                        >
                          <button
                            v-for="item in homeHeroRequestForm.budgetOptions"
                            :key="item.id"
                            type="button"
                            class="w-full flex items-center justify-between p-3 rounded-xl hover:bg-white/60 transition-colors text-left"
                            @click="budget = item; activePopover = null"
                          >
                            <span class="text-sm font-medium text-slate-700">{{ item.label }}</span>
                            <Check v-if="budget?.id === item.id" class="w-4 h-4 text-brand-orange" />
                          </button>
                        </motion.div>
                      </AnimatePresence>
                    </div>
                  </div>
                </motion.div>

                <motion.div
                  v-else
                  key="request-success"
                  :initial="{ opacity: 0, y: 10 }"
                  :animate="{ opacity: 1, y: 0 }"
                  :exit="{ opacity: 0, y: -10 }"
                  :transition="{ duration: 0.3 }"
                >
                  <HeroRequestSuccess
                    :request-label="requestStatusLabel"
                    :track-href="isSubmitting ? '' : requestTrackHref"
                    :track-path="isSubmitting ? '' : requestTrackPath"
                    :request-details="requestStatusDetails"
                    :is-pending="isSubmitting"
                  />
                </motion.div>
              </AnimatePresence>
            </template>

            <template v-else-if="leftContentTab === 'search'">
              <div class="flex justify-between items-center mb-3">
                <div class="text-sm font-display font-semibold text-slate-800">{{ homeHeroSearchForm.tripDetailsLabel }}</div>
                <label class="flex items-center gap-2 cursor-pointer group">
                  <span class="text-[10px] font-bold uppercase tracking-wider text-slate-400 group-hover:text-slate-700 transition-colors">{{ homeHeroSearchForm.returnToSamePlaceLabel }}</span>
                  <div :class="['relative w-10 h-6 rounded-full transition-colors duration-300', returnToSameLocation ? 'bg-brand-orange' : 'bg-slate-200']">
                    <motion.div
                      class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow-sm"
                      :animate="{ x: returnToSameLocation ? 16 : 0 }"
                      :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
                    />
                  </div>
                  <input v-model="returnToSameLocation" type="checkbox" class="sr-only">
                </label>
              </div>

              <div class="flex flex-col gap-3 relative z-20">
                <div data-hero-popover-scope class="flex flex-col md:flex-row gap-3 relative">
                  <div
                    :class="[
                      'flex-1 p-4 transition-all duration-300 cursor-pointer rounded-2xl border shadow-sm',
                      activePopover === 'searchLocation' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'bg-white/40 backdrop-blur-md border-white/50 hover:bg-white/60 hover:shadow-md',
                    ]"
                    @click="togglePopover('searchLocation')"
                  >
                    <div class="flex items-center gap-4 whitespace-nowrap">
                      <div class="w-10 h-10 rounded-full bg-white/80 shadow-sm border border-white/50 flex items-center justify-center shrink-0">
                        <Plane v-if="searchLocation?.type === 'airport'" class="text-brand-orange w-5 h-5" />
                        <Building v-else class="text-brand-orange w-5 h-5" />
                      </div>
                      <div class="overflow-hidden">
                        <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.pickupLabel }}</div>
                        <div class="text-base font-bold text-slate-900 truncate">{{ searchLocation?.name }}</div>
                      </div>
                    </div>
                  </div>

                  <AnimatePresence>
                    <motion.div
                      v-if="!returnToSameLocation"
                      :initial="{ width: 0, opacity: 0, scale: 0.95 }"
                      :animate="{ width: 'auto', opacity: 1, scale: 1 }"
                      :exit="{ width: 0, opacity: 0, scale: 0.95 }"
                      class="flex-1 flex overflow-hidden"
                    >
                      <div
                        :class="[
                          'flex-1 p-4 transition-all duration-300 cursor-pointer min-w-[200px] rounded-2xl border shadow-sm',
                          activePopover === 'searchReturnLoc' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'bg-white/40 backdrop-blur-md border-white/50 hover:bg-white/60 hover:shadow-md',
                        ]"
                        @click="togglePopover('searchReturnLoc')"
                      >
                        <div class="flex items-center gap-4 whitespace-nowrap">
                          <div class="w-10 h-10 rounded-full bg-white/80 shadow-sm border border-white/50 flex items-center justify-center shrink-0">
                            <Plane v-if="searchReturnLocation?.type === 'airport'" class="text-brand-orange w-5 h-5" />
                            <Building v-else class="text-brand-orange w-5 h-5" />
                          </div>
                          <div class="overflow-hidden">
                            <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.returnLabel }}</div>
                            <div class="text-base font-bold text-slate-900 truncate">{{ searchReturnLocation?.name }}</div>
                          </div>
                        </div>
                      </div>
                    </motion.div>
                  </AnimatePresence>
                </div>

                <div data-hero-popover-scope class="grid grid-cols-2 md:grid-cols-4 gap-3">
                  <div
                    :class="[
                      'p-4 transition-all duration-300 cursor-pointer rounded-2xl border whitespace-nowrap shadow-sm',
                      activePopover === 'searchPickupDate' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'bg-white/40 backdrop-blur-md border-white/50 hover:bg-white/60 hover:shadow-md',
                    ]"
                    @click="togglePopover('searchPickupDate')"
                  >
                    <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.pickupDateLabel }}</div>
                    <div class="text-sm font-bold text-slate-900">{{ searchDateRange?.from ? format(searchDateRange.from, 'MMM d, yyyy') : homeHeroSearchForm.selectDateLabel }}</div>
                  </div>

                  <div
                    :class="[
                      'p-4 transition-all duration-300 cursor-pointer rounded-2xl border whitespace-nowrap shadow-sm',
                      activePopover === 'searchPickupTime' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'bg-white/40 backdrop-blur-md border-white/50 hover:bg-white/60 hover:shadow-md',
                    ]"
                    @click="togglePopover('searchPickupTime')"
                  >
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.timeLabel }}</div>
                        <div class="text-sm font-bold text-slate-900">{{ searchPickupTime }}</div>
                      </div>
                      <Clock class="w-4 h-4 text-slate-300" />
                    </div>
                  </div>

                  <div
                    :class="[
                      'p-4 transition-all duration-300 cursor-pointer rounded-2xl border whitespace-nowrap shadow-sm',
                      activePopover === 'searchReturnDate' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'bg-white/40 backdrop-blur-md border-white/50 hover:bg-white/60 hover:shadow-md',
                    ]"
                    @click="togglePopover('searchReturnDate')"
                  >
                    <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.returnDateLabel }}</div>
                    <div class="text-sm font-bold text-slate-900">{{ searchDateRange?.to ? format(searchDateRange.to, 'MMM d, yyyy') : homeHeroSearchForm.selectDateLabel }}</div>
                  </div>

                  <div
                    :class="[
                      'p-4 transition-all duration-300 cursor-pointer rounded-2xl border whitespace-nowrap shadow-sm',
                      activePopover === 'searchReturnTime' ? 'bg-white/80 border-brand-orange/30 ring-4 ring-brand-orange/5' : 'bg-white/40 backdrop-blur-md border-white/50 hover:bg-white/60 hover:shadow-md',
                    ]"
                    @click="togglePopover('searchReturnTime')"
                  >
                    <div class="flex items-center justify-between">
                      <div>
                        <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.timeLabel }}</div>
                        <div class="text-sm font-bold text-slate-900">{{ searchReturnTime }}</div>
                      </div>
                      <Clock class="w-4 h-4 text-slate-300" />
                    </div>
                  </div>
                </div>

                <AnimatePresence>
                  <motion.div
                    v-if="activePopover === 'searchLocation' || activePopover === 'searchReturnLoc'"
                    :initial="{ opacity: 0, y: 10, scale: 0.98 }"
                    :animate="{ opacity: 1, y: 0, scale: 1 }"
                    :exit="{ opacity: 0, y: 10, scale: 0.98 }"
                    :transition="{ duration: 0.2 }"
                    data-hero-popover-scope
                    class="absolute top-full left-0 w-full mt-4 bg-white rounded-[2rem] shadow-[0_20px_60px_rgb(0,0,0,0.08)] border border-slate-100 p-6 z-50"
                  >
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                      <div>
                        <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                          <Plane class="w-3.5 h-3.5" /> {{ homeHeroSearchForm.airportGroupLabel }}
                        </div>
                        <div class="space-y-2">
                          <button
                            v-for="loc in locations.filter((item) => item.type === 'airport')"
                            :key="loc.id"
                            type="button"
                            :class="[
                              'w-full flex items-center justify-between p-4 rounded-2xl transition-all text-left border',
                              (activePopover === 'searchLocation' ? searchLocation?.id === loc.id : searchReturnLocation?.id === loc.id)
                                ? 'bg-brand-orange/5 border-brand-orange/30 text-brand-orange'
                                : 'border-white/40 bg-white/40 text-slate-600 hover:bg-white/60 hover:border-white/60 hover:text-slate-900 shadow-sm',
                            ]"
                            @click="activePopover === 'searchLocation' ? searchLocation = loc : searchReturnLocation = loc; activePopover = null"
                          >
                            <div>
                              <div class="font-semibold text-sm">{{ loc.name }}</div>
                              <div class="text-xs opacity-70 mt-0.5">{{ loc.city }}</div>
                            </div>
                            <div :class="['text-xs font-bold px-2 py-1 rounded-lg', (activePopover === 'searchLocation' ? searchLocation?.id === loc.id : searchReturnLocation?.id === loc.id) ? 'bg-brand-orange/10' : 'bg-slate-100']">{{ loc.code }}</div>
                          </button>
                        </div>
                      </div>

                      <div>
                        <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-4 flex items-center gap-2">
                          <Building class="w-3.5 h-3.5" /> {{ homeHeroSearchForm.cityGroupLabel }}
                        </div>
                        <div class="space-y-2">
                          <button
                            v-for="loc in locations.filter((item) => item.type === 'city')"
                            :key="loc.id"
                            type="button"
                            :class="[
                              'w-full flex items-center justify-between p-4 rounded-2xl transition-all text-left border',
                              (activePopover === 'searchLocation' ? searchLocation?.id === loc.id : searchReturnLocation?.id === loc.id)
                                ? 'bg-brand-orange/5 border-brand-orange/30 text-brand-orange'
                                : 'border-white/40 bg-white/40 text-slate-600 hover:bg-white/60 hover:border-white/60 hover:text-slate-900 shadow-sm',
                            ]"
                            @click="activePopover === 'searchLocation' ? searchLocation = loc : searchReturnLocation = loc; activePopover = null"
                          >
                            <div>
                              <div class="font-semibold text-sm">{{ loc.name }}</div>
                              <div class="text-xs opacity-70 mt-0.5">{{ loc.city }}</div>
                            </div>
                            <div :class="['text-xs font-bold px-2 py-1 rounded-lg', (activePopover === 'searchLocation' ? searchLocation?.id === loc.id : searchReturnLocation?.id === loc.id) ? 'bg-brand-orange/10' : 'bg-slate-100']">{{ loc.code }}</div>
                          </button>
                        </div>
                      </div>
                    </div>
                  </motion.div>
                </AnimatePresence>

                <AnimatePresence>
                  <motion.div
                    v-if="activePopover === 'searchPickupDate' || activePopover === 'searchReturnDate'"
                    :initial="{ opacity: 0, y: 10, scale: 0.98 }"
                    :animate="{ opacity: 1, y: 0, scale: 1 }"
                    :exit="{ opacity: 0, y: 10, scale: 0.98 }"
                    :transition="{ duration: 0.2 }"
                    data-hero-popover-scope
                    :class="[
                      'absolute top-full mt-4 bg-white rounded-[2rem] shadow-[0_20px_60px_rgb(0,0,0,0.08)] border border-slate-100 p-6 z-50 flex flex-col items-center w-max',
                      activePopover === 'searchPickupDate' ? 'left-0' : 'right-0',
                    ]"
                  >
                    <AppCalendar
                      mode="range"
                      :selected="searchDateRange"
                      :number-of-months="2"
                      :disabled="{ before: baseDay }"
                      class="font-sans"
                      @select="(range) => { searchDateRange = range; if (range?.from && range?.to) { activePopover = null } else if (range?.from && activePopover === 'searchPickupDate') { activePopover = 'searchReturnDate' } }"
                    />
                    <div class="w-full flex justify-end mt-4">
                      <button
                        type="button"
                        class="px-6 py-2 bg-slate-900 text-white rounded-xl text-sm font-bold hover:bg-brand-orange transition-colors shadow-lg shadow-slate-900/20"
                        @click="activePopover = null"
                      >
                        {{ homeHeroSearchForm.calendarDoneLabel }}
                      </button>
                    </div>
                  </motion.div>
                </AnimatePresence>

                <AnimatePresence>
                  <HeroTimePopover
                    v-if="activePopover === 'searchPickupTime'"
                    :selected-time="searchPickupTime"
                    align="left"
                    @select="(time) => { searchPickupTime = time; activePopover = null }"
                  />
                </AnimatePresence>

                <AnimatePresence>
                  <HeroTimePopover
                    v-if="activePopover === 'searchReturnTime'"
                    :selected-time="searchReturnTime"
                    align="right"
                    @select="(time) => { searchReturnTime = time; activePopover = null }"
                  />
                </AnimatePresence>
              </div>

              <div class="flex flex-col sm:flex-row gap-3 mt-3">
                <div
                  class="flex-shrink-0 bg-white/40 backdrop-blur-md border border-white/50 hover:bg-white/60 hover:shadow-md rounded-2xl px-4 py-3 transition-all duration-300 flex items-center justify-between gap-6 cursor-pointer whitespace-nowrap"
                  @click="isDriverAge21To65 = !isDriverAge21To65"
                >
                  <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-white/80 shadow-sm border border-white/50 flex items-center justify-center shrink-0">
                      <User class="w-4 h-4 text-blue-500" />
                    </div>
                    <div>
                      <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-0.5">{{ homeHeroSearchForm.driverAgeLabel }}</div>
                      <div class="text-xs font-bold text-slate-900">{{ homeHeroSearchForm.driverAgeValue }}</div>
                    </div>
                  </div>
                  <div :class="['relative w-10 h-6 rounded-full transition-colors duration-300', isDriverAge21To65 ? 'bg-brand-orange' : 'bg-slate-200']">
                    <motion.div
                      class="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow-sm"
                      :animate="{ x: isDriverAge21To65 ? 16 : 0 }"
                      :transition="{ type: 'spring', stiffness: 500, damping: 30 }"
                    />
                  </div>
                </div>

                <div class="min-w-0 flex-1 grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 bg-white/40 backdrop-blur-md border border-white/50 hover:bg-white/60 hover:shadow-md rounded-2xl p-1.5 transition-all duration-300 focus-within:bg-white/80 focus-within:border-brand-orange/30 focus-within:shadow-md focus-within:ring-4 focus-within:ring-brand-orange/5">
                  <div class="min-w-0 flex items-center">
                    <div class="w-8 h-8 rounded-full bg-white/80 shadow-sm border border-white/50 flex items-center justify-center shrink-0 ml-2">
                      <Tag class="w-4 h-4 text-emerald-500" />
                    </div>
                    <input
                      v-model="promoCode"
                      type="text"
                      :placeholder="homeHeroSearchForm.promoCodePlaceholder"
                      class="min-w-0 w-full bg-transparent outline-none px-3 text-sm font-bold text-slate-900 placeholder:text-slate-500 placeholder:font-medium uppercase"
                      @input="isPromoApplied = false"
                    >
                  </div>
                  <button
                    type="button"
                    :class="[
                      'shrink-0 px-2.5 sm:px-4 py-2 rounded-xl text-[10px] sm:text-[11px] font-bold tracking-wider uppercase transition-all',
                      isPromoApplied ? 'bg-emerald-500 text-white shadow-md shadow-emerald-500/20' : 'bg-white/60 border border-white/50 text-slate-700 hover:bg-white/80 hover:text-slate-900 shadow-sm',
                    ]"
                    @click.stop="promoCode && (isPromoApplied = true)"
                  >
                    {{ isPromoApplied ? homeHeroSearchForm.promoAppliedLabel : homeHeroSearchForm.promoApplyLabel }}
                  </button>
                </div>
              </div>
            </template>
          </motion.div>
        </AnimatePresence>
      </div>

      <AnimatePresence>
        <motion.div
          v-if="!isSubmitted || leftContentTab !== 'request'"
          :initial="{ opacity: 0, height: 0 }"
          :animate="{ opacity: 1, height: 'auto' }"
          :exit="{ opacity: 0, height: 0 }"
          class="pt-6 mt-4 overflow-hidden"
        >
          <p v-if="submissionError" class="text-[11px] text-red-500 mb-3">
            {{ submissionError }}
          </p>

          <motion.button
            type="button"
            :disabled="isSubmitting"
            :while-hover="isSubmitting ? {} : { scale: 1.02 }"
            :while-tap="isSubmitting ? {} : { scale: 0.98 }"
            class="w-full h-14 rounded-2xl font-display font-semibold text-xs tracking-wider uppercase flex items-center justify-center transition-colors shadow-lg bg-brand-orange text-white hover:bg-[#E66000] shadow-brand-orange/25 disabled:pointer-events-none"
            @click="handleSubmit"
          >
            <AnimatePresence mode="wait">
              <motion.div
                v-if="leftContentTab"
                :key="leftContentTab"
                :initial="{ opacity: 0, y: 5 }"
                :animate="{ opacity: 1, y: 0, transition: { duration: 0.3 } }"
                :exit="{ opacity: 0, y: -5, transition: { duration: 0.2 } }"
                class="flex items-center gap-2"
              >
                <div v-if="isSubmitting" class="w-4.5 h-4.5 border-2 border-white/40 border-t-white rounded-full animate-spin" />
                <span>{{ leftContentTab === 'search' ? homeHeroSearchForm.searchSubmitLabel : (isSubmitting ? homeHeroRequestForm.submittingLabel : homeHeroRequestForm.submitLabel) }}</span>
                <ArrowRight class="w-4 h-4" :stroke-width="2.5" />
              </motion.div>
            </AnimatePresence>
          </motion.button>
        </motion.div>
      </AnimatePresence>
    </motion.div>

    <motion.div
      :class="[
        'flex relative overflow-hidden shadow-2xl group z-10 bg-slate-900/80 backdrop-blur-3xl border border-white/10 min-h-[400px] lg:min-h-0 transition-[width] duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]',
        layoutTab === 'search' ? 'w-full lg:w-[360px] xl:w-[420px] rounded-[2rem]' : 'w-full lg:flex-1 rounded-[2rem]',
      ]"
    >
      <AnimatePresence mode="wait">
        <motion.div
          v-if="rightContentTab === 'search'"
          key="search-summary"
          :initial="{ opacity: 0, scale: 0.96, filter: 'blur(8px)' }"
          :animate="{ opacity: 1, scale: 1, filter: 'blur(0px)', transition: { duration: 0.4, ease: 'easeOut' } }"
          :exit="{ opacity: 0, scale: 0.96, filter: 'blur(8px)', transition: { duration: 0.2, ease: 'easeIn' } }"
          class="flex flex-col h-full w-full p-8 text-white relative z-20"
        >
          <div class="absolute top-0 right-0 w-64 h-64 bg-brand-orange/10 rounded-full blur-3xl -mr-20 -mt-20 pointer-events-none" />
          <div class="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl -ml-20 -mb-20 pointer-events-none" />

          <div class="flex items-center justify-between mb-10 relative z-10">
            <div class="text-xs font-bold tracking-widest uppercase text-slate-400">{{ homeHeroSearchForm.liveSummaryLabel }}</div>
            <div class="flex items-center gap-2 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20">
              <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
              <span class="text-[9px] font-bold text-emerald-400 uppercase tracking-wider">{{ homeHeroSearchForm.liveSummaryUpdatingLabel }}</span>
            </div>
          </div>

          <div class="relative flex-1 z-10">
            <div class="absolute left-[11px] top-8 bottom-12 w-[2px] bg-gradient-to-b from-brand-orange/50 to-slate-700/50 rounded-full" />

            <div class="flex gap-6 mb-12 relative">
              <div class="w-6 h-6 rounded-full bg-brand-orange flex items-center justify-center shrink-0 shadow-[0_0_15px_rgba(255,102,0,0.4)] z-10">
                <div class="w-2 h-2 bg-white rounded-full" />
              </div>
              <div>
                <div class="text-[10px] font-bold text-brand-orange uppercase tracking-wider mb-1.5">{{ homeHeroSearchForm.pickupSummaryLabel }}</div>
                <div class="font-semibold text-lg mb-1">{{ searchLocation?.name }}</div>
                <div class="text-sm text-slate-400">{{ searchDateRange?.from ? format(searchDateRange.from, 'MMM d, yyyy') : homeHeroSearchForm.selectDateLabel }} • {{ searchPickupTime }}</div>
              </div>
            </div>

            <div class="flex gap-6 relative">
              <div class="w-6 h-6 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center shrink-0 z-10 shadow-sm">
                <div class="w-2 h-2 bg-slate-300 rounded-full" />
              </div>
              <div>
                <div class="text-[10px] font-bold text-slate-500 uppercase tracking-wider mb-1.5">{{ homeHeroSearchForm.dropoffSummaryLabel }}</div>
                <div class="font-semibold text-lg mb-1">{{ searchDropoffLocation?.name }}</div>
                <div class="text-sm text-slate-400">{{ searchDateRange?.to ? format(searchDateRange.to, 'MMM d, yyyy') : homeHeroSearchForm.selectDateLabel }} • {{ searchReturnTime }}</div>
              </div>
            </div>
          </div>

          <div class="mt-auto pt-8 border-t border-white/10 relative z-10">
            <div class="flex items-center justify-between mb-4">
              <div class="text-sm text-slate-400">{{ homeHeroSearchForm.driverAgeLabel }}</div>
              <div class="text-sm font-semibold">{{ isDriverAge21To65 ? homeHeroSearchForm.driverAgeValue : homeHeroSearchForm.driverAgeFallbackLabel }}</div>
            </div>
            <div class="flex items-center justify-between mb-6">
              <div class="text-sm text-slate-400">{{ homeHeroSearchForm.promoCodeLabel }}</div>
              <div :class="['text-sm font-semibold', isPromoApplied ? 'text-emerald-400' : 'text-slate-500']">
                {{ isPromoApplied ? promoCode.toUpperCase() : homeHeroSearchForm.promoApplyLabel }}
              </div>
            </div>

            <div class="bg-white/5 backdrop-blur-xl rounded-2xl p-5 border border-white/10 flex items-center justify-between shadow-lg">
              <div>
                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.fleetVehiclesLabel }}</div>
                <div class="flex items-end gap-2">
                  <div class="text-3xl font-display font-bold text-white">
                    {{ searchSummaryVehicleCount }}
                  </div>
                  <div class="text-sm text-slate-400 mb-1">{{ homeHeroSearchForm.fleetVehiclesUnitLabel }}</div>
                </div>
              </div>
              <div class="text-right">
                <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">{{ homeHeroSearchForm.startingFromLabel }}</div>
                <div class="text-xl font-display font-bold text-brand-orange">
                  <template v-if="searchSummaryStartingPrice !== null">
                    {{ searchSummaryStartingPriceLabel }} <span class="text-xs text-slate-400 font-sans font-normal">{{ homeHeroSearchForm.perDayLabel }}</span>
                  </template>
                  <template v-else>
                    {{ homeHeroSearchForm.onRequestLabel }}
                  </template>
                </div>
              </div>
            </div>
          </div>
        </motion.div>

        <motion.div
          v-else-if="rightContentTab === 'request' && !isRightSubmitted"
          key="editorial-image"
          :initial="{ opacity: 0, scale: 1.04, filter: 'blur(8px)' }"
          :animate="{ opacity: 1, scale: 1, filter: 'blur(0px)', transition: { duration: 0.4, ease: 'easeOut' } }"
          :exit="{ opacity: 0, scale: 1.04, filter: 'blur(8px)', transition: { duration: 0.5, ease: 'easeIn' } }"
          class="absolute inset-0 w-full h-full z-10"
        >
          <img
            v-bind="heroEditorialImageAttrs"
            :alt="homeHeroContent.rightTitle"
            class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
            referrerpolicy="no-referrer"
            loading="eager"
            fetchpriority="high"
            decoding="async"
            @error="handleHeroImageError"
          >

          <div class="absolute inset-0 bg-gradient-to-r from-black/60 via-black/20 to-transparent" />
          <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />

          <div class="absolute bottom-12 left-12 right-12 items-start text-left flex flex-col">
            <motion.div
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0, transition: { duration: 0.6, delay: 0.2 } }"
              :exit="{ opacity: 0, y: 10, transition: { duration: 0.2 } }"
              class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-white text-[10px] font-bold tracking-widest uppercase mb-6"
            >
              <Star class="w-3 h-3 text-brand-orange" fill="currentColor" />
              <span>{{ homeFleetSection.eyebrow }}</span>
            </motion.div>

            <motion.h1
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0, transition: { duration: 0.6, delay: 0.3 } }"
              :exit="{ opacity: 0, y: 10, transition: { duration: 0.2 } }"
              class="font-display font-semibold text-white leading-[1.05] tracking-tight mb-6 transition-all duration-700 text-5xl xl:text-7xl"
            >
              {{ homeHeroContent.rightTitle }}
            </motion.h1>

            <motion.p
              :initial="{ opacity: 0, y: 20 }"
              :animate="{ opacity: 1, y: 0, transition: { duration: 0.6, delay: 0.4 } }"
              :exit="{ opacity: 0, y: 10, transition: { duration: 0.2 } }"
              class="text-white/80 leading-relaxed font-light transition-all duration-700 text-sm xl:text-base max-w-md"
            >
              {{ homeHeroContent.rightDescription }}
            </motion.p>
          </div>
        </motion.div>

        <motion.div
          v-else-if="rightContentTab === 'request' && isRightSubmitted"
          key="post-submit"
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1 }"
          :exit="{ opacity: 0 }"
          :transition="{ duration: 0.5 }"
          class="absolute inset-0 w-full h-full z-10"
        >
          <HeroPostSubmitView :location-name="location?.name" :date-range="dateRange" :car-label="selectedCarLabel" />
        </motion.div>
      </AnimatePresence>
    </motion.div>
  </div>
</template>
