<script setup>
import { BadgeDollarSign, Car, Headphones, ShieldCheck } from 'lucide-vue-next'
import { useHomeContent } from '~/content/home'

const homeContent = useHomeContent()
const homeFeaturesSection = computed(() => homeContent.homeFeaturesSection.value || {})

const featureIcons = {
  'badge-dollar-sign': BadgeDollarSign,
  car: Car,
  headphones: Headphones,
  'shield-check': ShieldCheck,
}
</script>

<template>
  <section class="py-12 md:py-16 relative w-full bg-[#FAFAFA]">
    <div class="absolute inset-0 overflow-hidden pointer-events-none">
      <div class="absolute top-16 bottom-16 -left-[26%] -right-[4%] md:top-20 md:bottom-20">
        <div class="absolute inset-0 bg-[linear-gradient(90deg,rgba(238,243,249,0.98)_0%,rgba(238,243,249,0.62)_18%,rgba(250,250,250,0)_40%,rgba(250,250,250,0)_80%,rgba(255,243,232,0.28)_94%,rgba(255,243,232,0.1)_100%)]" />
        <div class="absolute top-1/2 left-0 h-[30rem] w-[30rem] -translate-y-1/2 rounded-full bg-slate-300/24 blur-[120px]" />
        <div class="absolute top-1/2 right-0 h-[30rem] w-[30rem] -translate-y-1/2 rounded-full bg-brand-orange/5 blur-[120px]" />
      </div>
    </div>

    <div class="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 md:gap-5">
        <div class="lg:col-span-1 bg-white/60 backdrop-blur-xl rounded-[2rem] p-6 md:p-8 flex flex-col justify-between relative overflow-hidden group border border-white shadow-sm">
          <div class="absolute inset-0 bg-gradient-to-br from-white/40 via-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />

          <div class="relative z-10">
            <div class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/80 backdrop-blur-md border border-white/50 text-[9px] font-bold tracking-[0.2em] text-slate-700 uppercase mb-8 shadow-sm">
              <span class="w-1.5 h-1.5 rounded-full bg-brand-orange animate-pulse shadow-[0_0_8px_rgba(242,125,38,0.4)]" />
              {{ homeFeaturesSection.eyebrow }}
            </div>

            <div>
              <h3 class="text-3xl md:text-[2.6rem] lg:text-[3.15rem] font-display font-semibold text-slate-900 tracking-tight mb-4 leading-[1.02] max-w-[10ch]">
                {{ homeFeaturesSection.title }}
              </h3>
              <p class="text-sm md:text-base text-slate-600 leading-relaxed font-light">
                {{ homeFeaturesSection.description }}
              </p>
            </div>
          </div>
        </div>

        <div class="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-5">
          <div
            v-for="feature in homeFeaturesSection.highlights"
            :key="feature.title"
            class="bg-white/60 backdrop-blur-xl rounded-[2rem] p-6 md:p-8 border border-white shadow-sm hover:bg-white/80 transition-all duration-500 group flex flex-col relative overflow-hidden"
          >
            <div class="absolute inset-0 bg-gradient-to-br from-white/40 via-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

            <div class="relative z-10 flex items-start justify-between mb-8">
              <div class="w-12 h-12 rounded-2xl bg-white/80 backdrop-blur-md border border-white/50 flex items-center justify-center text-slate-600 group-hover:text-brand-orange group-hover:bg-white group-hover:border-white transition-all duration-500 shadow-sm">
                <component :is="featureIcons[feature.iconKey] || ShieldCheck" class="w-5 h-5" :stroke-width="1.5" />
              </div>
              <div class="px-3 py-1.5 rounded-full bg-white/80 backdrop-blur-md border border-white/50 text-[10px] font-bold tracking-widest text-slate-500 uppercase group-hover:border-white group-hover:text-brand-orange group-hover:bg-white transition-all duration-500 shadow-sm">
                {{ feature.value }}
              </div>
            </div>

            <div class="relative z-10 mt-auto">
              <h4 class="text-lg font-display font-semibold text-slate-900 mb-2 group-hover:text-brand-orange transition-colors duration-500">
                {{ feature.title }}
              </h4>
              <p class="text-sm text-slate-600 leading-relaxed font-light">{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
