<script setup>
import { motion } from 'motion-v'
import { ArrowUpRight, Sparkles } from 'lucide-vue-next'
import OfferCard from '~/components/offers/OfferCard.vue'
import { useOffersContent } from '~/content/offers'
import { splitHeadline } from '~/content/utils'
import { buildPublicSeoLinks } from '~/utils/public-seo'

definePageMeta({
  siteHeaderTheme: 'light',
})

const LazyTopOffers = defineLazyHydrationComponent('visible', () => import('~/components/home/TopOffers.vue'))

const offersContent = useOffersContent()
const offersPage = computed(() => offersContent.offersPage.value || null)
const offerCards = computed(() => offersContent.offerCards.value)
const offersEmptyState = computed(() => offersContent.offersEmptyState.value || {})
const offersFooterCopy = computed(() => offersContent.offersFooterCopy.value || {})
const offersHero = computed(() => offersContent.offersHero.value || {})
const heroHeadline = computed(() => splitHeadline(offersHero.value.title))
const offersPageSeo = computed(() => offersPage.value?.seo || null)

useSeoMeta({
  title: () => offersPageSeo.value?.title || `${offersHero.value.title || 'Offers'} | bent.ge`,
  description: () => offersPageSeo.value?.description || offersHero.value.description || '',
  ogTitle: () => offersPageSeo.value?.ogTitle || offersPageSeo.value?.title || offersHero.value.title || '',
  ogDescription: () => offersPageSeo.value?.ogDescription || offersPageSeo.value?.description || offersHero.value.description || '',
  ogImage: () => offersPageSeo.value?.ogImage || offersPage.value?.heroImage || offersPage.value?.featuredImage || '',
  robots: () => offersPageSeo.value?.robots || 'index,follow',
})

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

<template>
  <div class="min-h-screen bg-transparent text-slate-900 selection:bg-brand-orange/20">
    <div class="mx-auto w-full max-w-7xl px-4 sm:px-6">
      <LazyTopOffers :hydrate-on-visible="{ rootMargin: '400px' }" />
    </div>

    <section class="relative pt-6 pb-8 md:pt-8 md:pb-10 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto overflow-hidden">
      <motion.div
        :initial="{ opacity: 0, y: 40 }"
        :animate="{ opacity: 1, y: 0 }"
        :transition="{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }"
        class="relative z-10"
      >
        <div class="flex items-center gap-3 mb-6">
          <span class="h-px w-12 bg-brand-orange" />
          <span class="text-brand-orange font-bold tracking-widest uppercase text-xs">{{ offersHero.badge }}</span>
        </div>
        <h1 class="max-w-4xl text-4xl md:text-6xl lg:text-7xl leading-[0.92] font-black tracking-tighter uppercase mb-4">
          {{ heroHeadline.leading }}<br><span class="text-slate-900">{{ heroHeadline.accent }}.</span>
        </h1>
        <p class="text-base md:text-lg text-slate-600 max-w-2xl font-light leading-relaxed">
          {{ offersHero.description }}
        </p>

      </motion.div>
    </section>

    <section class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto pb-12 md:pb-16 pt-2 md:pt-4">
      <div v-if="offerCards.length" class="flex flex-col gap-6 md:gap-10">
        <OfferCard
          v-for="(offer, index) in offerCards"
          :key="offer.id"
          :index="index"
          :offer="offer"
        />
      </div>
      <div
        v-else
        class="bg-white border border-slate-200 rounded-[2.5rem] p-8 md:p-10 text-center shadow-sm"
      >
        <h2 class="text-3xl md:text-4xl font-black uppercase tracking-tight mb-3 text-slate-900">{{ offersEmptyState.title }}</h2>
        <p class="text-slate-600 text-lg max-w-2xl mx-auto">{{ offersEmptyState.description }}</p>
      </div>
    </section>

    <section class="py-14 md:py-18 bg-white text-slate-900 rounded-t-[3rem] md:rounded-t-[5rem] relative overflow-hidden">
      <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <motion.div
          :initial="{ opacity: 0, scale: 0.9 }"
          :while-in-view="{ opacity: 1, scale: 1 }"
          :viewport="{ once: true }"
          :transition="{ duration: 0.8 }"
        >
          <Sparkles class="w-9 h-9 text-brand-orange mx-auto mb-5" />
          <h2 class="text-3xl md:text-5xl font-black uppercase tracking-tighter mb-5">
            {{ offersFooterCopy.title }}
          </h2>
          <p class="text-base md:text-lg text-slate-500 mb-7 max-w-2xl mx-auto">
            {{ offersFooterCopy.description }}
          </p>
          <NuxtLink
            :to="offersFooterCopy.ctaUrl"
            class="inline-flex items-center justify-center gap-2 bg-slate-900 text-white px-6 py-3 rounded-full font-bold uppercase tracking-wider hover:bg-brand-orange transition-colors duration-300"
          >
            {{ offersFooterCopy.ctaLabel }}
            <ArrowUpRight class="w-5 h-5" />
          </NuxtLink>
        </motion.div>
      </div>

      <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: radial-gradient(#000 2px, transparent 2px); background-size: 32px 32px;" />
    </section>
  </div>
</template>
