<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import Accordion from 'primevue/accordion'
import AccordionContent from 'primevue/accordioncontent'
import AccordionHeader from 'primevue/accordionheader'
import AccordionPanel from 'primevue/accordionpanel'
import {
  ArrowRight,
  Award,
  BarChart3,
  ChevronLeft,
  ChevronRight,
  Clapperboard,
  Clock,
  Crown,
  Film,
  Globe,
  Heart,
  Link as LinkIcon,
  Megaphone,
  Mic,
  PartyPopper,
  ShieldCheck,
  Sparkles,
  Star,
  Trophy,
  Users,
  Video,
  Vote,
} from '@lucide/vue'

import Button from '../components/ui/Button.vue'
import Card from '../components/ui/Card.vue'
import { useAwardsStore } from '../stores/awards'
import { useAuthStore } from '../stores/auth'
import { usePhases, type ActionKey, type PhaseState } from '../composables/usePhases'
import heroKeyvisual from '../assets/hero-keyvisual.svg'

const store = useAwardsStore()
const authStore = useAuthStore()
const router = useRouter()
const { phaseInfo } = usePhases()

/* ----- Phasen-Zustand je Aktion (Quelle: Season-Timeline) ----- */
const phaseByAction = computed(() => ({
  nominate: phaseInfo('nominate'),
  vote: phaseInfo('vote'),
  clip: phaseInfo('clip'),
}))

function phaseBadge(state: PhaseState) {
  if (state === 'active') return { label: 'Jetzt offen', class: 'bg-emerald-50 text-emerald-600' }
  if (state === 'upcoming') return { label: 'Demnächst', class: 'bg-amber-50 text-amber-600' }
  return { label: 'Abgeschlossen', class: 'bg-slate-100 text-slate-500' }
}

function ctaLabel(key: ActionKey, openLabel: string) {
  const info = phaseByAction.value[key]
  if (info.open) return openLabel
  if (info.state === 'upcoming') return `Ab ${info.startLabel}`
  return 'Abgeschlossen'
}

onMounted(() => {
  void store.loadHomeData()
})

const heroYear = computed(() => store.overview.year)
const isLoggedIn = computed(() => authStore.isLoggedIn)

/* ----- Login-Gate: ohne Twitch-Login kein Nominieren/Voten ----- */
async function startLogin() {
  try {
    await authStore.login({ twitchUserId: 'jayuhime_demo', displayName: 'Jayuhime', role: 'viewer' })
  } catch {
    /* Fehler werden im Header-Login-Bereich angezeigt */
  }
}

function goTo(path: string) {
  if (isLoggedIn.value) {
    void router.push(path)
  } else {
    void startLogin()
  }
}

/* ----- Live Countdown bis zum Ende der aktiven Phase ----- */
const now = ref(Date.now())
let timer: ReturnType<typeof setInterval> | undefined

onMounted(() => {
  timer = setInterval(() => {
    now.value = Date.now()
  }, 1000)
})
onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
})

const targetDate = computed(() => {
  const active = store.overview.timeline.find((item) => item.state === 'active')
  const raw = active?.endsAt ?? store.overview.showDate
  const parsed = new Date(`${raw}T23:59:59`).getTime()
  return Number.isNaN(parsed) ? now.value : parsed
})

