{{ if .Site.Params.cta.enable }}
<section class="cta-section">
    <div class="container">
        {{ $angle := .Site.Params.cta.gradient_angle | default 45 }}
        {{ $from := .Site.Params.cta.gradient_from }}
        {{ $to := .Site.Params.cta.gradient_to }}
        <div class="relative rounded-lg overflow-hidden bg-primary-600 cta-gradient"
             style="--gradient-angle: {{ $angle }}; --gradient-from: {{ $from }}; --gradient-to: {{ $to }}">
            <div class="relative text-center max-w-3xl mx-auto px-6 py-10">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">{{ .Site.Params.cta.title }}</h2>
                <p class="text-xl text-primary-100 mb-8">{{ .Site.Params.cta.description }}</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                    {{ with .Site.Params.cta.primary_button }}
                        <a href="{{ .url }}" class="btn bg-white text-primary-600 hover:bg-gray-100">
                            {{ .text }}
                        </a>
                    {{ end }}
                    {{ with .Site.Params.cta.secondary_button }}
                        <a href="{{ .url }}" class="btn border-2 border-white text-white hover:bg-primary-700">
                            {{ .text }}
                        </a>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
</section>
{{ end }}