<script setup>
import { motion } from 'motion-v'
import {
  ArrowUpRight,
  Baby,
  CheckCircle2,
  ChevronLeft,
  ChevronRight,
  Map,
  Package,
  ShieldCheck,
  ShieldAlert,
  Snowflake,
  Users,
  Wifi,
} from 'lucide-vue-next'
import { useHomeContent } from '~/content/home'

const homeContent = useHomeContent()
const homeExtrasSection = computed(() => homeContent.homeExtrasSection.value || {})
const homeIncludedPerks = computed(() => homeContent.homeIncludedPerks.value || [])
const homeRentalExtras = computed(() => homeContent.homeRentalExtras.value || [])

const sliderRef = ref(null)

const extraIcons = {
  baby: Baby,
  driver: Users,
  map: Map,
  package: Package,
  shield: ShieldAlert,
  'shield-check': ShieldCheck,
  snowflake: Snowflake,
  wifi: Wifi,
}

function scroll(direction) {
  if (!sliderRef.value) {
    return
  }

  const scrollAmount = direction === 'left' ? -340 : 340
  sliderRef.value.scrollBy({ left: scrollAmount, behavior: 'smooth' })
}
</script>

<template>
  <section class="py-24 relative overflow-hidden">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="flex flex-col lg:flex-row gap-8 lg:gap-12">
        <motion.div
          :initial="{ opacity: 0, x: -20 }"
          :while-in-view="{ opacity: 1, x: 0 }"
          :viewport="{ once: true }"
          class="w-full lg:w-[40%] flex flex-col"
        >
          <div class="bg-slate-900 text-white rounded-[2.5rem] p-8 lg:p-10 shadow-2xl relative overflow-hidden h-full flex flex-col">
            <div class="absolute top-0 right-0 w-64 h-64 bg-brand-orange/20 rounded-full blur-[80px] pointer-events-none" />
            <div class="absolute bottom-0 left-0 w-64 h-64 bg-blue-500/10 rounded-full blur-[80px] pointer-events-none" />

            <div class="relative z-10 flex flex-col h-full">
              <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 border border-white/10 mb-6 w-fit backdrop-blur-md">
                <CheckCircle2 class="w-4 h-4 text-brand-orange" />
                <span class="text-[10px] font-bold uppercase tracking-widest text-white/90">{{ homeExtrasSection.includedEyebrow }}</span>
              </div>

              <h3 class="text-4xl lg:text-5xl font-black tracking-tight mb-10 leading-tight">
                {{ homeExtrasSection.includedTitle }} <br><span class="text-brand-orange">{{ homeExtrasSection.includedAccent }}</span>
              </h3>

              <div class="space-y-8 flex-1">
                <motion.div
                  v-for="(perk, index) in homeIncludedPerks"
                  :key="perk.id"
                  :initial="{ opacity: 0, y: 10 }"
                  :while-in-view="{ opacity: 1, y: 0 }"
                  :viewport="{ once: true }"
                  :transition="{ delay: index * 0.1 }"
                  class="flex gap-5 group"
                >
                  <div class="w-14 h-14 rounded-2xl bg-white/5 flex items-center justify-center shrink-0 border border-white/10 group-hover:bg-brand-orange/20 group-hover:border-brand-orange/30 transition-colors duration-300">
                    <component :is="extraIcons[perk.iconKey] || ShieldCheck" class="w-6 h-6 text-brand-orange" />
                  </div>
                  <div>
                    <h4 class="text-lg font-bold mb-1.5 text-white group-hover:text-brand-orange transition-colors duration-300">{{ perk.title }}</h4>
                    <p class="text-sm text-slate-400 leading-relaxed">{{ perk.description }}</p>
                  </div>
                </motion.div>
              </div>
            </div>
          </div>
        </motion.div>

        <motion.div
          :initial="{ opacity: 0, x: 20 }"
          :while-in-view="{ opacity: 1, x: 0 }"
          :viewport="{ once: true }"
          class="w-full lg:w-[60%] flex flex-col"
        >
          <div class="flex items-end justify-between mb-8 px-2">
            <div>
              <h3 class="text-3xl lg:text-4xl font-black text-slate-900 tracking-tight mb-3">
                {{ homeExtrasSection.extrasTitle }}
              </h3>
              <p class="text-slate-500 text-sm lg:text-base max-w-md">
                {{ homeExtrasSection.extrasDescription }}
              </p>
            </div>

            <div class="hidden md:flex gap-2 shrink-0">
              <button
                class="w-12 h-12 rounded-full bg-white/60 backdrop-blur-md border border-white/60 flex items-center justify-center text-slate-600 hover:bg-white/80 hover:text-brand-orange transition-colors shadow-sm"
                @click="scroll('left')"
              >
                <ChevronLeft class="w-5 h-5" />
              </button>
              <button
                class="w-12 h-12 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-600 hover:bg-slate-50 hover:text-brand-orange transition-colors shadow-sm"
                @click="scroll('right')"
              >
                <ChevronRight class="w-5 h-5" />
              </button>
            </div>
          </div>

          <div
            ref="sliderRef"
            class="flex overflow-x-auto snap-x snap-mandatory gap-6 pb-8 pt-2 px-2 [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] scroll-smooth"
          >
            <motion.div
              v-for="(extra, index) in homeRentalExtras"
              :key="extra.id"
              :initial="{ opacity: 0, y: 20 }"
              :while-in-view="{ opacity: 1, y: 0 }"
              :viewport="{ once: true }"
              :transition="{ delay: index * 0.1 }"
              class="snap-start shrink-0 w-[280px] md:w-[320px] bg-white/60 backdrop-blur-xl border border-white/80 rounded-[2rem] p-6 lg:p-8 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgb(0,0,0,0.08)] transition-all duration-300 flex flex-col group"
            >
              <div class="w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mb-6 group-hover:scale-110 group-hover:bg-brand-orange/10 transition-all duration-300">
                <component :is="extraIcons[extra.iconKey] || Package" class="w-8 h-8 text-slate-700 group-hover:text-brand-orange transition-colors" />
              </div>

              <h4 class="text-xl font-bold text-slate-900 mb-3">{{ extra.name }}</h4>
              <p class="text-sm text-slate-500 mb-8 flex-1 leading-relaxed">{{ extra.description }}</p>

              <div class="flex items-center justify-between pt-5 border-t border-white/40 mt-auto">
                <div class="flex items-baseline gap-1">
                  <span class="text-2xl font-black text-slate-900">{{ extra.price }}</span>
                  <span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider">/{{ extra.period }}</span>
                </div>
                <NuxtLink
                  :to="extra.actionUrl"
                  :aria-label="extra.actionLabel || extra.name"
                  class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-xs font-bold uppercase tracking-wider text-slate-700 transition-colors duration-300 shadow-sm hover:border-slate-900 hover:bg-slate-900 hover:text-white"
                >
                  <span>{{ extra.actionLabel || 'Add to quote' }}</span>
                  <ArrowUpRight class="w-4 h-4" />
                </NuxtLink>
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </div>
  </section>
</template>
