<script setup>
import CityRentalAvailableCars from '~/components/city-rental/CityRentalAvailableCars.vue'
import CityRentalBeforeBook from '~/components/city-rental/CityRentalBeforeBook.vue'
import CityRentalExtraBlocks from '~/components/city-rental/CityRentalExtraBlocks.vue'
import CityRentalFooterBlocks from '~/components/city-rental/CityRentalFooterBlocks.vue'
import CityRentalHero from '~/components/city-rental/CityRentalHero.vue'
import CityRentalSeoBlocks from '~/components/city-rental/CityRentalSeoBlocks.vue'
import CityRentalStickyBar from '~/components/city-rental/CityRentalStickyBar.vue'
import CityRentalWizard from '~/components/city-rental/CityRentalWizard.vue'
import { mergeCityRentalVehicles, useCityRentalVehicles } from '~/content/city-rental-vehicles'

const props = defineProps({
  page: {
    type: Object,
    required: true,
  },
})

const page = computed(() => props.page || {})
const structuredContent = computed(() => page.value?.structuredContent || {})
const ui = computed(() => structuredContent.value?.ui || {})
const breadcrumbs = computed(() => ui.value?.breadcrumbs || {})
const hero = computed(() => structuredContent.value?.hero || {})
const { cityRentalVehicles } = useCityRentalVehicles()

function mergeCityRentalCars(baseCars = []) {
  if (!Array.isArray(baseCars) || !baseCars.length) {
    return cityRentalVehicles.value
  }

  return mergeCityRentalVehicles(baseCars, cityRentalVehicles.value)
}

const wizard = computed(() => {
  const wizardContent = structuredContent.value?.wizard || {}

  return {
    ...wizardContent,
    cars: mergeCityRentalCars(wizardContent.cars),
  }
})

const availableCars = computed(() => {
  const availableCarsContent = structuredContent.value?.availableCars || {}

  return {
    ...availableCarsContent,
    cars: mergeCityRentalCars(availableCarsContent.cars),
  }
})

const searchUrl = computed(() => hero.value?.search?.ctaUrl || '')
const whatsappUrl = computed(() => structuredContent.value?.seoBlocks?.business?.whatsappUrl || '')
</script>

<template>
  <div class="min-h-screen bg-[#fbf7f2] text-slate-900 selection:bg-brand-orange/30 relative">
    <div class="relative z-10">
      <CityRentalStickyBar :sticky-bar="structuredContent.stickyBar || {}" />
      <CityRentalHero :hero="structuredContent.hero || {}" />

      <main class="flex-1 flex flex-col relative z-10 py-12 lg:py-20 max-w-7xl mx-auto px-4 sm:px-6">
        <div class="flex gap-2 text-xs text-slate-500 mb-8 font-medium">
          <NuxtLink to="/" class="hover:text-brand-orange transition-colors">
            {{ breadcrumbs.home || 'Home' }}
          </NuxtLink>
          <span>/</span>
          <NuxtLink to="/rent" class="hover:text-brand-orange transition-colors">
            {{ breadcrumbs.section || 'Car Rental' }}
          </NuxtLink>
          <span>/</span>
          <span class="text-slate-900">{{ page.title }}</span>
        </div>

        <CityRentalAvailableCars
          :available-cars="availableCars"
          :search-url="searchUrl"
          :whatsapp-url="whatsappUrl"
        />
        <CityRentalWizard :wizard="wizard" />
        <CityRentalSeoBlocks
          :seo-blocks="structuredContent.seoBlocks || {}"
          :search-url="searchUrl"
        />
        <CityRentalExtraBlocks :extra-blocks="structuredContent.extraBlocks || {}" />
        <CityRentalBeforeBook :before-book="structuredContent.beforeBook || {}" />
        <CityRentalFooterBlocks :footer="structuredContent.footer || {}" />
      </main>
    </div>
  </div>
</template>
