<script setup>
import { ArrowUpRight, ChevronDown, CheckCircle2, MessageCircle, Star, ThumbsUp } from 'lucide-vue-next'
import { normalizeCityRentalHref } from '~/components/city-rental/link-utils'

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

const footer = computed(() => props.footer || {})
const reviewsUrl = computed(() => normalizeCityRentalHref(props.footer?.reviewsUrl))
const trustWallUrl = computed(() => normalizeCityRentalHref(props.footer?.trustWall?.ctaUrl))
const finalPrimaryUrl = computed(() => normalizeCityRentalHref(props.footer?.finalCta?.primaryUrl))
const finalSecondaryUrl = computed(() => normalizeCityRentalHref(props.footer?.finalCta?.secondaryUrl))
const labels = computed(() => ({
  reviewsHeading: props.footer?.reviewsHeading || 'Real Reviews for Real Trips',
  ratingLabel: props.footer?.ratingLabel || '4.9/5',
  ratingSuffix: props.footer?.ratingSuffix || 'on Google Reviews',
  scenarioLabel: props.footer?.scenarioLabel || 'Scenario:',
  faqHeading: props.footer?.faqHeading || 'FAQ About Car Rental in Tbilisi',
  faqDescription: props.footer?.faqDescription || 'Everything you need to know before you rent.',
  resourcesHeading: props.footer?.resourcesHeading || 'Helpful resources & locations',
}))
const openFaq = ref(0)
</script>

