<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
</script>

<template>
    <section class="relative z-10 py-12 px-6">
        <div class="container mx-auto max-w-6xl">
            <div
                class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0f172a]/50 p-8 shadow-2xl backdrop-blur-sm sm:p-12"
            >
                <div
                    class="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-purple-500/20 blur-[80px]"
                ></div>
                <div
                    class="absolute -bottom-24 -left-24 h-48 w-48 rounded-full bg-blue-500/20 blur-[80px]"
                ></div>

                <div class="relative flex flex-col items-center justify-between gap-8 text-center md:flex-row md:text-left">
                    <div class="max-w-2xl">
                        <h2 class="mb-4 text-3xl font-black italic tracking-tight text-white md:text-4xl">
                            <span class="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">NEU:</span> DAS LEADERBOARD
                        </h2>
                        <p class="text-lg text-gray-300">
                            Miss dich mit der Community, sammle Punkte und klettere an die Spitze.
                            Wer wird der ultimative Bratan?
                        </p>
                    </div>

                    <div class="flex-shrink-0">
                        <Link
                            href="/leaderboard"
                            class="group relative inline-flex items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-purple-500 to-blue-500 p-1 font-bold text-white transition-all duration-300 hover:scale-105 hover:shadow-[0_0_2rem_-0.5rem_#a855f7]"
                        >
                            <span class="relative rounded-full bg-[#0f172a] px-8 py-4 transition-all duration-300 group-hover:bg-transparent">
                                Zum Leaderboard <i class="fa-solid fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
                            </span>
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
