{{ 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-400 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.secondary_button  }}
                    <a href="{{ .url | default "#" }}"
                       class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out bg-primary-400 text-white hover:bg-primary-400 hover:scale-105{{ end }}"
                       {{ if .open_tab }}target="_blank" rel="noopener noreferrer"{{ end }}>
                        {{ .text | default "Get Started" }}
                    </a>
                {{ end }}

                {{ with .Site.Params.cta.primary_button}}
                    <a href="{{ .url | default "#" }}"
                       class="{{ with .mobileClass }}{{ . }}{{ else }}block text-center px-6 py-3 rounded-lg font-bold transition duration-200 ease-in-out border-2 text-primary-400 border-primary-400 hover:border-primary-400 hover:text-primary-400 hover:scale-105{{ end }}"
                       {{ if .open_tab }}target="_blank" rel="noopener noreferrer"{{ end }}>
                        {{ .text | default "Sign in" }}
                    </a>
                {{ end }}                   
            </div>
        </div>
    </div>
</section>
{{ end }}
