<script setup>
import { motion } from 'motion-v'
import { CheckCircle2, ExternalLink, Quote, Star, ThumbsUp } from 'lucide-vue-next'
import { buildReviewsPageSeo, useReviewsContent } from '~/content/reviews'
import { buildPublicSeoLinks } from '~/utils/public-seo'

definePageMeta({
  siteHeaderTheme: 'dark',
  siteHeaderOverlay: true,
})

const initialVisibleCount = 6
const reviewsContent = useReviewsContent()
const reviewsPage = computed(() => reviewsContent.reviewsPage.value || {})
const reviewCards = computed(() => reviewsContent.reviewCards.value || [])
const reviewPlatformStats = computed(() => reviewsContent.reviewPlatformStats.value || [])
const reviewsEmptyState = computed(() => reviewsContent.reviewsEmptyState.value || {})
const reviewsFooterCopy = computed(() => reviewsContent.reviewsFooterCopy.value || {})
const reviewsHero = computed(() => reviewsContent.reviewsHero.value || {})
const visibleCount = ref(initialVisibleCount)
const visibleReviewCards = computed(() => reviewCards.value.slice(0, visibleCount.value))
const canLoadMore = computed(() => visibleCount.value < reviewCards.value.length)
const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const reviewsPageSeo = computed(() => buildReviewsPageSeo(reviewsPage.value, pageOrigin.value))

function loadMoreReviews() {
  visibleCount.value = Math.min(visibleCount.value + initialVisibleCount, reviewCards.value.length)
}

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

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

