<script setup>
import { motion } from 'motion-v'
import { ArrowRight, Clock, Compass } from 'lucide-vue-next'
import PublicArticleImage from '~/components/shared/PublicArticleImage.vue'
import { buildGuidesPageSeo, useGuidesContent } from '~/content/guides'
import { buildPublicSeoLinks } from '~/utils/public-seo'

const {
  guidesPage,
  guidesUi,
  scenicRoutes,
} = await useGuidesContent()

const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const guidesPageSeo = computed(() => buildGuidesPageSeo(guidesPage.value, pageOrigin.value))

useSeoMeta({
  title: () => guidesPageSeo.value?.title || '',
  description: () => guidesPageSeo.value?.description || '',
  ogTitle: () => guidesPageSeo.value?.ogTitle || '',
  ogDescription: () => guidesPageSeo.value?.ogDescription || '',
  ogImage: () => guidesPageSeo.value?.ogImage || '',
  robots: () => guidesPageSeo.value?.robots || 'index,follow',
})

useHead(() => ({
  link: buildPublicSeoLinks(guidesPageSeo.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
          v-if="guidesPage?.heroImage || guidesPage?.featuredImage"
          :src="guidesPage?.heroImage || guidesPage?.featuredImage"
          :alt="guidesPage?.title"
          class="absolute inset-0 w-full h-full object-cover opacity-30"
          referrerpolicy="no-referrer"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/60 to-transparent" />

        <div class="max-w-3xl mx-auto text-center relative z-10">
          <motion.div
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-sm font-bold uppercase tracking-widest mb-6"
          >
            <Compass class="w-4 h-4 text-brand-orange" />
            {{ guidesPage?.subtitle }}
          </motion.div>

          <motion.h1
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.1 }"
            class="text-4xl md:text-6xl font-black uppercase tracking-tight mb-6"
          >
            {{ guidesPage?.title }}
          </motion.h1>

          <motion.p
            :initial="{ opacity: 0, y: 20 }"
            :animate="{ opacity: 1, y: 0 }"
            :transition="{ delay: 0.2 }"
            class="text-lg text-slate-300 leading-relaxed"
          >
            {{ guidesPage?.excerpt }}
          </motion.p>

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

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-16 relative z-20 w-full">
      <div v-if="scenicRoutes.length" class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <motion.div
          v-for="(route, index) in scenicRoutes"
          :key="route.id"
          :initial="{ opacity: 0, y: 20 }"
          :while-in-view="{ opacity: 1, y: 0 }"
          :viewport="{ once: true }"
          :transition="{ delay: index * 0.1 }"
          class="flex"
        >
          <NuxtLink
            :to="route.resolvedPath"
            class="bg-white rounded-[2rem] overflow-hidden shadow-sm border border-slate-100 group hover:shadow-xl hover:shadow-slate-200/50 transition-all flex flex-col w-full"
          >
            <div class="relative h-72 overflow-hidden">
              <PublicArticleImage
                :src="route.image"
                :alt="route.title"
                img-class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                fallback-class="absolute inset-0 w-full h-full"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />

              <div class="absolute top-6 left-6 flex flex-wrap items-center gap-2">
                <div class="px-4 py-1.5 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-xs font-bold uppercase tracking-widest">
                  {{ route.badge || route.category }}
                </div>
                <div
                  v-if="route.isFallback"
                  class="px-3 py-1.5 rounded-full bg-white/20 backdrop-blur-md border border-white/30 text-white text-[10px] font-bold uppercase tracking-widest"
                >
                  {{ route.sourceLocaleCode }}
                </div>
              </div>
            </div>

            <div class="p-8 flex-1 flex flex-col">
              <div class="flex items-center gap-4 text-sm font-bold text-slate-400 uppercase tracking-widest mb-4">
                <span class="flex items-center gap-1.5">
                  <Clock class="w-4 h-4" />
                  {{ route.date || route.duration }}
                </span>
                <span v-if="route.readTime" class="text-slate-300">•</span>
                <span v-if="route.readTime">{{ route.readTime }}</span>
              </div>

              <h2 class="text-2xl font-black tracking-tight text-slate-900 mb-4">
                {{ route.title }}
              </h2>

              <p class="text-slate-600 leading-relaxed mb-8 flex-1">
                {{ route.excerpt }}
              </p>

              <div class="pt-6 border-t border-slate-100 flex items-center justify-between">
                <div class="text-sm">
                  <span class="text-slate-400 block mb-1">{{ guidesUi.recommendedVehicleLabel }}</span>
                  <span class="font-bold text-slate-900">{{ route.recommendedCar }}</span>
                </div>
                <div aria-hidden="true" class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-brand-orange group-hover:text-white transition-colors">
                  <ArrowRight class="w-5 h-5" />
                </div>
              </div>
            </div>
          </NuxtLink>
        </motion.div>
      </div>
      <div
        v-else
        class="rounded-[2.5rem] border border-slate-200 bg-white px-8 py-16 text-center shadow-sm"
      >
        <h2 class="text-3xl font-display font-bold text-slate-900 mb-3">{{ guidesUi.emptyTitle }}</h2>
        <p class="text-slate-500 max-w-2xl mx-auto">{{ guidesUi.emptyDescription }}</p>
      </div>
    </div>
  </div>
</template>
