---
import Layout from '@layouts/Layout.astro';
import Contacts from '@components/contacts/Contacts.astro';
import { authService } from '@/lib/authService';

// Получаем глобальные настройки сайта из PocketBase
const pb = authService.createClientFromRequest(Astro.request);
const siteSettingsFromPB = await pb.collection('site_settings').getFirstListItem('');
const siteUrl = siteSettingsFromPB.site_url;

// Получаем данные страницы из PocketBase
const pageData = await pb.collection('pages').getFirstListItem('slug = "kontakt"');
const title = `${pageData.title} | ${siteSettingsFromPB.site_name}`;
const description = pageData.meta_description;
const canonicalLink = pageData.canonical_url ? pageData.canonical_url : `${siteUrl}/${pageData.slug}`;

// Подготовим данные для отображения на странице
const pageViewData = {
    title: "Kontakt - Berlin Minivan Transfers",
    subtitle: "Haben Sie Fragen oder möchten Sie eine Fahrt buchen? Wir sind hier, um zu helfen."
};

const isAuthenticated = Astro.locals.user ? true : false;
---

<Layout {title} {description} {canonicalLink}>
    <div class="my-12 text-center opacity-0 animate-fadeInUp">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4 leading-tight opacity-0 animate-fadeInUp">
            {pageViewData.title}
        </h1>
        <p class="text-lg text-gray-600 max-w-3xl mx-auto leading-relaxed opacity-0 animate-fadeInUp delay-200">
            {pageViewData.subtitle}
        </p>
    </div>
    <Contacts siteSettings={siteSettingsFromPB} page={pageViewData} />
</Layout>

<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .delay-200 {
        animation-delay: 0.2s;
    }
</style>