<script setup>
import { motion } from 'motion-v'
import {
  Calendar,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Eye,
  MessageCircle,
  Star,
} from 'lucide-vue-next'
import { useHomeContent } from '~/content/home'
import { resolveOfferPricingTiers } from '~/content/offer-pricing'
import { applyImageSourceFallback, buildOfferImageAttrs } from '~/utils/public-image-derivatives'

const homeContent = useHomeContent()
const ui = usePublicUi()
const { localizedPath, locale } = usePublicLocale()
const { stableTodayKey, buildDate } = usePublicDateDefaults()

const offerCards = computed(() => homeContent.homeOfferCards.value || [])
const topOffersUi = computed(() => ui.value.home.topOffers || {})
const activeIndex = ref(0)
const selectedTierIndex = ref(1)
const isHovered = ref(false)
const pickupDateStr = ref(stableTodayKey.value)
const calendarMonth = ref(buildDate(0))
const showCalendar = ref(false)
const calendarRef = ref(null)
let rotationTimer = null

const offerThemes = [
  {
    glow: 'rgba(59, 130, 246, 0.13)',
    glowEnd: 'rgba(168, 85, 247, 0.06)',
    darkGlow: 'rgba(59, 130, 246, 0.25)',
    shadow: 'rgba(59, 130, 246, 0.25)',
  },
  {
    glow: 'rgba(251, 113, 133, 0.13)',
    glowEnd: 'rgba(249, 115, 22, 0.06)',
    darkGlow: 'rgba(239, 68, 68, 0.25)',
    shadow: 'rgba(239, 68, 68, 0.25)',
  },
  {
    glow: 'rgba(16, 185, 129, 0.13)',
    glowEnd: 'rgba(20, 184, 166, 0.06)',
    darkGlow: 'rgba(16, 185, 129, 0.25)',
    shadow: 'rgba(16, 185, 129, 0.25)',
  },
]

const activeOffer = computed(() => offerCards.value[activeIndex.value] || offerCards.value[0] || null)
const activeTheme = computed(() => offerThemes[activeIndex.value % offerThemes.length] || offerThemes[0])
const formattedDate = computed(() => formatDisplayDate(pickupDateStr.value))
const monthTitle = computed(() => new Intl.DateTimeFormat(toIntlLocale(locale.value), {
  month: 'long',
  year: 'numeric',
}).format(calendarMonth.value))
const weekdayLabels = computed(() => Array.from({ length: 7 }, (_, index) => (
  new Intl.DateTimeFormat(toIntlLocale(locale.value), { weekday: 'short' }).format(new Date(2026, 1, index + 1))
)))
const calendarDays = computed(() => {
  const year = calendarMonth.value.getFullYear()
  const month = calendarMonth.value.getMonth()
  const firstDay = new Date(year, month, 1).getDay()
  const daysInMonth = new Date(year, month + 1, 0).getDate()

  return [
    ...Array.from({ length: firstDay }, (_, index) => ({ id: `empty-${index}`, empty: true })),
    ...Array.from({ length: daysInMonth }, (_, index) => {
      const day = index + 1
      const value = toDateKey(new Date(year, month, day))

      return {
        id: value,
        day,
        value,
        selected: value === pickupDateStr.value,
      }
    }),
  ]
})
const activePricingTiers = computed(() => buildPricingTiers(activeOffer.value))

function toIntlLocale(value) {
  return {
    en: 'en-US',
    fr: 'fr-FR',
    es: 'es-ES',
    ru: 'ru-RU',
    de: 'de-DE',
    ka: 'ka-GE',
  }[String(value || 'en').toLowerCase()] || 'en-US'
}

function toDateKey(value) {
  const date = new Date(value)

  return [
    date.getFullYear(),
    String(date.getMonth() + 1).padStart(2, '0'),
    String(date.getDate()).padStart(2, '0'),
  ].join('-')
}

function formatDisplayDate(value) {
  return new Intl.DateTimeFormat(toIntlLocale(locale.value), {
    month: 'short',
    day: '2-digit',
  }).format(new Date(`${value}T12:00:00`))
}

