---
import type { CtaSectionProps } from '@/types/globalInterfaces';

const {
    title = "Buchen Sie jetzt Ihren Transfer",
    subtitle = "Schnell, sicher und ohne Stress – wir bringen Sie pünktlich ans Ziel.",
    buttonText = "Sofortanfrage stellen →",
    href = "/kontakt"
} = Astro.props as CtaSectionProps;
---

<!-- CTA -->
<section class="relative bg-gradient-to-r from-blue-600 to-indigo-700 rounded-3xl overflow-hidden text-white text-center py-12 px-8 mt-12 mb-12 opacity-0 animate-fadeInUp delay-700">
    <div class="absolute inset-0 opacity-10">
        <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <defs>
                <pattern
                        id="grid"
                        width="40"
                        height="40"
                        patternUnits="userSpaceOnUse"
                >
                    <path
                            d="M 40 0 L 0 0 0 40"
                            fill="none"
                            stroke="white"
                            stroke-width="1"
                    />
                </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid)" />
        </svg>
    </div>

    <div class="relative z-10">
        <h2 class="text-3xl md:text-4xl font-bold mb-4">
            {title}
        </h2>
        <p class="text-lg mb-8 max-w-2xl mx-auto opacity-90">
            {subtitle}
        </p>
        <a
                href={href}
                class="cta-button inline-block bg-white text-blue-700 font-semibold px-8 py-4 rounded-xl shadow-lg transition-all duration-300"
        >
            {buttonText}
        </a>
    </div>
</section>

<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes buttonHover {
        to {
            transform: scale(1.05);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
        }
    }

    @keyframes buttonTap {
        to {
            transform: scale(0.95);
        }
    }

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

    .delay-700 {
        animation-delay: 0.7s;
    }

    .cta-button {
        transform: scale(1);
        transition: all 0.3s ease;
    }

    .cta-button:hover {
        animation: buttonHover 0.3s ease forwards;
    }

    .cta-button:active {
        animation: buttonTap 0.1s ease forwards;
    }
</style>