<script setup>
import { Head } from '@inertiajs/vue3';
import { computed, onBeforeUnmount, onMounted } from 'vue';
import About from './Components/About.vue';
import Background from './Components/Background.vue';
import Features from './Components/Features.vue';
import Footer from './Components/Footer.vue';
import Hero from './Components/Hero.vue';
import Join from './Components/Join.vue';
import Nav from './Components/Nav.vue';
import News from './Components/News.vue';
import Realm from './Components/Realm.vue';
import Tweaks from './Components/Tweaks.vue';

const props = defineProps({
    realm: { type: Object, required: true },
    playUrl: { type: String, required: true },
    posts: { type: Array, default: () => [] },
    tweaks: { type: Object, default: () => ({}) },
    registerEndpoint: { type: String, required: true },
    csrfToken: { type: String, required: true },
    auth: { type: Object, default: () => ({}) },
    flash: { type: Object, default: () => ({}) },
});

const pageTitle = computed(() => `${props.realm.server_name || 'MoonWell'} - Лунный Колодец`);
let revealObserver;

onMounted(() => {
    document.documentElement.lang = 'ru';
    revealObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                entry.target.classList.add('is-visible');
                revealObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });

    document.querySelectorAll('.reveal').forEach((el) => revealObserver.observe(el));
});

onBeforeUnmount(() => revealObserver?.disconnect());
</script>

<template>
    <Head>
        <title>{{ pageTitle }}</title>
        <meta name="description" :content="realm.tagline || 'MoonWell - приватный сервер World of Warcraft 3.3.5a'" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
    </Head>

    <Background />
    <Nav :auth="auth" :play-url="playUrl" :realm="realm" />
    <Hero :play-url="playUrl" />
    <Realm :realm="realm" />
    <About />
    <Features />
    <Join :register-endpoint="registerEndpoint" :csrf-token="csrfToken" :auth="auth" :flash="flash" />
    <News :posts="posts" />
    <Footer :play-url="playUrl" />
    <Tweaks :tweaks="tweaks" />
</template>