function formatUsdAmount(value) {
  const amount = Number(value)

  if (!Number.isFinite(amount) || amount <= 0) {
    return ''
  }

  return `$${new Intl.NumberFormat(toIntlLocale(locale.value), {
    maximumFractionDigits: Number.isInteger(amount) ? 0 : 2,
  }).format(amount)}`
}

function buildPricingTiers(offer) {
  if (!offer) {
    return []
  }

  const sourceTiers = Array.isArray(offer.pricingTiers) && offer.pricingTiers.length
    ? offer.pricingTiers
    : resolveOfferPricingTiers(offer)
  const fallbackLabels = [
    topOffersUi.value.daysShortLabel,
    topOffersUi.value.daysMediumLabel,
    topOffersUi.value.daysLongLabel,
  ]

  return sourceTiers.slice(0, 3).map((tier, index) => {
    const oldPriceValue = Number(
      tier.oldPriceValue
        ?? tier.oldPrice
        ?? tier.old_price
        ?? offer.oldPriceValue
        ?? offer.oldPrice
        ?? offer.old_price
        ?? 0,
    ) || null
    const newPriceValue = Number(
      tier.newPriceValue
        ?? tier.newPrice
        ?? tier.new_price
        ?? offer.newPriceValue
        ?? offer.newPrice
        ?? offer.new_price
        ?? 0,
    ) || null
    const saveAmount = Number.isFinite(tier.saveAmount)
      ? tier.saveAmount
      : (oldPriceValue && newPriceValue ? oldPriceValue - newPriceValue : 0)

    return {
      key: tier.key || `tier-${index + 1}`,
      days: fallbackLabels[index] || tier.label || tier.key || '',
      badge: index === 1 ? topOffersUi.value.mostPopularLabel : null,
      newPrice: newPriceValue,
      oldPrice: oldPriceValue,
      saveLabel: saveAmount > 0
        ? topOffersUi.value.saveTemplate?.replace('{amount}', formatUsdAmount(saveAmount))
        : '',
      currency: tier.currency || offer.currency || 'USD',
    }
  })
}

function resolveOfferRoute(offer) {
  return offer?.ctaUrl || offer?.path || localizedPath('/offers')
}

function offerThumbImageAttrs(offer) {
  return buildOfferImageAttrs(offer?.image, {
    variant: 'thumb',
    sizes: '(min-width: 640px) 64px, 48px',
  })
}

function offerHeroImageAttrs(offer) {
  return buildOfferImageAttrs(offer?.image, {
    variant: 'hero',
    sizes: '(min-width: 1280px) 560px, (min-width: 1024px) 46vw, 100vw',
  })
}

function handleOfferImageError(event, offer) {
  applyImageSourceFallback(event, offer?.image)
}

function selectOffer(index) {
  activeIndex.value = index
  restartRotation()
}

function selectRelativeOffer(direction) {
  if (offerCards.value.length <= 1) {
    return
  }

  activeIndex.value = (activeIndex.value + direction + offerCards.value.length) % offerCards.value.length
  restartRotation()
}

function handleOfferDragEnd(_event, info) {
  const offsetX = Number(info?.offset?.x || 0)

  if (offsetX < -50) {
    selectRelativeOffer(1)
  } else if (offsetX > 50) {
    selectRelativeOffer(-1)
  }
}

function selectDate(day) {
  pickupDateStr.value = day.value
  showCalendar.value = false
}

function nextMonth() {
  calendarMonth.value = new Date(calendarMonth.value.getFullYear(), calendarMonth.value.getMonth() + 1, 1)
}

function previousMonth() {
  calendarMonth.value = new Date(calendarMonth.value.getFullYear(), calendarMonth.value.getMonth() - 1, 1)
}

function handleOutsideClick(event) {
  const calendarElement = calendarRef.value?.$el || calendarRef.value

  if (!showCalendar.value || !calendarElement || typeof calendarElement.contains !== 'function' || calendarElement.contains(event.target)) {
    return
  }

  showCalendar.value = false
}

