<script setup>
import { motion } from 'motion-v'
import { AlertTriangle, Camera, Car, CheckCircle2, Fuel, Info, Map, ShieldCheck } from 'lucide-vue-next'
import { buildDrivingGuidePageSeo, useDrivingGuideContent } from '~/content/drivingGuide'
import { buildPublicSeoLinks } from '~/utils/public-seo'

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

const {
  drivingGuidePage,
  drivingGuideHero,
  drivingGuideMountain,
  drivingGuidePanels,
  drivingGuideQuickRules,
} = useDrivingGuideContent()

const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const drivingGuidePageSeo = computed(() => buildDrivingGuidePageSeo(drivingGuidePage.value, pageOrigin.value))

const ruleIcons = {
  camera: Camera,
  'alert-triangle': AlertTriangle,
  'shield-check': ShieldCheck,
  car: Car,
  map: Map,
  fuel: Fuel,
}

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

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

<template>
  <div class="min-h-screen font-sans text-slate-900 pb-24 relative flex flex-col">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 mt-6 w-full">
      <div class="bg-slate-900 text-white pt-24 pb-32 px-4 sm:px-6 relative overflow-hidden rounded-[2.5rem] shadow-2xl">
        <div class="absolute inset-0 opacity-40 bg-cover bg-center mix-blend-overlay" :style="{ backgroundImage: `url('${drivingGuideHero.image}')` }" />
        <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/60 to-transparent" />

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

        </div>
      </div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 -mt-16 relative z-20 w-full">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16">
        <motion.div
          v-for="(rule, index) in drivingGuideQuickRules"
          :key="rule.title"
          :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 border border-slate-100 hover:shadow-md transition-shadow"
        >
          <div class="w-12 h-12 bg-slate-50 rounded-xl flex items-center justify-center mb-6">
            <component :is="ruleIcons[rule.iconKey]" class="w-6 h-6 text-brand-orange" />
          </div>
          <h3 class="text-lg font-bold text-slate-900 mb-3">{{ rule.title }}</h3>
          <p class="text-sm text-slate-600 leading-relaxed">
            {{ rule.description }}
          </p>
        </motion.div>
      </div>

      <motion.div
        :initial="{ opacity: 0, y: 20 }"
        :while-in-view="{ opacity: 1, y: 0 }"
        :viewport="{ once: true }"
        class="bg-white rounded-[2.5rem] overflow-hidden shadow-sm border border-slate-100 mb-16 flex flex-col md:flex-row"
      >
        <div class="md:w-2/5 relative min-h-[300px]">
          <img :src="drivingGuideMountain.image" :alt="drivingGuideMountain.imageAlt" class="absolute inset-0 w-full h-full object-cover">
        </div>
        <div class="md:w-3/5 p-8 md:p-12 flex flex-col justify-center">
          <div class="inline-flex items-center gap-2 text-brand-orange font-bold text-sm uppercase tracking-widest mb-4">
            <AlertTriangle class="w-5 h-5" />
            {{ drivingGuideMountain.label }}
          </div>
          <h2 class="text-3xl font-black uppercase tracking-tight text-slate-900 mb-4">
            {{ drivingGuideMountain.heading }}
          </h2>
          <p class="text-slate-600 leading-relaxed mb-6">
            {{ drivingGuideMountain.description }}
          </p>
          <ul class="space-y-3">
            <li
              v-for="point in drivingGuideMountain.points"
              :key="point.title"
              class="flex items-start gap-3 text-sm text-slate-700 font-medium"
            >
              <CheckCircle2 class="w-5 h-5 text-emerald-500 shrink-0" />
              <span>{{ point.title }}</span>
            </li>
          </ul>
        </div>
      </motion.div>

      <motion.div
        :initial="{ opacity: 0, y: 20 }"
        :while-in-view="{ opacity: 1, y: 0 }"
        :viewport="{ once: true }"
        class="bg-slate-900 rounded-[2.5rem] p-8 md:p-12 text-white relative overflow-hidden"
      >
        <div class="absolute top-0 right-0 w-64 h-64 bg-brand-orange/20 blur-[80px] rounded-full pointer-events-none" />

        <div class="relative z-10 grid md:grid-cols-2 gap-12">
          <div>
            <h3 class="text-2xl font-bold mb-4 flex items-center gap-3">
              <Info class="w-6 h-6 text-brand-orange" />
              {{ drivingGuidePanels.roadUseTitle }}
            </h3>
            <div class="space-y-4">
              <p v-for="item in drivingGuidePanels.roadUse" :key="item.title" class="text-slate-300 leading-relaxed">
                {{ item.title }}
              </p>
            </div>
          </div>
          <div>
            <h3 class="text-2xl font-bold mb-4 flex items-center gap-3">
              <Map class="w-6 h-6 text-brand-orange" />
              {{ drivingGuidePanels.borderTitle }}
            </h3>
            <div class="space-y-4">
              <p v-for="item in drivingGuidePanels.borderRules" :key="item.title" class="text-slate-300 leading-relaxed">
                {{ item.title }}
              </p>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  </div>
</template>
