<script setup>
import { motion } from 'motion-v'
import { ArrowRight, Calendar, Clock, Sparkles, TrendingUp } from 'lucide-vue-next'
import { useHomeContent } from '~/content/home'
import PublicArticleImage from '~/components/shared/PublicArticleImage.vue'
import { normalizePublicInternalPath } from '~/utils/public-routes'

const homeContent = useHomeContent()
const homeArticlesSection = computed(() => homeContent.homeArticlesSection.value || {})
const homeFeaturedArticle = computed(() => homeContent.homeFeaturedArticle.value || null)
const homeSecondaryArticles = computed(() => homeContent.homeSecondaryArticles.value || [])
const homeSidebarArticles = computed(() => homeContent.homeSidebarArticles.value || [])
const { locale } = usePublicLocale()
const ui = usePublicUi()
const newsIndexRoute = computed(() => normalizePublicInternalPath('/news', locale.value))
</script>

<template>
  <section class="py-24 relative overflow-hidden">
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[500px] bg-brand-orange/5 rounded-full blur-3xl pointer-events-none" />

    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="mb-12 md:mb-16">
        <motion.div
          :initial="{ opacity: 0, y: 20 }"
          :while-in-view="{ opacity: 1, y: 0 }"
          :viewport="{ once: true }"
          class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/80 backdrop-blur-md border border-white/60 shadow-sm mb-6"
        >
          <Sparkles class="w-4 h-4 text-brand-orange" />
          <span class="text-xs font-bold uppercase tracking-widest text-slate-700">{{ homeArticlesSection.eyebrow }}</span>
        </motion.div>
        <motion.h2
          :initial="{ opacity: 0, y: 20 }"
          :while-in-view="{ opacity: 1, y: 0 }"
          :viewport="{ once: true }"
          :transition="{ delay: 0.1 }"
          class="text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 tracking-tight"
        >
          {{ homeArticlesSection.title }} <span class="text-brand-orange">{{ homeArticlesSection.accent }}</span>
        </motion.h2>
        <motion.p
          :initial="{ opacity: 0, y: 20 }"
          :while-in-view="{ opacity: 1, y: 0 }"
          :viewport="{ once: true }"
          :transition="{ delay: 0.2 }"
          class="mt-4 text-lg text-slate-500 max-w-2xl"
        >
          {{ homeArticlesSection.description }}
        </motion.p>
      </div>

      <div class="flex flex-col lg:flex-row gap-8 lg:gap-12">
        <div class="w-full lg:w-[65%] flex flex-col gap-8">
          <motion.article
            v-if="homeFeaturedArticle"
            :initial="{ opacity: 0, y: 20 }"
            :while-in-view="{ opacity: 1, y: 0 }"
            :viewport="{ once: true }"
            class="group relative bg-white/60 backdrop-blur-xl border border-white/80 rounded-[2.5rem] p-4 shadow-[0_20px_60px_-15px_rgba(0,0,0,0.05)] ring-1 ring-black/5 overflow-hidden flex flex-col"
          >
            <div class="relative w-full aspect-[16/9] md:aspect-[21/9] rounded-[2rem] overflow-hidden mb-6 shrink-0">
              <PublicArticleImage
                :src="homeFeaturedArticle.image"
                :alt="homeFeaturedArticle.title"
                label="Cover"
                img-class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                fallback-class="absolute inset-0 w-full h-full"
              />
              <div class="absolute top-4 left-4">
                <div class="flex items-center gap-2">
                  <span class="px-4 py-2 bg-white/90 backdrop-blur-md text-slate-900 rounded-xl text-xs font-bold uppercase tracking-widest shadow-sm">
                    {{ homeFeaturedArticle.category }}
                  </span>
                  <span v-if="homeFeaturedArticle.isFallback" class="px-4 py-2 bg-white/90 backdrop-blur-md text-slate-900 rounded-xl text-xs font-bold uppercase tracking-widest shadow-sm">
                    {{ homeFeaturedArticle.sourceLocaleCode }}
                  </span>
                </div>
              </div>
            </div>

            <div class="px-4 pb-4 flex flex-col flex-1">
              <div class="flex items-center gap-4 text-xs font-bold text-slate-400 uppercase tracking-wider mb-4">
                <div class="flex items-center gap-1.5">
                  <Calendar class="w-4 h-4" /> {{ homeFeaturedArticle.date }}
                </div>
                <div class="w-1 h-1 rounded-full bg-slate-300" />
                <div class="flex items-center gap-1.5">
                  <Clock class="w-4 h-4" /> {{ homeFeaturedArticle.readTime }}
                </div>
              </div>

              <h3 class="text-2xl md:text-3xl font-bold text-slate-900 leading-tight mb-4 group-hover:text-brand-orange transition-colors">
                <NuxtLink :to="homeFeaturedArticle.href" class="before:absolute before:inset-0">
                  {{ homeFeaturedArticle.title }}
                </NuxtLink>
              </h3>

              <p class="text-slate-500 leading-relaxed mb-6 flex-1">
                {{ homeFeaturedArticle.excerpt }}
              </p>

              <div class="flex items-center text-sm font-bold text-slate-900 uppercase tracking-widest group/link mt-auto">
                {{ ui.common.readArticle }}
                <ArrowRight class="w-4 h-4 ml-2 group-hover/link:translate-x-2 transition-transform text-brand-orange" />
              </div>
            </div>
          </motion.article>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <motion.article
              v-for="(article, index) in homeSecondaryArticles"
              :key="article.id"
              :initial="{ opacity: 0, y: 20 }"
              :while-in-view="{ opacity: 1, y: 0 }"
              :viewport="{ once: true }"
              :transition="{ delay: index * 0.1 }"
              class="group relative bg-white/60 backdrop-blur-xl border border-white/80 rounded-[2rem] p-3 shadow-sm hover:shadow-xl hover:shadow-black/5 transition-all duration-300 flex flex-col"
            >
              <div class="relative w-full aspect-[4/3] rounded-[1.5rem] overflow-hidden mb-5 shrink-0">
                <PublicArticleImage
                  :src="article.image"
                  :alt="article.title"
                  label="Cover"
                  img-class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                  fallback-class="absolute inset-0 w-full h-full"
                />
                <div class="absolute top-3 left-3">
                  <div class="flex items-center gap-2">
                    <span class="px-3 py-1.5 bg-white/90 backdrop-blur-md text-slate-900 rounded-lg text-[10px] font-bold uppercase tracking-widest shadow-sm">
                      {{ article.category }}
                    </span>
                    <span v-if="article.isFallback" class="px-3 py-1.5 bg-white/90 backdrop-blur-md text-slate-900 rounded-lg text-[10px] font-bold uppercase tracking-widest shadow-sm">
                      {{ article.sourceLocaleCode }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="px-3 pb-3 flex flex-col flex-1">
                <div class="flex items-center gap-3 text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-3">
                  <div class="flex items-center gap-1">
                    <Calendar class="w-3 h-3" /> {{ article.date }}
                  </div>
                  <div class="w-1 h-1 rounded-full bg-slate-300" />
                  <div class="flex items-center gap-1">
                    <Clock class="w-3 h-3" /> {{ article.readTime }}
                  </div>
                </div>

                <h3 class="text-lg font-bold text-slate-900 leading-tight mb-3 group-hover:text-brand-orange transition-colors">
                  <NuxtLink :to="article.href" class="before:absolute before:inset-0">
                    {{ article.title }}
                  </NuxtLink>
                </h3>

                <p class="text-slate-500 text-sm leading-relaxed line-clamp-2 mb-4 flex-1">
                  {{ article.excerpt }}
                </p>
              </div>
            </motion.article>
          </div>
        </div>

        <div class="w-full lg:w-[35%]">
          <div class="sticky top-8 flex flex-col gap-6 bg-slate-900 rounded-[2.5rem] p-6 lg:p-8 shadow-2xl text-white">
            <div class="flex items-center gap-3 mb-2">
              <div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
                <TrendingUp class="w-5 h-5 text-brand-orange" />
              </div>
              <h3 class="text-xl font-bold tracking-tight">{{ homeArticlesSection.quickReadsTitle }}</h3>
            </div>

            <div class="flex flex-col gap-6">
              <motion.article
                v-for="(article, index) in homeSidebarArticles"
                :key="article.id"
                :initial="{ opacity: 0, x: 20 }"
                :while-in-view="{ opacity: 1, x: 0 }"
                :viewport="{ once: true }"
                :transition="{ delay: index * 0.1 }"
                class="group flex gap-4 items-center relative"
              >
                <div class="w-20 h-20 rounded-2xl overflow-hidden shrink-0 relative">
                  <div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors z-10" />
                  <PublicArticleImage
                    :src="article.image"
                    :alt="article.title"
                    label="News"
                    img-class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500"
                    fallback-class="w-full h-full rounded-2xl"
                  />
                </div>

                <div class="flex flex-col justify-center">
                  <div class="flex items-center gap-2 mb-1.5">
                    <span class="text-[9px] font-bold uppercase tracking-widest text-brand-orange">
                      {{ article.category }}
                    </span>
                    <span v-if="article.isFallback" class="text-[9px] font-bold uppercase tracking-widest text-white/85">
                      {{ article.sourceLocaleCode }}
                    </span>
                    <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500">
                      • {{ article.date }}
                    </span>
                  </div>
                  <h4 class="text-sm font-bold leading-snug group-hover:text-brand-orange transition-colors line-clamp-2">
                    <NuxtLink :to="article.href" class="before:absolute before:inset-0">
                      {{ article.title }}
                    </NuxtLink>
                  </h4>
                </div>
              </motion.article>
            </div>

            <div class="mt-4 pt-6 border-t border-white/10">
              <NuxtLink :to="newsIndexRoute" class="w-full py-4 rounded-2xl bg-white/5 hover:bg-white/10 text-white font-bold text-xs uppercase tracking-widest transition-colors duration-300 flex items-center justify-center gap-2 group/btn">
                {{ homeArticlesSection.viewAllLabel }}
                <ArrowRight class="w-4 h-4 group-hover/btn:translate-x-1 transition-transform text-brand-orange" />
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