function startRotation() {
  if (typeof window === 'undefined' || rotationTimer || isHovered.value || offerCards.value.length <= 1) {
    return
  }

  rotationTimer = window.setInterval(() => {
    activeIndex.value = (activeIndex.value + 1) % offerCards.value.length
  }, 8000)
}

function stopRotation() {
  if (typeof window === 'undefined' || !rotationTimer) {
    return
  }

  window.clearInterval(rotationTimer)
  rotationTimer = null
}

function restartRotation() {
  stopRotation()
  startRotation()
}

watch(activeIndex, () => {
  selectedTierIndex.value = Math.max(0, Math.min(1, activePricingTiers.value.length - 1))
})

watch(offerCards, (nextOffers) => {
  if (!nextOffers.length) {
    activeIndex.value = 0
    stopRotation()
    return
  }

  if (activeIndex.value >= nextOffers.length) {
    activeIndex.value = 0
  }

  restartRotation()
}, { immediate: true })

watch(isHovered, (value) => {
  if (value) {
    stopRotation()
    return
  }

  startRotation()
})

onMounted(() => {
  document.addEventListener('mousedown', handleOutsideClick)
  startRotation()
})

onBeforeUnmount(() => {
  document.removeEventListener('mousedown', handleOutsideClick)
  stopRotation()
})
</script>

