<script setup>
import { motion } from 'motion-v'
import {
  ArrowRight,
  Check,
  Info,
  MapPin,
  Plane,
  Shield,
  ShieldAlert,
  ShieldCheck,
  Star,
  UserCheck,
} from 'lucide-vue-next'
import { buildServicesPageSeo, useServicesContent } from '~/content/services'
import { buildPublicSeoLinks } from '~/utils/public-seo'

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

const {
  chauffeurContent,
  chauffeurSocialProofCard,
  insuranceContent,
  insuranceNote,
  insurancePlans,
  servicesContentPage,
  servicesHero,
  transferRoutes,
  transfersContent,
} = useServicesContent()

const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const servicesPageSeo = computed(() => buildServicesPageSeo(servicesContentPage.value, pageOrigin.value))

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

useHead(() => ({
  link: buildPublicSeoLinks(servicesPageSeo.value),
}))

const planIcons = {
  'shield-alert': ShieldAlert,
  shield: Shield,
  'shield-check': ShieldCheck,
}
</script>

<template>
  <div class="min-h-screen bg-white">
    <section class="relative pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-[#0a0a0a] rounded-b-[3rem]">
      <div class="absolute inset-0 z-0">
        <img
          v-if="servicesHero.image"
          :src="servicesHero.image"
          :alt="servicesHero.imageAlt"
          class="w-full h-full object-cover opacity-40"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a]/80 to-transparent" />
      </div>
      <div class="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
        <motion.div
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ duration: 0.8 }"
        >
          <div v-if="servicesHero.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">
            {{ servicesHero.badge }}
          </div>
          <h1 class="text-white text-5xl md:text-7xl font-display font-black uppercase tracking-tight mb-6">
            {{ servicesHero.title }}
          </h1>
          <p class="text-slate-300 text-lg md:text-xl max-w-2xl">
            {{ servicesHero.description }}
          </p>

        </motion.div>
      </div>
    </section>

    <section class="py-24 bg-white">
      <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-slate-100 text-slate-800 text-xs font-bold tracking-widest uppercase mb-6">
              <UserCheck class="w-4 h-4 text-brand-orange" />
              {{ chauffeurContent.label }}
            </div>
            <h2 class="text-4xl md:text-5xl font-display font-black text-slate-900 uppercase tracking-tight mb-6">
              {{ chauffeurContent.title }} <br><span class="text-brand-orange">{{ chauffeurContent.highlight }}</span>
            </h2>
            <p class="text-slate-600 text-lg mb-8 leading-relaxed">
              {{ chauffeurContent.description }}
            </p>
            <ul class="space-y-4 mb-10">
              <li
                v-for="item in chauffeurContent.features"
                :key="item"
                class="flex items-start gap-3"
              >
                <div class="w-6 h-6 rounded-full bg-emerald-100 flex items-center justify-center shrink-0 mt-0.5">
                  <Check class="w-3.5 h-3.5 text-emerald-600" />
                </div>
                <span class="text-slate-700 font-medium">{{ item }}</span>
              </li>
            </ul>
            <NuxtLink :to="chauffeurContent.ctaUrl" class="inline-flex items-center gap-2 bg-slate-900 text-white px-8 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-brand-orange transition-colors duration-300">
              {{ chauffeurContent.ctaLabel }}
              <ArrowRight class="w-5 h-5" />
            </NuxtLink>
          </div>
          <div class="relative">
            <div class="aspect-[4/5] rounded-[2rem] overflow-hidden">
              <img :src="chauffeurContent.image" :alt="chauffeurContent.imageAlt" class="w-full h-full object-cover">
            </div>
            <div
              v-if="chauffeurSocialProofCard.title || chauffeurSocialProofCard.subtitle || chauffeurSocialProofCard.text"
              class="absolute -bottom-8 -left-8 bg-white p-6 rounded-3xl shadow-xl border border-slate-100 max-w-xs hidden sm:block"
            >
              <div class="flex items-center gap-4 mb-3">
                <div class="w-12 h-12 rounded-full bg-brand-orange/10 flex items-center justify-center">
                  <Star class="w-6 h-6 text-brand-orange fill-brand-orange" />
                </div>
                <div>
                  <div class="font-bold text-slate-900">{{ chauffeurSocialProofCard.title }}</div>
                  <div class="text-sm text-slate-500">{{ chauffeurSocialProofCard.subtitle }}</div>
                </div>
              </div>
              <p class="text-sm text-slate-600 font-medium">{{ chauffeurSocialProofCard.text }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="py-24 bg-slate-50">
      <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-100 text-blue-800 text-xs font-bold tracking-widest uppercase mb-6">
            <Plane class="w-4 h-4" />
            {{ transfersContent.label }}
          </div>
          <h2 class="text-4xl md:text-5xl font-display font-black text-slate-900 uppercase tracking-tight mb-6">
            {{ transfersContent.title }} <span class="text-blue-600">{{ transfersContent.highlight }}</span>
          </h2>
          <p class="text-slate-600 text-lg">
            {{ transfersContent.description }}
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div
            v-for="transfer in transferRoutes"
            :key="transfer.route"
            class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between gap-6 group hover:shadow-md transition-shadow duration-300"
          >
            <div class="flex items-start gap-4 min-w-0">
              <div class="w-12 h-12 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-blue-50 transition-colors shrink-0">
                <MapPin class="w-5 h-5 text-slate-400 group-hover:text-blue-600 transition-colors" />
              </div>
              <div class="min-w-0">
                <h4 class="font-bold text-slate-900 mb-1">{{ transfer.route }}</h4>
                <p class="text-sm text-slate-500 leading-relaxed">{{ transfer.note }}</p>
              </div>
            </div>
            <div class="text-right shrink-0">
              <div class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">{{ transfersContent.modeLabel }}</div>
              <div class="text-sm font-bold text-slate-900">{{ transfer.modeValue }}</div>
            </div>
          </div>
        </div>

        <div class="mt-10 text-center">
          <NuxtLink :to="transfersContent.ctaUrl" class="inline-flex items-center gap-2 text-blue-600 font-bold hover:text-blue-700 transition-colors">
            {{ transfersContent.ctaLabel }}
            <ArrowRight class="w-4 h-4" />
          </NuxtLink>
        </div>
      </div>
    </section>

    <section class="py-24 bg-white">
      <div class="max-w-6xl mx-auto px-4 sm:px-6">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-100 text-emerald-800 text-xs font-bold tracking-widest uppercase mb-6">
            <ShieldCheck class="w-4 h-4" />
            {{ insuranceContent.label }}
          </div>
          <h2 class="text-4xl md:text-5xl font-display font-black text-slate-900 uppercase tracking-tight mb-6">
            {{ insuranceContent.title }} <span class="text-emerald-600">{{ insuranceContent.highlight }}</span>
          </h2>
          <p class="text-slate-600 text-lg">
            {{ insuranceContent.description }}
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div
            v-for="plan in insurancePlans"
            :key="plan.name"
            :class="[
              'relative bg-white rounded-[2rem] p-8 border-2 transition-all duration-300',
              plan.popular ? 'border-brand-orange shadow-xl scale-105 z-10' : 'border-slate-100 shadow-sm hover:shadow-md',
            ]"
          >
            <div
              v-if="plan.popular"
              class="absolute -top-4 left-1/2 -translate-x-1/2 bg-brand-orange text-white text-[10px] font-black uppercase tracking-widest px-4 py-1.5 rounded-full shadow-md whitespace-nowrap"
            >
              {{ insuranceContent.popularLabel }}
            </div>
            <div :class="`w-14 h-14 rounded-2xl ${plan.bgColor} flex items-center justify-center mb-6`">
              <component :is="planIcons[plan.iconKey] || ShieldAlert" :class="`w-7 h-7 ${plan.color}`" />
            </div>
            <h3 class="text-2xl font-black text-slate-900 mb-2">{{ plan.name }}</h3>
            <p class="text-sm text-slate-500 mb-6 min-h-[3rem]">{{ plan.description }}</p>
            <div class="flex items-baseline gap-1 mb-8 pb-8 border-b border-slate-100 min-h-[3.5rem]">
              <span class="text-4xl font-black text-slate-900">{{ plan.price }}</span>
              <span v-if="plan.period" class="text-slate-500 font-medium">{{ plan.period }}</span>
            </div>
            <ul class="space-y-4 mb-8">
              <li v-for="feature in plan.features" :key="feature" class="flex items-start gap-3">
                <Check :class="`w-5 h-5 shrink-0 ${plan.popular ? 'text-brand-orange' : 'text-emerald-500'}`" />
                <span class="text-slate-600 text-sm font-medium">{{ feature }}</span>
              </li>
            </ul>
            <NuxtLink
              :to="insuranceContent.ctaUrl"
              :class="[
                'block text-center w-full py-4 rounded-xl font-bold uppercase tracking-widest text-xs transition-colors',
                plan.popular ? 'bg-brand-orange text-white hover:bg-amber-500' : 'bg-slate-100 text-slate-900 hover:bg-slate-200',
              ]"
            >
              {{ insuranceContent.ctaLabel }}
            </NuxtLink>
          </div>
        </div>

        <div class="mt-12 bg-slate-50 rounded-2xl p-6 flex items-start gap-4 border border-slate-100">
          <Info class="w-6 h-6 text-slate-400 shrink-0 mt-0.5" />
          <div class="text-sm text-slate-600 leading-relaxed space-y-2">
            <p>
              <strong>{{ insuranceContent.noteTitle }}:</strong> {{ insuranceNote }}
            </p>
            <p v-if="insuranceContent.extraNote">
              {{ insuranceContent.extraNote }}
            </p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
