<script setup>
import { motion } from 'motion-v'
import { AlertCircle, Car, CheckCircle, CreditCard, MapPin, Shield, User } from 'lucide-vue-next'
import { buildRentalInfoPageSeo, useRentalInfoContent } from '~/content/rentalInfo'
import { splitHeadline } from '~/content/utils'
import { buildPublicSeoLinks } from '~/utils/public-seo'

definePageMeta({
  siteHeaderTheme: 'light',
})

const {
  rentalInfoPage,
  rentalInfoHero,
  rentalInfoNotice,
  rentalInfoSections,
} = useRentalInfoContent()

const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const rentalInfoPageSeo = computed(() => buildRentalInfoPageSeo(rentalInfoPage.value, pageOrigin.value))
const heroHeadline = computed(() => splitHeadline(rentalInfoHero.value.title))

const sectionIcons = {
  user: User,
  shield: Shield,
  'credit-card': CreditCard,
  car: Car,
  'map-pin': MapPin,
}

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

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

<template>
  <div class="min-h-screen font-sans text-slate-900 pb-24 relative flex flex-col">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 mt-16 w-full">
      <div class="text-center mb-16">
        <motion.h1
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          class="text-4xl md:text-5xl font-black uppercase tracking-tight text-slate-900 mb-6"
        >
          {{ heroHeadline.leading }} <span class="text-brand-orange">{{ heroHeadline.accent }}</span>
        </motion.h1>
        <motion.p
          :initial="{ opacity: 0, y: 20 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ delay: 0.1 }"
          class="text-lg text-slate-600 max-w-2xl mx-auto"
        >
          {{ rentalInfoHero.description || rentalInfoHero.subtitle }}
        </motion.p>

      </div>

      <div class="space-y-12">
        <motion.div
          v-for="(section, index) in rentalInfoSections"
          :key="section.id"
          :initial="{ opacity: 0, y: 20 }"
          :while-in-view="{ opacity: 1, y: 0 }"
          :viewport="{ once: true }"
          :transition="{ delay: index * 0.1 }"
          class="bg-white rounded-2xl p-8 shadow-sm"
        >
          <div class="flex items-center gap-4 mb-6">
            <div class="w-12 h-12 bg-slate-50 rounded-xl flex items-center justify-center shrink-0">
              <component :is="sectionIcons[section.iconKey]" class="w-6 h-6 text-brand-orange" />
            </div>
            <h2 class="text-2xl font-bold text-slate-900">{{ section.title }}</h2>
          </div>

          <ul class="space-y-4">
            <li v-for="item in section.items" :key="item" class="flex items-start gap-3 text-slate-600 leading-relaxed">
              <CheckCircle class="w-5 h-5 text-emerald-500 shrink-0 mt-0.5" />
              <span>{{ item }}</span>
            </li>
          </ul>
        </motion.div>
      </div>

      <motion.div
        :initial="{ opacity: 0, y: 20 }"
        :while-in-view="{ opacity: 1, y: 0 }"
        :viewport="{ once: true }"
        class="mt-12 bg-slate-900 rounded-2xl p-8 text-white flex flex-col sm:flex-row items-start sm:items-center gap-6"
      >
        <div class="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center shrink-0">
          <AlertCircle class="w-6 h-6 text-brand-orange" />
        </div>
        <div>
          <h3 class="text-lg font-bold mb-2">{{ rentalInfoNotice.title }}</h3>
          <p class="text-slate-300 text-sm leading-relaxed">
            {{ rentalInfoNotice.description }}
          </p>
        </div>
      </motion.div>
    </div>
  </div>
</template>
