---
interface Props {
    page: unknown;
}

const { page } = Astro.props;

const contactBlock = page?.layout?.find(
    (block: unknown) => block && typeof block === 'object' && block.blockType === "contact"
);

const title =
    (contactBlock?.blockType === "contact" && contactBlock.title) ??
    "Kontaktieren Sie uns";

const subtitle =
    (contactBlock?.blockType === "contact" && contactBlock.subtitle) ??
    "Haben Sie Fragen oder möchten Sie eine Fahrt buchen? Wir sind hier, um zu helfen. Füllen Sie das Formular aus oder nutzen Sie die untenstehenden Kontaktinformationen.";
---

<div class="text-center opacity-0 animate-staggerFadeIn">
    <div class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 tracking-tight opacity-0 animate-fadeInUp delay-100">
        {title}
    </div>
    <p class="text-lg text-gray-600 leading-relaxed max-w-2xl mx-auto opacity-0 animate-fadeInUp delay-300">
        {subtitle}
    </p>
</div>

<style is:global>
    @keyframes staggerFadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

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

    .animate-staggerFadeIn {
        animation: staggerFadeIn 0.6s ease-out forwards;
    }

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

    .delay-100 {
        animation-delay: 0.1s;
    }

    .delay-300 {
        animation-delay: 0.3s;
    }
</style>