<template>
  <div class="space-y-24 mb-24">
    <section>
      <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between mb-10">
        <div>
          <h2 class="text-3xl md:text-4xl font-display font-bold text-slate-900">
            {{ labels.reviewsHeading }}
          </h2>
          <a
            v-if="reviewsUrl"
            :href="reviewsUrl"
            target="_blank"
            rel="noreferrer"
            class="inline-flex items-center gap-1 mt-3 text-sm font-bold text-brand-orange hover:text-brand-orange/80 transition-colors"
          >
            View all reviews on Google Maps
            <ArrowUpRight class="w-4 h-4" />
          </a>
        </div>
        <a
          v-if="reviewsUrl"
          :href="reviewsUrl"
          target="_blank"
          rel="noreferrer"
          class="hidden md:flex items-center gap-2 bg-slate-50 px-4 py-2 rounded-full border border-slate-100 hover:border-slate-200 transition-colors"
        >
          <Star class="w-4 h-4 text-brand-orange fill-brand-orange" />
          <span class="font-bold text-slate-900">{{ labels.ratingLabel }}</span>
          <span class="text-slate-500 text-sm">{{ labels.ratingSuffix }}</span>
        </a>
        <div
          v-else
          class="hidden md:flex items-center gap-2 bg-slate-50 px-4 py-2 rounded-full border border-slate-100"
        >
          <Star class="w-4 h-4 text-brand-orange fill-brand-orange" />
          <span class="font-bold text-slate-900">{{ labels.ratingLabel }}</span>
          <span class="text-slate-500 text-sm">{{ labels.ratingSuffix }}</span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div
          v-for="review in footer.reviews"
          :key="review.author + review.scenario"
          class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-[0_4px_20px_rgb(0,0,0,0.02)]"
        >
          <div class="flex items-center gap-1 mb-4">
            <Star
              v-for="i in 5"
              :key="i"
              class="w-4 h-4 text-brand-orange fill-brand-orange"
            />
          </div>
          <div class="text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">
            {{ labels.scenarioLabel }} <span class="text-slate-800">{{ review.scenario }}</span>
          </div>
          <p class="text-slate-700 leading-relaxed mb-6">"{{ review.text }}"</p>
          <div class="text-sm font-bold text-slate-900">— {{ review.author }}</div>
        </div>
      </div>
    </section>

    <section class="bg-slate-900 rounded-[2.5rem] p-8 md:p-12 text-white overflow-hidden relative">
      <div class="absolute top-0 right-0 w-64 h-64 bg-brand-orange/10 rounded-full blur-[80px]" />

      <div class="relative z-10 flex flex-col lg:flex-row gap-12 items-center mb-12">
        <div class="flex-1">
          <h2 class="text-3xl md:text-4xl font-display font-bold mb-6">{{ footer.trustWall.title }}</h2>
          <p class="text-slate-400 text-lg mb-8">{{ footer.trustWall.description }}</p>

          <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4">
            <div
              v-for="item in footer.trustWall.features"
              :key="item"
              class="flex items-center gap-3"
            >
              <div class="w-6 h-6 rounded-full bg-brand-orange/20 flex items-center justify-center shrink-0">
                <CheckCircle2 class="w-4 h-4 text-brand-orange" />
              </div>
              <span class="font-medium text-slate-200">{{ item }}</span>
            </div>
          </div>
        </div>

        <div class="w-full lg:w-[400px] shrink-0 bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/10">
          <div class="text-center">
            <ThumbsUp class="w-10 h-10 text-brand-orange mx-auto mb-4" />
            <div class="text-xl font-bold text-white mb-2">{{ footer.trustWall.ctaTitle }}</div>
            <p class="text-slate-400 text-sm mb-6">{{ footer.trustWall.ctaText }}</p>
            <a
              v-if="trustWallUrl"
              :href="trustWallUrl"
              target="_blank"
              rel="noreferrer"
              class="w-full bg-[#25D366] text-white py-3.5 rounded-xl font-bold flex justify-center items-center gap-2 hover:bg-[#20bd5a] transition-colors"
            >
              <MessageCircle class="w-5 h-5" />
              {{ footer.trustWall.ctaButton }}
            </a>
          </div>
        </div>
      </div>

      <div class="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-4">
        <div
          v-for="image in footer.trustWall.trustImages"
          :key="image.caption"
          class="group relative rounded-2xl overflow-hidden aspect-square"
        >
          <img
            :src="image.image"
            :alt="image.caption"
            class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
            loading="lazy"
          >
          <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-transparent flex items-end p-4">
            <span class="text-white text-sm font-bold">{{ image.caption }}</span>
          </div>
        </div>
      </div>
    </section>

    <section id="faq">
      <div class="max-w-3xl mx-auto">
        <div class="text-center mb-10">
          <h2 class="text-3xl md:text-4xl font-display font-bold text-slate-900 mb-4">
            {{ labels.faqHeading }}
          </h2>
          <p class="text-slate-600">{{ labels.faqDescription }}</p>
        </div>

        <div class="space-y-3">
          <details
            v-for="(faq, index) in footer.faq"
            :key="faq.q"
            class="group bg-white border border-slate-200 rounded-2xl overflow-hidden [&_summary::-webkit-details-marker]:hidden"
            :open="openFaq === index"
            @click.prevent="openFaq = openFaq === index ? null : index"
          >
            <summary class="w-full flex items-center justify-between p-5 text-left bg-transparent cursor-pointer select-none">
              <span class="font-bold text-slate-900 pr-8">{{ faq.q }}</span>
              <ChevronDown class="w-5 h-5 text-slate-400 transition-transform duration-300 group-open:-rotate-180" />
            </summary>
            <div class="px-5 pb-5 text-slate-600 leading-relaxed">
              {{ faq.a }}
            </div>
          </details>
        </div>
      </div>
    </section>

    <section class="mb-10">
      <div class="bg-slate-50 border border-slate-100 rounded-[2.5rem] p-8 md:p-12">
        <h2 class="text-xl md:text-2xl font-display font-bold text-slate-900 mb-6">
          {{ labels.resourcesHeading }}
        </h2>
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-y-4 gap-x-6 text-sm">
          <NuxtLink
            v-for="link in footer.links"
            :key="link.label"
            :to="link.to"
            class="text-slate-600 hover:text-brand-orange font-medium"
          >
            {{ link.label }}
          </NuxtLink>
        </div>
      </div>
    </section>

    <section class="bg-brand-orange rounded-[2.5rem] p-8 md:p-16 text-center text-white relative overflow-hidden">
      <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10 mix-blend-overlay" />
      <div class="relative z-10 max-w-2xl mx-auto">
        <h2 class="text-3xl md:text-5xl font-display font-bold mb-6">{{ footer.finalCta.title }}</h2>
        <p class="text-lg text-orange-100 mb-10">
          {{ footer.finalCta.description }}
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
          <a
            v-if="finalPrimaryUrl"
            :href="finalPrimaryUrl"
            target="_blank"
            rel="noreferrer"
            class="bg-[#25D366] text-white px-8 py-4 rounded-xl font-bold flex justify-center items-center gap-2 hover:bg-[#20bd5a] transition-transform hover:scale-105 active:scale-95 shadow-xl shadow-[#25D366]/20"
          >
            <MessageCircle class="w-5 h-5" />
            {{ footer.finalCta.primary }}
          </a>
          <NuxtLink
            v-if="finalSecondaryUrl"
            :to="finalSecondaryUrl"
            class="bg-white text-brand-orange px-8 py-4 rounded-xl font-bold hover:bg-slate-50 transition-colors"
          >
            {{ footer.finalCta.secondary }}
          </NuxtLink>
        </div>
      </div>
    </section>
  </div>
</template>