const countdown = computed(() => {
  const diff = Math.max(0, targetDate.value - now.value)
  const totalSeconds = Math.floor(diff / 1000)
  const days = Math.floor(totalSeconds / 86400)
  const hours = Math.floor((totalSeconds % 86400) / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  const seconds = totalSeconds % 60
  const pad = (value: number) => value.toString().padStart(2, '0')
  return [
    { label: 'Tage', value: pad(days) },
    { label: 'Std', value: pad(hours) },
    { label: 'Min', value: pad(minutes) },
    { label: 'Sek', value: pad(seconds) },
  ]
})

/* ----- Statische Showcase-Daten ----- */
const trustItems = [
  { icon: Sparkles, title: '100% Community Powered', text: 'Deine Stimme entscheidet!' },
  { icon: ShieldCheck, title: 'Fair & Transparent', text: 'Verifiziert. Sicher. Vertrauenswürdig.' },
  { icon: Video, title: 'Live auf YouTube & Twitch', text: 'Die große Award Show.' },
  { icon: Globe, title: 'Global Celebration', text: 'Alle VTuber. Alle Fans.' },
]

const steps = [
  {
    icon: Sparkles,
    title: 'Nominieren',
    text: 'Trag deine Lieblings-Creator ein – bis zu 3 Favoriten pro Kategorie.',
    accent: 'from-violet-200 to-fuchsia-100 text-violet-600',
  },
  {
    icon: Heart,
    title: 'Voten',
    text: 'Die Community stimmt ab. Eine Stimme pro Kategorie, mit ganz viel Herz.',
    accent: 'from-rose-200 to-amber-100 text-rose-500',
  },
  {
    icon: Trophy,
    title: 'Feiern',
    text: 'Die Stimmen werden gezählt und die Gewinner live in der Show gekürt!',
    accent: 'from-amber-200 to-emerald-100 text-amber-600',
  },
]

const categories = [
  { icon: Star, name: 'VTuber des Jahres', text: 'Die Auszeichnung des Abends – für die, die alle verzaubert hat.', accent: 'bg-violet-100 text-violet-600' },
  { icon: Mic, name: 'Bestes Live Event', text: 'Konzerte, Watchalongs und Shows, die niemand vergisst.', accent: 'bg-fuchsia-100 text-fuchsia-600' },
  { icon: Video, name: 'Streamer:in des Jahres', text: 'Für die Streams, in denen man einfach hängen bleibt.', accent: 'bg-sky-100 text-sky-600' },
  { icon: Heart, name: 'Beste Collab', text: 'Wenn zwei Welten kollidieren und Magie entsteht.', accent: 'bg-rose-100 text-rose-500' },
  { icon: Clapperboard, name: 'Best Content Creator', text: 'Für kreative Köpfe, die immer wieder überraschen.', accent: 'bg-amber-100 text-amber-600' },
  { icon: Film, name: 'Clip des Jahres', text: 'Der eine Clip, den du in jeden Chat spammst.', accent: 'bg-emerald-100 text-emerald-600' },
]

const winners = [
  { name: 'Hoshimi Miyu', slug: '@HoshimiMiyu', category: 'VTuber des Jahres', year: 2025, current: false },
  { name: 'Kurainu 3D Live', slug: '@Kurainu', category: 'Best Live Event', year: 2025, current: false },
  { name: 'Shiro Ch.', slug: '@ShiroCh', category: 'Streamer:in des Jahres', year: 2025, current: true },
  { name: 'Luna & Yuki', slug: '@LunaYuki', category: 'Beste Collab', year: 2025, current: false },
  { name: 'Miyu Ch.', slug: '@MiyuCh', category: 'Best Content Creator', year: 2025, current: false },
  { name: 'Pyonkichi Kingdom', slug: '@PyonkichiKingdom', category: 'Clip des Jahres', year: 2024, current: false },
]

const winnerGradients = [
  'from-violet-200 to-fuchsia-100',
  'from-indigo-200 to-violet-100',
  'from-sky-200 to-violet-100',
  'from-rose-200 to-amber-100',
  'from-violet-200 to-amber-100',
  'from-fuchsia-200 to-rose-100',
]

const participation: Array<{
  key: ActionKey
  icon: typeof Sparkles
  title: string
  text: string
  to: string
  cta: string
  accent: string
}> = [
  { key: 'nominate', icon: Sparkles, title: 'Nominieren', text: 'Trag bis zu 3 Favoriten pro Kategorie ein und bring sie auf die Bühne.', to: '/nominations', cta: 'Jetzt nominieren', accent: 'from-violet-200 to-fuchsia-100 text-violet-600' },
  { key: 'vote', icon: Heart, title: 'Voten', text: 'Eine Stimme pro Kategorie – entscheide mit, wer am Ende gewinnt.', to: '/voting', cta: 'Jetzt voten', accent: 'from-rose-200 to-amber-100 text-rose-500' },
  { key: 'clip', icon: Film, title: 'Clip einreichen', text: 'Teile den Link zu deinem Lieblings-Clip fürs „Clip des Jahres".', to: '/clips', cta: 'Clip einreichen', accent: 'from-sky-200 to-violet-100 text-sky-600' },
]

const adminMetrics = [
  { label: 'Nominierungen', value: '12.341', delta: '+12,4% vs. gestern' },
  { label: 'Votes', value: '582.731', delta: '+8,7% vs. gestern' },
  { label: 'Nutzer', value: '98.452', delta: '+9,2% vs. gestern' },
  { label: 'Kategorien', value: '28', delta: 'aktiv' },
  { label: 'Reviews offen', value: '47', delta: '+14 neu' },
]

const adminTopVotes = [
  { name: 'VTuber des Jahres', votes: 186321, pct: 100 },
  { name: 'Best Streamer', votes: 142553, pct: 77 },
  { name: 'Beste Collab', votes: 112968, pct: 61 },
  { name: 'Best Content Creator', votes: 78442, pct: 42 },
  { name: 'Best Live Event', votes: 62517, pct: 34 },
]

/* ----- Gewinner-Archiv Carousel ----- */
const carousel = ref<HTMLElement | null>(null)
function scrollCarousel(direction: number) {
  carousel.value?.scrollBy({ left: direction * 320, behavior: 'smooth' })
}

const winnersScopeYear = computed(() => heroYear.value - 1)
</script>

<template>
  <div class="space-y-24 pb-20">
    <!-- ============ HERO ============ -->
    <section class="grid items-stretch gap-8 lg:grid-cols-[1.02fr_1.18fr]">
      <div class="flex flex-col justify-center space-y-8">
        <p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">
          Die große Community-Auszeichnung
        </p>
        <div class="space-y-3">
          <h1 class="font-[Cormorant_Garamond] text-6xl leading-[0.86] text-violet-800 sm:text-7xl xl:text-[6.4rem]">
            VTUBER<br />STAR AWARDS
          </h1>
          <div class="h-1.5 w-48 rounded-full bg-[linear-gradient(90deg,#c4b5fd,#f5d0fe,#fecdd3,#fde68a,#bbf7d0,#bae6fd)]" />
          <p class="font-[Cormorant_Garamond] text-3xl italic text-violet-500">
            Presented by Jayuhime <Sparkles class="-mt-1 inline h-6 w-6 text-amber-400" />
          </p>
        </div>
        <p class="max-w-lg text-lg leading-8 text-slate-600">
          VTuber sind Künstler:innen, Entertainer und Geschichtenerzähler:innen zugleich. Hier feiern wir genau diese
          Kreativität – nominiere deine Favoriten, vote für die Besten und sei dabei, wenn die Stars gekürt werden!
        </p>

        <!-- Aktuelle Phase Card -->
        <Card class="p-7">
          <div class="flex items-center justify-between">
            <p class="text-xs font-semibold uppercase tracking-[0.3em] text-violet-500">Aktuelle Phase</p>
            <span class="inline-flex items-center gap-2 rounded-full bg-rose-50 px-3 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-rose-500">
              <span class="inline-flex h-2 w-2 animate-pulse rounded-full bg-rose-500" /> Live
            </span>
          </div>
          <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ store.overview.currentPhase }}</h2>
          <p class="mt-2 text-sm text-slate-600">
            Die Nominierungsphase ist abgeschlossen. Jetzt liegt es an dir: Stimme für deine Favoriten!
          </p>

          <div class="mt-6 grid grid-cols-4 gap-3">
            <div
              v-for="unit in countdown"
              :key="unit.label"
              class="rounded-2xl border border-violet-100 bg-violet-50/70 py-4 text-center"
            >
              <strong class="block font-[Cormorant_Garamond] text-3xl text-violet-800">{{ unit.value }}</strong>
              <span class="text-[10px] uppercase tracking-[0.2em] text-slate-500">{{ unit.label }}</span>
            </div>
          </div>

          <div class="mt-6 flex flex-wrap gap-3">
            <Button
              size="lg"
              class="gap-2"
              :disabled="!phaseByAction.nominate.open"
              @click="goTo('/nominations')"
            >
              <Sparkles class="h-4 w-4" /> {{ ctaLabel('nominate', 'Jetzt nominieren') }}
            </Button>
            <Button
              variant="secondary"
              size="lg"
              class="gap-2"
              :disabled="!phaseByAction.vote.open"
              @click="goTo('/voting')"
            >
              <Star class="h-4 w-4" /> {{ ctaLabel('vote', 'Jetzt voten') }}
            </Button>
          </div>
        </Card>
      </div>

      <!-- Hero Keyvisual -->
      <Card class="relative overflow-hidden p-0">
        <div class="relative min-h-[640px]">
          <img :src="heroKeyvisual" alt="VTuber Star Awards Keyvisual (Platzhalter)" class="absolute inset-0 h-full w-full object-cover object-top" />
          <div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_18%,rgba(255,255,255,0.55),transparent_45%)]" />

          <!-- Host Badge -->
          <div class="absolute bottom-7 right-7 w-[230px] rounded-[24px] border border-white/70 bg-white/80 p-5 shadow-lg backdrop-blur">
            <p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-slate-400">Host</p>
            <p class="mt-1 flex items-center gap-2 font-[Cormorant_Garamond] text-3xl text-violet-800">
              Jayuhime <Sparkles class="h-5 w-5 text-amber-400" />
            </p>
            <p class="text-sm text-slate-500">VTuber &amp; Award Host</p>
            <div class="mt-3 flex items-center gap-2 text-violet-500">
              <span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
                <Video class="h-4 w-4" />
              </span>
              <span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
                <PartyPopper class="h-4 w-4" />
              </span>
              <span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
                <svg class="h-3.5 w-3.5" viewBox="0 0 19 19"><use href="/icons.svg#x-icon" /></svg>
              </span>
            </div>
          </div>
        </div>
      </Card>
    </section>

    <!-- ============ TRUST BAR ============ -->
    <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <Card v-for="item in trustItems" :key="item.title" class="flex items-center gap-4 p-5">
        <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[linear-gradient(135deg,#efe6ff,#fff1da)] text-violet-600">
          <component :is="item.icon" class="h-5 w-5" />
        </span>
        <div>
          <p class="text-sm font-semibold uppercase tracking-[0.15em] text-violet-700">{{ item.title }}</p>
          <p class="text-sm text-slate-500">{{ item.text }}</p>
        </div>
      </Card>
    </section>

    <!-- ============ SO FUNKTIONIERT'S ============ -->
    <section class="space-y-10">
      <div class="text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">So funktioniert's</p>
        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">In drei Schritten zur großen Bühne</h2>
      </div>
      <div class="grid gap-6 md:grid-cols-3">
        <div v-for="(step, index) in steps" :key="step.title" class="relative text-center">
          <div :class="['mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-gradient-to-br shadow-[0_18px_40px_rgba(124,92,255,0.18)]', step.accent]">
            <component :is="step.icon" class="h-8 w-8" />
          </div>
          <span class="mt-5 inline-flex h-8 w-8 items-center justify-center rounded-full border border-violet-200 bg-white text-sm font-semibold text-violet-600">
            {{ index + 1 }}
          </span>
          <h3 class="mt-3 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ step.title }}</h3>
          <p class="mx-auto mt-2 max-w-xs text-sm leading-7 text-slate-600">{{ step.text }}</p>
        </div>
      </div>
    </section>

    <!-- ============ BELIEBTE KATEGORIEN ============ -->
    <section class="space-y-8">
      <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Beliebte Kategorien</h2>
        <RouterLink to="/voting" class="inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
          Alle Kategorien ansehen <ArrowRight class="h-4 w-4" />
        </RouterLink>
      </div>
      <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
        <Card v-for="category in categories" :key="category.name" class="group p-6 transition hover:-translate-y-1 hover:shadow-[0_30px_70px_rgba(124,92,255,0.18)]">
          <span :class="['grid h-14 w-14 place-items-center rounded-2xl', category.accent]">
            <component :is="category.icon" class="h-6 w-6" />
          </span>
          <h3 class="mt-5 text-base font-semibold text-violet-800">{{ category.name }}</h3>
          <p class="mt-2 text-xs leading-6 text-slate-500">{{ category.text }}</p>
          <RouterLink to="/voting" class="mt-4 inline-flex items-center gap-1 text-xs font-semibold text-amber-500 group-hover:gap-2">
            Top 10 ansehen <ArrowRight class="h-3.5 w-3.5" />
          </RouterLink>
        </Card>
      </div>
    </section>

    <!-- ============ GEWINNER ARCHIV ============ -->
    <section class="space-y-8">
      <div class="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
        <div class="flex items-center gap-3">
          <h2 class="font-[Cormorant_Garamond] text-4xl text-violet-800">Gewinner Archiv</h2>
        </div>
        <div class="flex items-center gap-3">
          <RouterLink to="/winners" class="inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
            Alle Jahre ansehen <ArrowRight class="h-4 w-4" />
          </RouterLink>
          <div class="flex gap-2">
            <button class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 bg-white text-violet-600 transition hover:bg-violet-50" @click="scrollCarousel(-1)">
              <ChevronLeft class="h-4 w-4" />
            </button>
            <button class="grid h-9 w-9 place-items-center rounded-full border border-violet-200 bg-white text-violet-600 transition hover:bg-violet-50" @click="scrollCarousel(1)">
              <ChevronRight class="h-4 w-4" />
            </button>
          </div>
        </div>
      </div>

      <div ref="carousel" class="flex gap-4 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        <Card
          v-for="(winner, index) in winners"
          :key="winner.slug"
          class="w-[230px] shrink-0 overflow-hidden p-0"
        >
          <div :class="['relative h-[230px] bg-gradient-to-br', winnerGradients[index % winnerGradients.length]]">
            <div class="absolute inset-0 grid place-items-center text-white/70">
              <Star class="h-12 w-12" />
            </div>
            <span
              v-if="winner.current"
              class="absolute left-3 top-3 rounded-full bg-violet-600 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-white"
            >
              {{ winner.year }}
            </span>
            <span
              v-else
              class="absolute left-3 top-3 inline-flex items-center gap-1 rounded-full bg-[linear-gradient(135deg,#ffd97a,#f6b938)] px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.2em] text-amber-950"
            >
              <Crown class="h-3 w-3" /> Winner
            </span>
          </div>
          <div class="p-4">
            <p class="text-[10px] uppercase tracking-[0.2em] text-violet-400">{{ winner.category }}</p>
            <p class="mt-1 font-[Cormorant_Garamond] text-2xl text-violet-800">{{ winner.name }}</p>
            <p class="text-sm text-slate-500">{{ winner.slug }}</p>
          </div>
        </Card>
      </div>
      <p class="text-xs text-slate-400">Archiv-Stand: Gewinner aus {{ winnersScopeYear }} · Bilder sind Platzhalter.</p>
    </section>

    <!-- ============ MITMACHEN (Teaser-CTAs) ============ -->
    <section class="space-y-8">
      <div class="text-center">
        <p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">Mach mit</p>
        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">Werde Teil der Show</h2>
      </div>

      <div class="grid gap-5 md:grid-cols-3">
        <Card
          v-for="action in participation"
          :key="action.to"
          class="flex flex-col p-7"
          :class="phaseByAction[action.key].open ? 'ring-1 ring-violet-200/70' : 'opacity-95'"
        >
          <div class="flex items-start justify-between">
            <span :class="['grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br', action.accent]">
              <component :is="action.icon" class="h-6 w-6" />
            </span>
            <span :class="['rounded-full px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.15em]', phaseBadge(phaseByAction[action.key].state).class]">
              {{ phaseBadge(phaseByAction[action.key].state).label }}
            </span>
          </div>
          <h3 class="mt-5 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ action.title }}</h3>
          <p class="mt-2 flex-1 text-sm leading-7 text-slate-600">{{ action.text }}</p>

          <!-- Phase offen -->
          <template v-if="phaseByAction[action.key].open">
            <Button v-if="isLoggedIn" class="mt-6 w-full gap-2" @click="goTo(action.to)">
              {{ action.cta }} <ArrowRight class="h-4 w-4" />
            </Button>
            <Button v-else variant="ghost" class="mt-6 w-full gap-2 border border-violet-200" @click="startLogin">
              <svg class="h-4 w-4 fill-current" viewBox="0 0 16 16"><path d="M2.5 0 0 2.5v11h3.5V16h2l2.5-2.5h3l5-5V0H2.5Zm12 8L12 10.5H8.5L6 13v-2.5H2.5V2h12v6Z" /><path d="M11.5 4h1.5v3.5h-1.5V4Zm-3.5 0h1.5v3.5H8V4Z" /></svg>
              Mit Twitch anmelden
            </Button>
          </template>
          <!-- Phase noch nicht offen / abgeschlossen -->
          <div v-else class="mt-6 flex items-center justify-center gap-2 rounded-xl bg-slate-50 px-4 py-3 text-sm font-semibold text-slate-400">
            <Clock class="h-4 w-4" />
            {{ ctaLabel(action.key, action.cta) }}
          </div>
        </Card>
      </div>
    </section>

    <!-- ============ FAQ / COMMUNITY / SHARE ============ -->
    <section class="grid gap-6 lg:grid-cols-3">
      <Card class="p-7">
        <p class="text-xs font-semibold uppercase tracking-[0.3em] text-amber-500">FAQ – Häufige Fragen</p>
        <Accordion value="0" class="mt-5">
          <AccordionPanel v-for="(item, index) in store.overview.faq" :key="item.question" :value="String(index)">
            <AccordionHeader>{{ item.question }}</AccordionHeader>
            <AccordionContent>
              <p class="leading-7 text-slate-600">{{ item.answer }}</p>
            </AccordionContent>
          </AccordionPanel>
        </Accordion>
        <RouterLink to="/winners" class="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
          Alle Fragen ansehen <ArrowRight class="h-4 w-4" />
        </RouterLink>
      </Card>

      <Card class="flex flex-col p-7">
        <div class="flex items-center gap-2 text-violet-600">
          <Megaphone class="h-5 w-5 text-amber-500" />
          <p class="text-xs font-semibold uppercase tracking-[0.3em]">Community &amp; Updates</p>
        </div>
        <p class="mt-4 text-sm leading-7 text-slate-600">
          Tritt unserer Community bei und verpasse keine News, Updates und Behind-the-Scenes!
        </p>
        <div class="mt-5 flex gap-3 text-violet-600">
          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50"><Video class="h-4 w-4" /></span>
          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50"><PartyPopper class="h-4 w-4" /></span>
          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50">
            <svg class="h-4 w-4" viewBox="0 0 19 19"><use href="/icons.svg#x-icon" /></svg>
          </span>
          <span class="grid h-10 w-10 place-items-center rounded-full bg-violet-50">
            <svg class="h-4 w-4" viewBox="0 0 20 19"><use href="/icons.svg#discord-icon" /></svg>
          </span>
        </div>
        <button class="mt-auto flex w-full items-center justify-center gap-2 rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm font-semibold text-violet-700">
          ✉ Newsletter abonnieren
        </button>
      </Card>

      <Card class="flex flex-col p-7">
        <p class="font-[Cormorant_Garamond] text-3xl text-violet-800">Teile die Awards</p>
        <p class="mt-2 text-sm leading-7 text-slate-600">
          Supporte deine Favoriten und teile die Awards mit deinen Freunden!
        </p>
        <div class="mt-5 space-y-3">
          <button class="flex w-full items-center gap-3 rounded-2xl bg-slate-900 px-4 py-3 text-sm font-semibold text-white">
            <svg class="h-4 w-4 fill-white" viewBox="0 0 19 19"><use href="/icons.svg#x-icon" /></svg> Auf X teilen
          </button>
          <button class="flex w-full items-center gap-3 rounded-2xl bg-violet-600 px-4 py-3 text-sm font-semibold text-white">
            <svg class="h-4 w-4 fill-white" viewBox="0 0 20 19"><use href="/icons.svg#discord-icon" /></svg> Auf Discord teilen
          </button>
          <button class="flex w-full items-center gap-3 rounded-2xl border border-violet-200 bg-white px-4 py-3 text-sm font-semibold text-violet-700">
            <LinkIcon class="h-4 w-4" /> Link kopieren
          </button>
        </div>
      </Card>
    </section>

    <!-- ============ ADMIN DASHBOARD VORSCHAU ============ -->
    <section>
      <Card class="overflow-hidden p-0">
        <div class="flex flex-col gap-2 border-b border-violet-100 px-7 py-5 sm:flex-row sm:items-center sm:justify-between">
          <div class="flex items-center gap-2">
            <p class="text-xs font-semibold uppercase tracking-[0.3em] text-violet-500">Für das Team: Admin Dashboard (Vorschau)</p>
            <ShieldCheck class="h-4 w-4 text-amber-500" />
          </div>
          <RouterLink to="/admin" class="inline-flex items-center gap-2 text-sm font-semibold text-violet-600 hover:text-violet-800">
            Zum vollständigen Admin Panel <ArrowRight class="h-4 w-4" />
          </RouterLink>
        </div>

        <div class="grid gap-0 lg:grid-cols-[200px_1fr]">
          <!-- Sidebar -->
          <aside class="hidden flex-col gap-1 border-r border-violet-100 bg-violet-50/40 p-5 text-sm text-slate-600 lg:flex">
            <p class="mb-2 flex items-center gap-2 font-semibold text-violet-800"><Star class="h-4 w-4 text-amber-500" /> VSA Admin</p>
            <span class="rounded-xl bg-violet-100 px-3 py-2 font-semibold text-violet-800">Dashboard</span>
            <span class="px-3 py-2">Nominierungen</span>
            <span class="px-3 py-2">Voting</span>
            <span class="px-3 py-2">Kategorien</span>
            <span class="px-3 py-2">Clips</span>
            <span class="px-3 py-2">Reviews</span>
            <span class="px-3 py-2">User &amp; Logs</span>
            <span class="px-3 py-2">Analytics</span>
            <span class="px-3 py-2">Einstellungen</span>
          </aside>

          <!-- Content -->
          <div class="space-y-6 p-7">
            <div class="grid gap-3 sm:grid-cols-3 xl:grid-cols-5">
              <div v-for="metric in adminMetrics" :key="metric.label" class="rounded-2xl border border-violet-100 bg-white px-4 py-3">
                <p class="text-[11px] uppercase tracking-[0.15em] text-slate-400">{{ metric.label }}</p>
                <p class="mt-1 font-[Cormorant_Garamond] text-2xl text-violet-800">{{ metric.value }}</p>
                <p class="text-[11px] font-semibold text-emerald-500">{{ metric.delta }}</p>
              </div>
            </div>

            <div class="grid gap-5 lg:grid-cols-2">
              <div class="rounded-2xl border border-violet-100 bg-white p-5">
                <div class="flex items-center gap-2 text-violet-600">
                  <BarChart3 class="h-4 w-4 text-amber-500" />
                  <p class="text-xs font-semibold uppercase tracking-[0.2em]">Top Kategorien (nach Votes)</p>
                </div>
                <div class="mt-4 space-y-3">
                  <div v-for="item in adminTopVotes" :key="item.name">
                    <div class="flex items-center justify-between text-xs text-slate-600">
                      <span>{{ item.name }}</span>
                      <span class="font-semibold text-violet-700">{{ item.votes.toLocaleString('de-DE') }}</span>
                    </div>
                    <div class="mt-1 h-2 rounded-full bg-violet-50">
                      <div class="h-2 rounded-full bg-[linear-gradient(90deg,#a78bff,#7c5cff)]" :style="{ width: `${item.pct}%` }" />
                    </div>
                  </div>
                </div>
              </div>

              <div class="rounded-2xl border border-violet-100 bg-white p-5">
                <div class="flex items-center gap-2 text-violet-600">
                  <Vote class="h-4 w-4 text-amber-500" />
                  <p class="text-xs font-semibold uppercase tracking-[0.2em]">Letzte Aktivitäten</p>
                </div>
                <ul class="mt-4 space-y-3 text-sm text-slate-600">
                  <li class="flex items-center justify-between">
                    <span class="flex items-center gap-2"><Sparkles class="h-4 w-4 text-violet-400" /> Neue Nominierung in Best New VTuber</span>
                    <span class="text-xs text-slate-400">vor 2 Min.</span>
                  </li>
                  <li class="flex items-center justify-between">
                    <span class="flex items-center gap-2"><Users class="h-4 w-4 text-violet-400" /> 24 Votes in VTuber des Jahres</span>
                    <span class="text-xs text-slate-400">vor 5 Min.</span>
                  </li>
                  <li class="flex items-center justify-between">
                    <span class="flex items-center gap-2"><Award class="h-4 w-4 text-violet-400" /> Clip-Einreichung in Beste Collab</span>
                    <span class="text-xs text-slate-400">vor 18 Min.</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </Card>
    </section>
  </div>
</template>
