---
import Layout from '@layouts/Layout.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 = "stornierung"');
const title = `${pageData.title} | ${siteSettings.site_name}`;
const description = pageData.meta_description;
const canonicalLink = pageData.canonical_url ? pageData.canonical_url : `${siteUrl}/${pageData.slug}`;

// Статические данные для политики отмены
const cancellationPolicyData = [
    {
        id: 1,
        title: 'Kostenlose Stornierung',
        iconColor: 'text-green-500',
        content: 'Sie können Ihre Buchung bis zu 24 Stunden vor der geplanten Abholzeit kostenlos stornieren. In diesem Fall erhalten Sie eine vollständige Rückerstattung des bezahlten Betrags.',
    },
    {
        id: 2,
        title: 'Kurzfristige Stornierung',
        iconColor: 'text-amber-500',
        content: 'Bei einer Stornierung zwischen 24 und 4 Stunden vor der Abholzeit wird eine Stornierungsgebühr von 50 % des Gesamtpreises einbehalten. Der Restbetrag wird Ihnen zurückerstattet.',
    },
    {
        id: 3,
        title: 'Sehr kurzfristige Stornierung / Nichterscheinen',
        iconColor: 'text-red-500',
        content: 'Erfolgt die Stornierung weniger als 4 Stunden vor der geplanten Abholung oder bei Nichterscheinen (No-Show), ist keine Rückerstattung möglich. Der volle Betrag wird berechnet, um die für Sie reservierten Ressourcen zu decken.',
    },
    {
        id: 4,
        title: 'So stornieren Sie',
        iconColor: 'text-slate-600',
        content: `Um Ihre Buchung zu stornieren, kontaktieren Sie uns bitte per E-Mail unter service@${siteSettings.domain} oder rufen Sie unsere Service-Hotline an. Bitte halten Sie Ihre Buchungsnummer bereit.`,
    },
];

// Данные для героя
const heroData = {
    title: 'Stornierungsbedingungen',
    subtitle: 'Flexibel bleiben: Alles, was Sie über die Stornierung wissen müssen.',
    backgroundImage: '/images//stornierung/cancellation_hero.avif',
    imageAlt: 'Stornierungsbedingungen für Transfer-Service in Berlin'
};
---

<Layout {title} {description} {canonicalLink}>
    <!-- Hero Section -->
    <section class="relative bg-gray-900 overflow-hidden h-screen md:h-[80vh] flex items-center justify-center">
        <div class="absolute inset-0 z-0 opacity-50">
            <img
                    src={heroData.backgroundImage}
                    alt={heroData.imageAlt}
                    class="w-full h-full object-cover object-top scale-110"
                    loading="eager"
            />
        </div>

        <div class="relative z-10 py-24 px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 animate-fade-in-up">
                {heroData.title}
            </h1>

            <p class="text-xl md:text-2xl text-amber-200 max-w-3xl mx-auto animate-fade-in-up delay-300">
                {heroData.subtitle}
            </p>
        </div>
    </section>

    <!-- Policy Section -->
    <section class="bg-gray-50 py-12 md:py-20">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white p-8 md:p-10 rounded-2xl shadow-lg border border-gray-100 animate-fade-in">
                <h2 class="text-2xl font-bold text-gray-800 border-b pb-4 mb-6">
                    Unsere Stornierungsregeln im Überblick
                </h2>

                <dl class="space-y-8">
                    {cancellationPolicyData.map((section) => (
                            <div class="relative pl-10">
                                <dt class="font-semibold text-gray-900">
                                    <div class={`absolute left-0 top-0 flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 ${section.iconColor}`}>
                                        {section.id === 1 && (
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                        )}
                                        {section.id === 2 && (
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                        )}
                                        {section.id === 3 && (
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                                </svg>
                                        )}
                                        {section.id === 4 && (
                                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                                                </svg>
                                        )}
                                    </div>
                                    {section.title}
                                </dt>
                                <dd class="mt-1 text-gray-600 leading-relaxed">
                                    {section.content}
                                </dd>
                            </div>
                    ))}
                </dl>
            </div>
        </div>
    </section>


</Layout>

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

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

    .animate-fade-in-up {
        animation: fade-in-up 0.8s ease-out forwards;
    }

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

    .delay-300 {
        animation-delay: 0.3s;
        opacity: 0;
        animation-fill-mode: both;
    }
</style>