{{-- CTA Section --}}
<section class="section-divider cta-section relative py-16 sm:py-32 pb-24 sm:pb-40 px-4 sm:px-6 lg:px-8 overflow-hidden">
    <!-- Dark gradient background -->
    <div class="absolute inset-0 bg-gradient-to-b from-[hsl(var(--border)/0.3)] via-transparent to-transparent">
    </div>

    <!-- Decorative circles -->
    <div
        class="cta-deco-circle absolute top-16 right-[10%] w-32 h-32 rounded-full border border-[hsl(var(--border)/0.3)]">
    </div>
    <div class="cta-deco-circle absolute top-20 right-[8%] w-20 h-20 rounded-full border border-[hsl(var(--border)/0.2)]"
        style="animation-delay: 1s;"></div>
    <div class="cta-deco-circle absolute bottom-20 left-[6%] w-16 h-16 rounded-full border border-[hsl(var(--border)/0.2)]"
        style="animation-delay: 0.5s;"></div>
    <div class="cta-deco-dot absolute bottom-24 left-[8%] w-3 h-3 rounded-full bg-[hsl(var(--primary)/0.3)]"></div>
    <div class="cta-deco-dot absolute top-1/2 right-[5%] w-4 h-4 rounded-full bg-[hsl(var(--primary)/0.2)]"
        style="animation-delay: 1.5s;"></div>
    <div class="cta-deco-dot absolute top-1/3 left-[4%] w-5 h-5 rounded-full border-2 border-[hsl(var(--border)/0.2)]"
        style="animation-delay: 0.8s;"></div>

    <div class="relative max-w-4xl mx-auto text-center">
        <!-- Label -->
        <span class="section-badge">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z"
                    clip-rule="evenodd" />
            </svg>
            {{ $frontSetting->cta_badge ?? 'Build your dream website today' }}
        </span>

        <!-- Heading -->
        <h2 class="section-title text-anime max-w-3xl mx-auto">
            {{ $frontSetting->call_to_action_title ?? 'Ready to Build Something Unique In Easy Steps?' }}
        </h2>

        @if ($frontSetting->call_to_action_description ?? false)
            <p class="section-subtitle max-w-2xl mx-auto">
                {{ $frontSetting->call_to_action_description }}
            </p>
        @endif

        <!-- Stats -->
        @if (isset($frontSetting->call_to_action_widgets) && count($frontSetting->call_to_action_widgets) > 0)
            <div class="grid grid-cols-1 sm:grid-cols-{{ count($frontSetting->call_to_action_widgets) }} gap-6 sm:gap-10 mb-14 max-w-2xl mx-auto"
                style="margin-top: 2.5rem;">
                @foreach ($frontSetting->call_to_action_widgets as $callToActionWidget)
                    <div class="cta-stat">
                        <p class="text-xl lg:text-2xl font-bold mb-1.5" style="color: hsl(var(--foreground) / 0.9)">
                            {{ $callToActionWidget['value'] }}</p>
                        <p class="text-[11px] font-medium uppercase tracking-[0.12em] flex items-center justify-center gap-1.5"
                            style="color: hsl(var(--muted-foreground))">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor"
                                style="color: hsl(var(--muted-foreground))" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 13l4 4L19 7" />
                            </svg>
                            {{ $callToActionWidget['title'] }}
                        </p>
                    </div>
                @endforeach
            </div>
        @endif

        <!-- Email Input -->
        <div class="cta-email-box max-w-xl mx-auto mb-5">
            {{ html()->form('POST', route('front.call-to-action'))->class(['ajax-form'])->id('callToAction')->open() }}
            <div
                class="form-group flex flex-col sm:flex-row items-center bg-[hsl(var(--card))] rounded-2xl sm:rounded-full shadow-lg shadow-black/10 border border-[hsl(var(--border))] p-3 sm:p-2 sm:pl-5 gap-3 sm:gap-0">
                <div class="flex items-center flex-1 w-full sm:w-auto">
                    <svg class="w-5 h-5 flex-shrink-0 mr-3" fill="none" stroke="currentColor"
                        style="color: hsl(var(--muted-foreground))" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    <input type="email" id="action_email" name="action_email"
                        placeholder="{{ $frontSetting->call_to_action_email_text ?? 'Enter email to get started' }}"
                        class="form-control flex-1 w-full bg-transparent text-foreground placeholder-[hsl(var(--muted-foreground))] text-sm outline-none py-2">
                </div>
                <button type="submit" onclick="callToAction();return false;"
                    class="btn-primary rounded-full text-sm px-7 py-3 flex-shrink-0 w-full sm:w-auto justify-center">
                    {{ $frontSetting->call_to_action_submit_button_text ?? 'Join Now' }}
                </button>
            </div>
            <div id="alert"></div>
            {{ html()->form()->close() }}
        </div>

        <!-- Privacy note -->
        <p class="text-xs text-muted-foreground flex items-center justify-center gap-1.5">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                    d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            {{ $frontSetting->call_to_action_no_email_sell_text ?? "We don't share or sell your email address publicly" }}
        </p>
    </div>
</section>