<script setup>
import { motion } from 'motion-v'
import { ArrowUpRight, ShieldCheck, Star, Users } from 'lucide-vue-next'
import { buildAboutPageSeo, useAboutContent } from '~/content/about'
import { normalizePublicInternalPath } from '~/utils/public-routes'
import { buildPublicSeoLinks } from '~/utils/public-seo'

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

const valueIcons = {
  'shield-check': ShieldCheck,
  star: Star,
  users: Users,
}

const { locale } = usePublicLocale()
const {
  aboutContentPage,
  aboutHeroBackground,
  aboutHeroBackgroundAlt,
  aboutStats,
  aboutStoryMedia,
  aboutStoryParagraphs,
  aboutUi,
  aboutValues,
} = useAboutContent()

const runtimeConfig = useRuntimeConfig()
const pageOrigin = computed(() => String(runtimeConfig.public.siteBaseUrl || '').replace(/\/+$/, ''))
const aboutPageSeo = computed(() => buildAboutPageSeo(aboutContentPage.value, pageOrigin.value))

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

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

<template>
  <div class="min-h-screen bg-[#050505] text-white selection:bg-brand-orange/30 relative">
    <img
      v-if="aboutHeroBackground"
      :src="aboutHeroBackground"
      :alt="aboutHeroBackgroundAlt"
      class="absolute inset-0 w-full h-full object-cover opacity-20 pointer-events-none mix-blend-luminosity"
    >
    <div class="absolute inset-0 bg-gradient-to-b from-[#050505]/80 via-[#050505] to-[#050505] pointer-events-none" />

    <div class="relative z-10">
      <section class="pt-24 pb-20 md:pt-40 md:pb-32 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <motion.div
          :initial="{ opacity: 0, y: 40 }"
          :animate="{ opacity: 1, y: 0 }"
          :transition="{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }"
        >
          <div class="flex items-center gap-3 mb-6">
            <span class="h-px w-12 bg-brand-orange" />
            <span class="text-brand-orange font-bold tracking-widest uppercase text-xs">{{ aboutUi.heroEyebrow }}</span>
          </div>
          <h1 class="text-5xl md:text-7xl lg:text-8xl font-black tracking-tighter uppercase mb-8 leading-[0.85]">
            {{ aboutContentPage.title }} <br>
            <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-white/40">{{ aboutContentPage.subtitle }}</span>
          </h1>
          <p class="text-lg md:text-2xl text-white/60 max-w-2xl font-light leading-relaxed">
            {{ aboutContentPage.excerpt }}
          </p>

        </motion.div>
      </section>

      <section class="py-20 border-y border-white/10 bg-white/5 backdrop-blur-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12">
            <motion.div
              v-for="(stat, index) in aboutStats"
              :key="stat.label"
              :initial="{ opacity: 0, y: 20 }"
              :while-in-view="{ opacity: 1, y: 0 }"
              :viewport="{ once: true }"
              :transition="{ delay: index * 0.1, duration: 0.6 }"
              class="flex flex-col gap-2"
            >
              <span class="text-4xl md:text-6xl font-black text-brand-orange">{{ stat.value }}</span>
              <span class="text-sm font-bold uppercase tracking-widest text-white/50">{{ stat.label }}</span>
            </motion.div>
          </div>
        </div>
      </section>

      <section class="py-24 md:py-32 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
          <motion.div
            :initial="{ opacity: 0, x: -40 }"
            :while-in-view="{ opacity: 1, x: 0 }"
            :viewport="{ once: true }"
            :transition="{ duration: 0.8 }"
          >
            <h2 class="text-3xl md:text-5xl font-black uppercase tracking-tighter mb-8">
              {{ aboutUi.storyHeading }}
            </h2>
            <div class="space-y-6 text-lg text-white/60 font-light leading-relaxed">
              <p v-for="paragraph in aboutStoryParagraphs" :key="paragraph">
                {{ paragraph }}
              </p>
            </div>
          </motion.div>

          <motion.div
            v-if="aboutStoryMedia.image"
            :initial="{ opacity: 0, scale: 0.95 }"
            :while-in-view="{ opacity: 1, scale: 1 }"
            :viewport="{ once: true }"
            :transition="{ duration: 0.8 }"
            class="relative aspect-[4/5] rounded-[2rem] overflow-hidden"
          >
            <img
              :src="aboutStoryMedia.image"
              :alt="aboutStoryMedia.alt"
              class="w-full h-full object-cover"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-[#050505] via-transparent to-transparent" />
          </motion.div>
        </div>
      </section>

      <section class="py-24 md:py-32 bg-white text-slate-900 rounded-t-[3rem] md:rounded-t-[5rem] relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="text-center max-w-3xl mx-auto mb-20">
            <h2 class="text-4xl md:text-6xl font-black uppercase tracking-tighter mb-6">
              {{ aboutUi.valuesHeading }}
            </h2>
            <p class="text-xl text-slate-500">
              {{ aboutUi.valuesDescription }}
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
            <motion.div
              v-for="(value, index) in aboutValues"
              :key="value.title"
              :initial="{ opacity: 0, y: 20 }"
              :while-in-view="{ opacity: 1, y: 0 }"
              :viewport="{ once: true }"
              :transition="{ delay: index * 0.1, duration: 0.6 }"
              class="flex flex-col items-center text-center"
            >
              <div class="w-20 h-20 rounded-full bg-slate-100 flex items-center justify-center mb-6">
                <component :is="valueIcons[value.iconKey] || ShieldCheck" class="w-10 h-10 text-brand-orange" />
              </div>
              <h3 class="text-2xl font-bold mb-4">{{ value.title }}</h3>
              <p class="text-slate-500 leading-relaxed">{{ value.description }}</p>
            </motion.div>
          </div>

          <div class="mt-24 text-center">
            <NuxtLink
              :to="normalizePublicInternalPath(aboutContentPage?.cta?.url, locale)"
              class="inline-flex items-center justify-center gap-2 bg-slate-900 text-white px-8 py-4 rounded-full font-bold uppercase tracking-wider hover:bg-brand-orange transition-colors duration-300"
            >
              {{ aboutContentPage?.cta?.label }}
              <ArrowUpRight class="w-5 h-5" />
            </NuxtLink>
          </div>
        </div>

        <div class="absolute inset-0 opacity-[0.03] pointer-events-none" style="background-image: radial-gradient(#000 2px, transparent 2px); background-size: 32px 32px;" />
      </section>
    </div>
  </div>
</template>
