<script setup lang="ts">
import { onMounted, ref } from 'vue';
import axios from 'axios';

const isTwitchLive = ref(false);
const isKickLive = ref(false);

const checkLiveStatus = async () => {
    try {
        const { data } = await axios.get('/api/live-status');
        isTwitchLive.value = data.twitch;
        isKickLive.value = data.kick;
    } catch (e) {
        console.error('Status-Check fehlgeschlagen', e);
    }
};

const trackSocial = async (platform: string) => {
    try {
        await axios.post('/api/track-social', { platform });
    } catch (e) {
        console.error('Tracking failed', e);
    }
};

onMounted(() => {
    checkLiveStatus();
    // Alle 5 Minuten im Hintergrund aktualisieren
    setInterval(checkLiveStatus, 300000);
});
</script>

<template>
    <section
        id="find-me"
        class="social-section relative z-30 bg-gray-950/20 py-32"
    >
        <div class="container mx-auto px-6">
            <h2
                class="mb-24 text-center text-5xl font-black tracking-tighter text-white uppercase italic"
            >
                Join the <span class="text-purple-500">Squad</span>
            </h2>

            <div
                class="mx-auto grid max-w-7xl grid-cols-1 gap-8 md:grid-cols-3"
            >
                <a
                    href="https://www.twitch.tv/bratander1ste"
                    target="_blank"
                    @click="trackSocial('twitch')"
                    class="social-card group twitch flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#9146FF] hover:bg-white/10"
                    :class="{ 'live-active-twitch': isTwitchLive }"
                >
                    <div v-if="isTwitchLive" class="live-indicator">
                        <span class="pulse-dot"></span> LIVE
                    </div>

                    <i
                        class="fab fa-twitch text-6xl text-[#9146FF] drop-shadow-[0_0_15px_rgba(145,70,255,0.4)] transition-transform duration-500 group-hover:scale-110"
                    ></i>
                    <div class="text-center">
                        <h4
                            class="mb-2 text-2xl font-black tracking-tight text-white"
                        >
                            TWITCH
                        </h4>
                        <p class="text-sm font-medium text-gray-400">
                            Action jeden Abend live
                        </p>
                    </div>
                </a>

                <a
                    href="#"
                    @click="trackSocial('instagram')"
                    class="social-card group instagram flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#E1306C] hover:bg-white/10"
                >
                    <i
                        class="fab fa-instagram text-6xl text-pink-500 drop-shadow-[0_0_15px_rgba(236,72,153,0.4)] transition-transform duration-500 group-hover:scale-110"
                    ></i>
                    <div class="text-center">
                        <h4
                            class="mb-2 text-2xl font-black tracking-tight text-white"
                        >
                            INSTAGRAM
                        </h4>
                        <p class="text-sm font-medium text-gray-400">
                            News & Giveaways
                        </p>
                    </div>
                </a>

                <a
                    href="https://kick.com/Bratander1ste"
                    target="_blank"
                    @click="trackSocial('kick')"
                    class="social-card group kick flex cursor-pointer flex-col items-center gap-6 rounded-[30px] border border-white/10 bg-white/5 p-8 transition-all duration-500 ease-out hover:border-[#53FC18] hover:bg-white/10"
                    :class="{ 'live-active-kick': isKickLive }"
                >
                    <div v-if="isKickLive" class="live-indicator">
                        <span class="pulse-dot"></span> LIVE
                    </div>

                    <i
                        class="fas fa-bolt text-6xl text-[#53FC18] drop-shadow-[0_0_15px_rgba(83,252,24,0.4)] transition-transform duration-500 group-hover:scale-110"
                    ></i>
                    <div class="text-center">
                        <h4
                            class="mb-2 text-2xl font-black tracking-tight text-[#53FC18]"
                        >
                            KICK
                        </h4>
                        <p class="text-sm font-medium text-gray-400">
                            The home of high stakes
                        </p>
                    </div>
                </a>
            </div>
        </div>
    </section>
</template>

<style scoped>
.social-section {
    perspective: 2000px;
}
.social-card {
    transform-style: preserve-3d;
    position: relative;
}

/* Initiale 3D Lage */
.social-card.twitch {
    transform: rotateY(-10deg) rotateX(5deg);
}
.social-card.kick {
    transform: rotateY(10deg) rotateX(5deg);
}
.social-card:hover {
    transform: rotateY(0deg) rotateX(0deg) translateZ(20px) !important;
}

/* LIVE INDICATOR */
.live-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 0, 0, 0.15);
    border: 1px solid #ff0000;
    color: #ff4d4d;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
    z-index: 50;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background: #ff0000;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }
    70% {
        transform: scale(1);
        opacity: 0.8;
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
    100% {
        transform: scale(0.9);
        opacity: 1;
    }
}

/* LIVE HIGHLIGHTS */
.live-active-twitch {
    border-color: rgba(145, 70, 255, 0.8) !important;
    box-shadow: 0 0 40px rgba(145, 70, 255, 0.2);
    background: rgba(145, 70, 255, 0.05) !important;
}

.live-active-kick {
    border-color: rgba(83, 252, 24, 0.8) !important;
    box-shadow: 0 0 40px rgba(83, 252, 24, 0.2);
    background: rgba(83, 252, 24, 0.05) !important;
}
</style>