<template>
  <section
    v-if="offerCards.length"
    class="relative z-20 mx-auto mb-12 mt-6 w-full max-w-7xl px-4 sm:px-6"
  >
    <div class="mb-6 grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-3">
      <button
        v-for="(offer, index) in offerCards"
        :key="offer.id"
        type="button"
        :class="[
          'relative flex items-center gap-3 rounded-2xl p-2 text-left transition-all duration-500 sm:gap-4 sm:p-3',
          index === activeIndex
            ? 'z-10 scale-100 bg-white opacity-100 shadow-[0_15px_40px_-10px_rgba(0,0,0,0.1)] ring-2 ring-brand-orange/50'
            : 'scale-[0.98] bg-white/60 opacity-60 shadow-sm backdrop-blur-sm hover:bg-white/90 hover:opacity-100 hover:shadow-md',
        ]"
        :aria-label="offer.name"
        @click="selectOffer(index)"
      >
        <div
          v-if="index === activeIndex && !isHovered"
          class="pointer-events-none absolute inset-0 z-0 overflow-hidden rounded-2xl"
        >
          <motion.div
            :key="`${offer.id}-progress`"
            class="absolute bottom-0 left-0 z-20 h-1 bg-brand-orange"
            :initial="{ width: '0%' }"
            :animate="{ width: '100%' }"
            :transition="{ duration: 8, ease: 'linear' }"
          />
        </div>

        <div class="relative z-10 h-12 w-12 shrink-0 overflow-hidden rounded-xl shadow-sm sm:h-16 sm:w-16">
          <div :class="['absolute inset-0 bg-slate-900/20 transition-opacity duration-500', index === activeIndex ? 'opacity-0' : 'opacity-100']" />
          <img
            v-if="offer.image"
            v-bind="offerThumbImageAttrs(offer)"
            :alt="offer.name"
            class="h-full w-full object-cover"
            referrerpolicy="no-referrer"
            loading="lazy"
            decoding="async"
            @error="handleOfferImageError($event, offer)"
          >
          <div v-else class="h-full w-full bg-slate-100" />
        </div>

        <div class="relative z-10 min-w-0 flex-1">
          <h4
            :class="[
              'truncate text-sm font-black transition-colors duration-300 sm:text-base',
              index === activeIndex ? 'text-brand-orange' : 'text-slate-900',
            ]"
          >
            {{ offer.name }}
          </h4>
          <p class="mt-0.5 truncate text-[10px] font-bold uppercase tracking-wider text-slate-500 sm:text-xs">
            {{ offer.subtitle || offer.socialProofLabel }}
          </p>
          <div v-if="offer.newPrice" class="mt-2 flex items-center gap-1.5 text-xs font-black text-slate-900">
            <span class="text-[10px] font-bold uppercase tracking-widest text-slate-400">{{ topOffersUi.fromLabel }}</span>
            <span class="text-emerald-600">{{ offer.newPrice }}</span>
            <span class="font-medium text-slate-400">{{ homeContent.homeOffersSection.value?.perDayLabel || topOffersUi.perDayLabel }}</span>
          </div>
        </div>

        <div v-if="index === activeIndex" class="absolute -right-2 -top-2 z-20 rounded-full bg-brand-orange p-1.5 text-white shadow-lg">
          <CheckCircle2 class="h-4 w-4" />
        </div>
      </button>
    </div>

    <div
      class="relative overflow-hidden rounded-[2rem] bg-white p-4 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.08)] sm:p-6 lg:p-8"
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
    >
      <div class="pointer-events-none absolute inset-0 overflow-hidden rounded-[2rem]">
        <motion.div
          v-if="activeOffer"
          :key="`${activeOffer.id}-top-bg`"
          class="absolute right-0 top-0 h-[800px] w-[800px] -translate-y-1/2 translate-x-1/3 rounded-full blur-3xl"
          :style="{
            background: `radial-gradient(circle, ${activeTheme.glow} 0%, ${activeTheme.glowEnd} 45%, transparent 70%)`,
          }"
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1 }"
          :transition="{ duration: 1, ease: 'easeInOut' }"
        />
      </div>

      <motion.div
        v-if="activeOffer"
        class="relative z-10 flex flex-col gap-8 lg:flex-row lg:gap-10"
        :initial="{ opacity: 0, y: 12 }"
        :animate="{ opacity: 1, y: 0 }"
        :transition="{ duration: 0.35, ease: 'easeOut' }"
      >
        <div class="flex flex-1 flex-col items-center text-center lg:items-start lg:text-left">
          <motion.div
            :key="`${activeOffer.id}-text`"
            class="w-full"
            :initial="{ opacity: 0, y: 10 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ duration: 0.2 }"
          >
            <h2 class="mb-3 font-display text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl lg:text-4xl">
              {{ activeOffer.name }}
            </h2>

            <div class="mb-6 flex flex-col items-center gap-3 sm:flex-row">
              <div
                v-if="activeOffer.rating"
                class="flex items-center gap-1.5 rounded-lg border border-slate-100 bg-white px-2.5 py-1 shadow-sm"
              >
                <Star class="h-3.5 w-3.5 fill-brand-orange text-brand-orange" />
                <span class="text-xs font-bold text-slate-900">{{ activeOffer.rating }}</span>
              </div>
              <div v-if="activeOffer.rating" class="hidden h-1 w-1 rounded-full bg-slate-300 sm:block" />
              <span class="bg-gradient-to-r from-brand-orange to-orange-400 bg-clip-text text-xs font-black uppercase tracking-[0.2em] text-transparent sm:text-sm">
                {{ activeOffer.socialProofLabel || activeOffer.subtitle || activeOffer.pricingLabel }}
              </span>
            </div>
          </motion.div>

          <motion.div
            class="group relative mb-6 h-40 w-full cursor-grab overflow-hidden rounded-[1.5rem] ring-1 ring-slate-900/5 transition-shadow duration-700 active:cursor-grabbing sm:h-52"
            :style="{ boxShadow: `0 20px 40px -15px ${activeTheme.shadow}` }"
            :initial="{ opacity: 0, y: 15 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ duration: 0.4, ease: 'easeOut', delay: 0.08 }"
            drag="x"
            :drag-constraints="{ left: 0, right: 0 }"
            :drag-elastic="0.2"
            :on-drag-end="handleOfferDragEnd"
          >
            <div class="absolute left-3 top-3 z-20 flex items-center gap-1.5 rounded-lg border border-white/50 bg-white/90 px-3 py-1.5 shadow-sm backdrop-blur-md">
              <Eye class="h-3 w-3 text-brand-orange" />
              <span class="text-[10px] font-bold text-slate-900">{{ topOffersUi.liveOffer }}</span>
            </div>
            <div class="pointer-events-none absolute inset-0 z-10 bg-gradient-to-t from-slate-900/40 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
            <motion.img
              v-if="activeOffer.image"
              :key="activeOffer.image"
              v-bind="offerHeroImageAttrs(activeOffer)"
              :alt="activeOffer.name"
              class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
              referrerpolicy="no-referrer"
              loading="eager"
              decoding="async"
              @error="handleOfferImageError($event, activeOffer)"
              :initial="{ opacity: 0, scale: 1.05 }"
              :animate="{ opacity: 1, scale: 1 }"
              :transition="{ duration: 0.4, ease: 'easeInOut' }"
            />
            <div v-else class="h-full w-full bg-slate-100" />
          </motion.div>

          <motion.p
            :key="`${activeOffer.id}-description`"
            class="max-w-xl text-xs leading-relaxed text-slate-600 sm:text-sm"
            :initial="{ opacity: 0 }"
            :animate="{ opacity: 1 }"
            :transition="{ duration: 0.2 }"
          >
            {{ activeOffer.description }}
          </motion.p>
        </div>

        <div class="relative flex flex-1 flex-col justify-center overflow-visible rounded-[1.5rem] bg-slate-900 p-5 shadow-2xl ring-1 ring-white/10 sm:p-8">
          <motion.div
            :key="`${activeOffer.id}-dark-bg`"
            class="pointer-events-none absolute right-0 top-0 h-64 w-64 translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"
            :style="{ background: activeTheme.darkGlow }"
            :initial="{ opacity: 0 }"
            :animate="{ opacity: 0.4 }"
            :transition="{ duration: 1 }"
          />

          <motion.div
            class="relative z-10 mb-5 text-center lg:text-left"
            :initial="{ opacity: 0, y: 15 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ duration: 0.4, ease: 'easeOut', delay: 0.08 }"
          >
            <h3 class="text-xl font-bold tracking-tight text-white sm:text-2xl">
              {{ topOffersUi.selectPeriodTitle }}
            </h3>
          </motion.div>

          <div class="relative z-10 flex flex-col gap-2.5">
            <motion.button
              v-for="(tier, index) in activePricingTiers"
              :key="tier.days || index"
              type="button"
              :initial="{ opacity: 0, x: 15 }"
              :animate="{ opacity: 1, x: 0 }"
              :transition="{ duration: 0.35, ease: 'easeOut', delay: 0.08 + index * 0.05 }"
              :class="[
                'relative grid w-full cursor-pointer grid-cols-[1fr_auto] items-center gap-2 rounded-xl p-2.5 text-left transition-colors duration-300 sm:flex sm:flex-row sm:items-center sm:gap-0 sm:p-4',
                selectedTierIndex === index
                  ? 'z-10 bg-white text-slate-900 shadow-xl'
                  : 'bg-slate-800/50 text-slate-300 hover:bg-slate-800',
              ]"
              @click="selectedTierIndex = index"
            >
              <div
                v-if="selectedTierIndex === index && tier.badge"
                class="absolute -top-2.5 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-full bg-brand-orange px-2 py-0.5 text-[8px] font-black uppercase tracking-widest text-white shadow-sm"
                >
                  {{ tier.badge }}
                </div>

              <div class="min-w-0 sm:hidden">
                <div :class="['text-[9px] font-bold uppercase tracking-wider', selectedTierIndex === index ? 'text-slate-500' : 'text-slate-400']">
                  {{ topOffersUi.rentalPeriodLabel }}
                </div>
                <div :class="['mt-0.5 text-xl font-display font-black leading-none', selectedTierIndex === index ? 'text-slate-900' : 'text-white']">
                  {{ tier.days }}
                </div>
              </div>

              <div class="flex flex-col items-end gap-1 sm:hidden">
                <div class="flex items-baseline gap-1">
                  <span
                    :class="['whitespace-nowrap font-display text-2xl font-black leading-none', selectedTierIndex === index ? 'text-slate-900' : 'text-white']"
                  >
                    {{ formatUsdAmount(tier.newPrice) }}
                  </span>
                  <span :class="['whitespace-nowrap text-xs font-semibold leading-none', selectedTierIndex === index ? 'text-slate-400' : 'text-slate-500']">
                    {{ homeContent.homeOffersSection.value?.perDayLabel || topOffersUi.perDayLabel }}
                  </span>
                </div>
                <div class="flex items-center gap-2">
                  <span
                    v-if="tier.oldPrice"
                    :class="[
                      'whitespace-nowrap font-display text-sm font-bold leading-none line-through decoration-2',
                      selectedTierIndex === index ? 'text-slate-400 decoration-slate-300' : 'text-slate-500 decoration-slate-600',
                    ]"
                  >
                    {{ formatUsdAmount(tier.oldPrice) }}
                  </span>
                  <span
                    v-if="tier.saveLabel"
                    :class="[
                      'whitespace-nowrap rounded-md px-1.5 py-0.5 text-[10px] font-black uppercase tracking-wider leading-none',
                      selectedTierIndex === index ? 'bg-emerald-100 text-emerald-700' : 'bg-emerald-500/10 text-emerald-400',
                    ]"
                  >
                    {{ tier.saveLabel }}
                  </span>
                </div>
              </div>

              <div class="hidden min-w-0 sm:flex sm:w-1/3 flex-col items-start">
                <span :class="['hidden mb-0.5 text-[9px] font-bold uppercase tracking-widest sm:block', selectedTierIndex === index ? 'text-slate-400' : 'text-slate-500']">
                  {{ topOffersUi.rentalPeriodLabel }}
                </span>
                <span :class="['whitespace-nowrap font-display text-[1.45rem] font-black leading-none sm:text-lg sm:font-bold sm:leading-tight', selectedTierIndex === index ? 'text-slate-900' : 'text-white']">
                  {{ tier.days }}
                </span>
              </div>

              <div class="hidden min-w-0 sm:flex sm:w-1/3 flex-col items-center">
                <span :class="['hidden mb-0.5 text-[9px] font-bold uppercase tracking-widest sm:block', selectedTierIndex === index ? 'text-brand-orange' : 'text-slate-400']">
                  {{ topOffersUi.yourRateLabel }}
                </span>
                <div class="flex items-baseline gap-1 sm:gap-1">
                  <span
                    :class="['whitespace-nowrap font-display text-[1.45rem] font-black leading-none sm:text-2xl sm:font-bold sm:leading-tight', selectedTierIndex === index ? 'text-slate-900' : 'text-white']"
                  >
                    {{ formatUsdAmount(tier.newPrice) }}
                  </span>
                  <span :class="['whitespace-nowrap text-base font-bold leading-none sm:text-[10px] sm:leading-tight', selectedTierIndex === index ? 'text-slate-400' : 'text-slate-500']">
                    {{ homeContent.homeOffersSection.value?.perDayLabel || topOffersUi.perDayLabel }}
                  </span>
                </div>
              </div>

              <div class="hidden min-w-0 sm:flex sm:w-1/3 flex-col items-end">
                <span
                  v-if="tier.oldPrice"
                  :class="[
                    'mb-0.5 whitespace-nowrap font-display text-[1.05rem] font-black leading-none line-through decoration-2 sm:text-sm sm:font-bold sm:leading-tight',
                    selectedTierIndex === index ? 'text-slate-400 decoration-slate-300' : 'text-slate-500 decoration-slate-600',
                  ]"
                >
                  {{ formatUsdAmount(tier.oldPrice) }}
                </span>
                <span
                  v-if="tier.saveLabel"
                  :class="[
                    'whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-black uppercase tracking-wider leading-none sm:px-1.5 sm:text-[9px] sm:leading-tight',
                    selectedTierIndex === index ? 'bg-emerald-100 text-emerald-700' : 'bg-emerald-500/10 text-emerald-400',
                  ]"
                >
                  {{ tier.saveLabel }}
                </span>
              </div>
            </motion.button>
          </div>

          <motion.div
            class="relative z-10 mt-6 flex items-center rounded-2xl bg-slate-800/80 p-1.5 shadow-lg backdrop-blur-md"
            :initial="{ opacity: 0, y: 15 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ duration: 0.4, ease: 'easeOut', delay: 0.2 }"
          >
            <div
              ref="calendarRef"
              class="group relative flex shrink-0 cursor-pointer items-center gap-2 rounded-xl px-3 py-2 transition-colors hover:bg-slate-700/50 sm:gap-3 sm:px-4"
              @click="showCalendar = !showCalendar"
            >
              <Calendar class="h-4 w-4 text-slate-400 transition-colors group-hover:text-white sm:h-5 sm:w-5" />
              <div class="flex flex-col justify-center">
                <span class="mb-0.5 text-[8px] font-bold uppercase tracking-widest text-slate-400 sm:text-[9px]">{{ topOffersUi.dateLabel }}</span>
                <span class="font-display text-xs font-bold leading-none text-white sm:text-sm">{{ formattedDate }}</span>
              </div>

              <motion.div
                v-if="showCalendar"
                class="absolute bottom-[calc(100%+0.5rem)] left-0 z-50 w-64 cursor-default rounded-2xl border border-slate-700 bg-slate-800 p-4 shadow-2xl"
                :initial="{ opacity: 0, y: 10, scale: 0.95 }"
                :animate="{ opacity: 1, y: 0, scale: 1 }"
                :transition="{ duration: 0.2 }"
                @click.stop
              >
                  <div class="mb-4 flex items-center justify-between text-white">
                    <button type="button" class="rounded-lg p-1 transition-colors hover:bg-slate-700" @click="previousMonth">
                      <ChevronLeft class="h-4 w-4" />
                    </button>
                    <span class="text-sm font-bold tracking-wide">{{ monthTitle }}</span>
                    <button type="button" class="rounded-lg p-1 transition-colors hover:bg-slate-700" @click="nextMonth">
                      <ChevronRight class="h-4 w-4" />
                    </button>
                  </div>

                  <div class="mb-2 grid grid-cols-7 gap-1 text-center text-[10px] font-bold uppercase tracking-wider text-slate-400">
                    <div v-for="dayName in weekdayLabels" :key="dayName">
                      {{ dayName }}
                    </div>
                  </div>

                  <div class="grid grid-cols-7 gap-1 text-center text-sm">
                    <div v-for="day in calendarDays" :key="day.id">
                      <button
                        v-if="!day.empty"
                        type="button"
                        :class="[
                          'mx-auto flex h-7 w-7 items-center justify-center rounded-full text-xs font-medium transition-colors',
                          day.selected
                            ? 'bg-brand-orange font-bold text-white shadow-md'
                            : 'text-slate-300 hover:bg-slate-700 hover:text-white',
                        ]"
                        @click="selectDate(day)"
                      >
                        {{ day.day }}
                      </button>
                    </div>
                  </div>
              </motion.div>
            </div>

            <div class="mx-1 h-8 w-px shrink-0 bg-slate-700 sm:mx-2" />

            <NuxtLink
              :to="resolveOfferRoute(activeOffer)"
              class="flex h-10 flex-1 items-center justify-center gap-2 rounded-xl bg-white text-[10px] font-black uppercase tracking-widest text-slate-900 shadow-sm transition-colors hover:bg-slate-100 sm:h-12 sm:text-xs"
            >
              <span class="hidden sm:inline">{{ topOffersUi.bookOnlineLabel }}</span>
              <span class="sm:hidden">{{ topOffersUi.bookShortLabel }}</span>
            </NuxtLink>

            <NuxtLink
              :to="localizedPath('/contact')"
              class="ml-1.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-orange text-white shadow-sm transition-colors hover:bg-orange-600 sm:ml-2 sm:h-12 sm:w-12"
              :aria-label="topOffersUi.contactLabel"
            >
              <MessageCircle class="h-4 w-4 sm:h-5 sm:w-5" />
            </NuxtLink>
          </motion.div>
        </div>
      </motion.div>
    </div>
  </section>
</template>
