---
import { sampleOrderItems, paymentMethods, shipping } from '@components/payment/paymentData';
import Layout from '@layouts/Layout.astro';
import HeroSection from '@/components/payment/HeroSection.astro';
import PaymentForm from '@/components/payment/PaymentForm.astro';
import OrderSummary from '@/components/payment/OrderSummary.astro';
import { authService } from '@/lib/authService';

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

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

// Calculate totals
const subtotal = sampleOrderItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
const total = subtotal + shipping;
const bookingNumber = `BER-${Math.floor(10000 + Math.random() * 90000)}`;
---

<Layout {title} {description} {canonicalLink}>
    <HeroSection />

    <!-- Payment Section -->
    <section class="bg-gray-50 py-12 md:py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12 animate-fade-in">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-900">
                    Bestellung abschließen
                </h2>
                <p class="mt-3 text-lg text-gray-600">
                    Ihre Buchungsnummer: {bookingNumber}
                </p>
            </div>

            <div class="flex flex-col lg:flex-row gap-8 lg:gap-12">
                <!-- Payment Form Column -->
                <div class="w-full lg:w-3/5">
                    <PaymentForm {total} {paymentMethods} />
                </div>

                <!-- Order Summary Column -->
                <div class="w-full lg:w-2/5">
                    <OrderSummary
                        items={sampleOrderItems}
                        shipping={shipping}
                        subtotal={subtotal}
                        total={total}
                    />
                </div>
            </div>
        </div>
    </section>
</Layout>

<style>
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    .animate-fade-in {
        animation: fade-in 0.7s ease-out forwards;
    }
</style>