<template>
  <div class="min-h-screen bg-slate-50">
    <section class="pt-32 pb-20 md:pt-40 md:pb-24 bg-[#0a0a0a] rounded-b-[3rem] relative overflow-hidden">
      <div class="absolute inset-0 z-0 opacity-20">
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,#FF6321_0%,transparent_40%)]" />
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,#FF6321_0%,transparent_40%)]" />
      </div>

      <div class="max-w-6xl mx-auto px-4 sm:px-6 relative z-10 text-center">
        <motion.div
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ duration: 0.8 }"
        >
          <div v-if="reviewsHero.badge" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white border border-white/20 text-xs font-bold tracking-widest uppercase mb-6">
            <Star class="w-4 h-4 text-brand-orange fill-brand-orange" />
            {{ reviewsHero.badge }}
          </div>
          <h1 class="text-white text-5xl md:text-7xl font-display font-black uppercase tracking-tight mb-6">
            {{ reviewsHero.title }}
          </h1>
          <p class="text-slate-300 text-lg md:text-xl max-w-2xl mx-auto mb-12 leading-relaxed">
            {{ reviewsHero.description }}
          </p>

          <div v-if="reviewPlatformStats.length" class="flex flex-wrap justify-center gap-6 md:gap-12">
            <div
              v-for="stat in reviewPlatformStats"
              :key="stat.label"
              class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-6 min-w-[200px]"
            >
              <div class="flex justify-center gap-1 mb-2">
                <Star v-for="index in 5" :key="index" class="w-5 h-5 text-brand-orange fill-brand-orange" />
              </div>
              <div class="text-3xl font-display font-black text-white mb-1">
                <template v-if="stat.rating">
                  {{ stat.rating }}<span class="text-lg text-slate-400 font-sans font-normal">/5</span>
                </template>
                <template v-else>
                  -
                </template>
              </div>
              <div class="text-sm font-bold text-slate-300 uppercase tracking-wider">{{ stat.label }}</div>
              <div class="text-xs text-slate-500 mt-1">{{ stat.countLabel }}</div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>

    <section class="py-24">
      <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div v-if="visibleReviewCards.length" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <motion.div
            v-for="(review, index) in visibleReviewCards"
            :key="review.id"
            :initial="{ opacity: 0, y: 20 }"
            :while-in-view="{ opacity: 1, y: 0 }"
            :viewport="{ once: true }"
            :transition="{ delay: index * 0.1, duration: 0.5 }"
            class="bg-white rounded-[2rem] p-8 shadow-sm border border-slate-100 hover:shadow-xl transition-shadow duration-300 flex flex-col h-full"
          >
            <div class="flex justify-between items-start mb-6">
              <div class="flex gap-1">
                <Star
                  v-for="starIndex in 5"
                  :key="starIndex"
                  :class="`w-5 h-5 ${starIndex <= review.rating ? 'text-brand-orange fill-brand-orange' : 'text-slate-200 fill-slate-200'}`"
                />
              </div>
              <div class="bg-slate-50 px-3 py-1 rounded-full text-xs font-bold text-slate-500 flex items-center gap-1">
                {{ review.platform }}
              </div>
            </div>

            <div class="flex-grow">
              <Quote class="w-8 h-8 text-slate-200 mb-4" />
              <p class="text-slate-700 leading-relaxed mb-6 italic">
                "{{ review.text }}"
              </p>
            </div>

            <div class="pt-6 border-t border-slate-100 mt-auto">
              <div class="flex items-center justify-between">
                <div>
                  <h4 class="font-bold text-slate-900">{{ review.name }}</h4>
                  <div class="text-sm text-slate-500">{{ review.country }} • {{ review.date }}</div>
                </div>
                <div v-if="review.verified" class="flex items-center gap-1 text-emerald-600 bg-emerald-50 px-2 py-1 rounded text-xs font-bold">
                  <CheckCircle2 class="w-3 h-3" />
                  {{ reviewsFooterCopy.verifiedLabel }}
                </div>
              </div>
            </div>
          </motion.div>
        </div>

        <div v-else class="max-w-3xl mx-auto bg-white rounded-[2rem] border border-slate-100 shadow-sm p-10 md:p-14 text-center">
          <div v-if="reviewsEmptyState.eyebrow" class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-slate-700 text-xs font-bold tracking-widest uppercase mb-6">
            <Star class="w-4 h-4 text-brand-orange fill-brand-orange" />
            {{ reviewsEmptyState.eyebrow }}
          </div>
          <h2 class="text-3xl md:text-4xl font-display font-black uppercase tracking-tight text-slate-900 mb-4">
            {{ reviewsEmptyState.title }}
          </h2>
          <p class="text-slate-600 text-lg leading-relaxed">
            {{ reviewsEmptyState.description }}
          </p>
        </div>

        <div v-if="canLoadMore" class="mt-16 text-center">
          <button type="button" class="bg-white border-2 border-slate-200 text-slate-900 px-8 py-4 rounded-full font-bold uppercase tracking-widest hover:border-brand-orange hover:text-brand-orange transition-colors duration-300 flex items-center gap-2 mx-auto" @click="loadMoreReviews">
            {{ reviewsFooterCopy.loadMoreLabel }}
            <ThumbsUp class="w-5 h-5" />
          </button>
        </div>
      </div>
    </section>

    <section class="py-24 bg-white">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 text-center">
        <h2 class="text-3xl md:text-5xl font-display font-black uppercase tracking-tight mb-6">
          {{ reviewsFooterCopy.title }}
        </h2>
        <p class="text-slate-600 text-lg mb-10">
          {{ reviewsFooterCopy.description }}
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
          <NuxtLink :to="reviewsFooterCopy.primaryUrl" class="bg-brand-orange text-white px-8 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-amber-500 transition-colors duration-300">
            {{ reviewsFooterCopy.primaryLabel }}
          </NuxtLink>
          <a :href="reviewsFooterCopy.secondaryUrl" target="_blank" rel="noreferrer" class="bg-slate-900 text-white px-8 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-slate-800 transition-colors duration-300 flex items-center justify-center gap-2">
            {{ reviewsFooterCopy.secondaryLabel }}
            <ExternalLink class="w-5 h-5" />
          </a>
        </div>
      </div>
    </section>
  </div>
</template>
