<script setup>
import { motion } from 'motion-v'
import { ArrowRight, Building, MapPin, Plane } from 'lucide-vue-next'
import { buildLocationsPageSeo, useLocationsContent } from '~/content/locations'
import { buildPublicSeoLinks } from '~/utils/public-seo'

const {
  locationCityCards,
  locationsBanner,
  locationsContentPage,
  locationsUi,
} = useLocationsContent()

const { locale } = usePublicLocale()
const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))

const locationsPageSeo = computed(() => buildLocationsPageSeo(
  locationsContentPage.value,
  locale.value,
  pageOrigin.value,
))

useSeoMeta({
  title: () => locationsPageSeo.value.title,
  description: () => locationsPageSeo.value.description,
  ogTitle: () => locationsPageSeo.value.ogTitle,
  ogDescription: () => locationsPageSeo.value.ogDescription,
  ogImage: () => locationsPageSeo.value.ogImage,
  robots: () => locationsPageSeo.value.robots,
})

useHead(() => ({
  link: buildPublicSeoLinks(locationsPageSeo.value),
}))
</script>

<template>
  <div class="min-h-screen font-sans text-slate-900 pb-24 relative flex flex-col">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 mt-6 w-full">
      <div class="bg-slate-900 text-white pt-24 pb-32 px-4 sm:px-6 relative overflow-hidden rounded-[2.5rem] shadow-2xl">
        <img
          :src="locationsContentPage.heroImage || locationsContentPage.featuredImage"
          :alt="locationsContentPage.heroImageAlt || locationsContentPage.cardImageAlt || locationsContentPage.title"
          class="absolute inset-0 w-full h-full object-cover opacity-20"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/80 to-transparent" />

        <div class="max-w-3xl mx-auto text-center relative z-10">
          <motion.h1
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            class="text-4xl md:text-6xl font-black uppercase tracking-tight mb-6"
          >
            {{ locationsContentPage.title }}
          </motion.h1>
          <motion.p
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.1 }"
            class="text-lg text-slate-300 leading-relaxed"
          >
            {{ locationsContentPage.excerpt }}
          </motion.p>

        </div>
      </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 -mt-16 relative z-20 w-full">
      <div class="space-y-8 mb-20">
        <motion.div
          v-if="!locationCityCards.length"
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          class="bg-white rounded-[2.5rem] border border-slate-100 p-10 text-center shadow-sm"
        >
          <h2 class="text-2xl font-black uppercase tracking-tight text-slate-900 mb-4">
            {{ locationsUi.emptyTitle }}
          </h2>
          <p class="text-slate-600 max-w-2xl mx-auto">
            {{ locationsUi.emptyDescription }}
          </p>
        </motion.div>

        <motion.div
          v-for="(location, index) in locationCityCards"
          :key="location.city"
          :initial="{ opacity: 0, y: 20 }"
          :while-in-view="{ opacity: 1, y: 0 }"
          :viewport="{ once: true }"
          :transition="{ delay: index * 0.1 }"
          class="bg-white rounded-[2.5rem] overflow-hidden shadow-sm border border-slate-100 flex flex-col md:flex-row group hover:shadow-md transition-all"
        >
          <div class="md:w-2/5 relative min-h-[300px] overflow-hidden">
            <img :src="location.image" :alt="location.city" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent md:hidden" />
            <h2 class="absolute bottom-6 left-6 text-3xl font-black text-white md:hidden tracking-tight">
              {{ location.cityLabel }}
            </h2>
          </div>

          <div class="md:w-3/5 p-8 md:p-12 flex flex-col justify-center">
            <div class="hidden md:flex items-center justify-between mb-4">
              <h2 class="text-4xl font-black uppercase tracking-tight text-slate-900">{{ location.cityLabel }}</h2>
              <span class="px-4 py-1.5 rounded-full bg-slate-100 text-slate-600 text-xs font-bold uppercase tracking-widest">
                {{ location.type }}
              </span>
            </div>

            <p class="text-slate-600 leading-relaxed mb-8 text-lg">
              {{ location.description }}
            </p>

            <div class="space-y-3">
              <NuxtLink
                v-for="point in location.points"
                :key="point.id || point.slug || point.name"
                :to="point.detailUrl"
                class="group flex items-center gap-4 rounded-2xl border border-slate-100 px-4 py-3 hover:border-brand-orange/30 hover:bg-slate-50 transition-colors"
              >
                <div class="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center shrink-0 border border-slate-100">
                  <Plane v-if="point.type === 'airport'" class="w-4 h-4 text-brand-orange" />
                  <Building v-else-if="point.type === 'office'" class="w-4 h-4 text-blue-500" />
                  <MapPin v-else class="w-4 h-4 text-emerald-500" />
                </div>
                <div class="min-w-0 flex-1">
                  <div class="font-medium text-slate-800">{{ point.label || point.name }}</div>
                </div>
                <span class="text-xs font-bold uppercase tracking-widest text-slate-400 group-hover:text-brand-orange">
                  {{ locationsUi.pointLinkLabel }}
                </span>
                <ArrowRight class="w-4 h-4 text-slate-300 group-hover:text-brand-orange transition-colors" />
              </NuxtLink>
            </div>

            <div class="mt-10 pt-8 border-t border-slate-100">
              <NuxtLink :to="location.searchCtaUrl" class="inline-flex items-center gap-2 text-brand-orange font-bold hover:text-slate-900 transition-colors">
                {{ locationsUi.searchCtaPrefix }} {{ location.cityLabel }}
                <ArrowRight class="w-4 h-4" />
              </NuxtLink>
            </div>
          </div>
        </motion.div>
      </div>

      <motion.div
        :initial="{ opacity: 0, y: 20 }"
        :while-in-view="{ opacity: 1, y: 0 }"
        :viewport="{ once: true }"
        class="bg-brand-orange rounded-[2.5rem] p-8 md:p-12 text-white flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden shadow-xl shadow-brand-orange/20"
      >
        <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl pointer-events-none" />

        <div class="relative z-10 max-w-2xl">
          <h3 class="text-3xl font-black uppercase tracking-tight mb-4">
            {{ locationsBanner.title }}
          </h3>
          <p class="text-white/90 text-lg leading-relaxed">
            {{ locationsBanner.description }}
          </p>
        </div>

        <div class="relative z-10 shrink-0">
          <NuxtLink :to="locationsBanner.ctaUrl" class="px-8 py-4 bg-white text-brand-orange rounded-2xl font-bold text-lg hover:bg-slate-900 hover:text-white transition-all shadow-lg inline-block">
            {{ locationsBanner.ctaLabel }}
          </NuxtLink>
        </div>
      </motion.div>
    </div>
  </div>
</template>
