<script setup>
import { AnimatePresence, motion } from 'motion-v'
import { ArrowRight, CheckCircle2, Play, X } from 'lucide-vue-next'
import { useHomeContent } from '~/content/home'

const homeContent = useHomeContent()
const ui = usePublicUi()
const homeAboutSection = computed(() => homeContent.homeAboutSection.value || {})

const showMedia = ref(false)
const mediaAction = computed(() => homeAboutSection.value.mediaAction || null)
const hasVideoAction = computed(() => Boolean(mediaAction.value?.type === 'video' && mediaAction.value?.videoUrl))
const aboutPosterImage = computed(() => mediaAction.value?.posterImage || homeAboutSection.value.image)
const aboutImageAlt = computed(() => homeAboutSection.value.title || homeAboutSection.value.eyebrow || ui.value.home.about.alt)
</script>

<template>
  <section id="about-section" class="mt-20 md:mt-32 mb-20">
    <div class="flex flex-col lg:flex-row gap-12 lg:gap-20 items-center">
      <div class="w-full lg:w-1/2 relative">
        <div class="aspect-[4/5] md:aspect-[3/4] lg:aspect-[4/5] rounded-[2.5rem] overflow-hidden relative shadow-2xl group">
          <img
            :src="homeAboutSection.image"
            :alt="aboutImageAlt"
            class="absolute inset-0 w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
          >
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/10 to-transparent opacity-80" />

          <div v-if="hasVideoAction" class="absolute inset-0 flex items-center justify-center">
            <button
              type="button"
              :aria-label="mediaAction?.label || ui.home.about.playVideo"
              class="w-20 h-20 rounded-full bg-white/10 backdrop-blur-md border border-white/30 flex items-center justify-center text-white group-hover:bg-brand-orange group-hover:border-brand-orange transition-all duration-500 group-hover:scale-110 shadow-2xl"
              @click="showMedia = true"
            >
              <Play class="w-8 h-8 fill-current ml-1" />
            </button>
          </div>

          <div class="absolute bottom-8 left-8 bg-white/60 backdrop-blur-xl border border-white/60 p-6 rounded-2xl max-w-[260px] shadow-xl transform transition-transform duration-500 group-hover:-translate-y-2">
            <div class="text-4xl font-display font-black tracking-[0.2em] text-slate-900 mb-1">{{ ui.home.about.brandLabel }}</div>
            <div class="text-[10px] font-bold text-brand-orange uppercase tracking-widest">{{ homeAboutSection.badge }}</div>
          </div>
        </div>

        <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-brand-orange/20 rounded-full blur-[80px] -z-10" />
      </div>

      <div class="w-full lg:w-1/2 lg:pl-4">
        <div class="text-brand-orange font-bold text-xs tracking-[0.2em] uppercase mb-6 flex items-center gap-4">
          <span class="w-12 h-[2px] bg-brand-orange" />
          {{ homeAboutSection.eyebrow }}
        </div>

        <h2 class="text-4xl md:text-5xl lg:text-6xl font-display font-light text-slate-900 leading-[1.1] mb-8 tracking-tight">
          <span class="font-semibold">{{ homeAboutSection.title }}</span>
        </h2>

        <div class="space-y-6 text-slate-600 text-base md:text-lg leading-relaxed mb-10 font-light">
          <p v-for="paragraph in homeAboutSection.paragraphs" :key="paragraph">
            {{ paragraph }}
          </p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-5 mb-12">
          <div
            v-for="feature in homeAboutSection.highlights"
            :key="feature"
            class="flex items-center gap-3"
          >
            <div class="w-6 h-6 rounded-full bg-brand-orange/10 flex items-center justify-center shrink-0">
              <CheckCircle2 class="w-4 h-4 text-brand-orange" />
            </div>
            <span class="text-slate-800 font-medium text-sm">{{ feature }}</span>
          </div>
        </div>

        <NuxtLink
          :to="homeAboutSection.ctaUrl"
          class="group inline-flex items-center gap-4 bg-slate-900 text-white px-8 py-4 rounded-2xl font-display font-bold text-sm tracking-wider uppercase hover:bg-brand-orange transition-all duration-300 shadow-xl hover:shadow-brand-orange/30 hover:-translate-y-1"
        >
          <span>{{ homeAboutSection.ctaLabel }}</span>
          <div class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center group-hover:bg-white group-hover:text-brand-orange transition-colors">
            <ArrowRight class="w-4 h-4" />
          </div>
        </NuxtLink>
      </div>
    </div>

    <AnimatePresence>
      <div v-if="showMedia && hasVideoAction" class="fixed inset-0 z-[100] flex items-center justify-center p-4 sm:p-6">
        <motion.div
          :initial="{ opacity: 0 }"
          :animate="{ opacity: 1 }"
          :exit="{ opacity: 0 }"
          class="absolute inset-0 bg-slate-900/90 backdrop-blur-xl"
          @click="showMedia = false"
        />
        <motion.div
          :initial="{ scale: 0.96, opacity: 0, y: 24 }"
          :animate="{ scale: 1, opacity: 1, y: 0 }"
          :exit="{ scale: 0.96, opacity: 0, y: 24 }"
          class="relative w-full max-w-5xl aspect-video bg-black rounded-[2rem] overflow-hidden shadow-2xl border border-white/10"
        >
          <button
            type="button"
            class="absolute top-6 right-6 z-20 w-12 h-12 bg-black/40 hover:bg-black/60 backdrop-blur-md rounded-full flex items-center justify-center text-white transition-colors border border-white/10"
            @click="showMedia = false"
          >
            <X class="w-6 h-6" />
          </button>

          <video
            class="w-full h-full object-cover"
            :poster="aboutPosterImage"
            controls
            autoplay
            playsinline
            preload="metadata"
          >
            <source :src="mediaAction.videoUrl" type="video/mp4">
          </video>
        </motion.div>
      </div>
    </AnimatePresence>
  </section>
</template>
