@props([
    'heading' => 'Have a project in mind?',
    'description' => null,
    'primary' => null,
    'secondary' => null,
])

{{--
    Reusable dark CTA banner (PRD 4.25 / 6.9) — the same block on Home, About,
    Services, Portfolio, Blog and Contact, so the site's main conversion
    prompt looks and behaves identically everywhere (PRD 3.31).

    $primary / $secondary are ['label' => string, 'url' => string]. Secondary is
    optional; PRD 4.27 forbids more than two CTA buttons side by side, which is
    why this component exposes exactly two slots rather than an open array.
--}}
@php
    $primary ??= ['label' => "Let's work together", 'url' => route('contact.create')];
@endphp

<section {{ $attributes->merge(['class' => 'section']) }}>
    <div class="container-site">
        <div class="cta-banner text-center p-4 p-md-5" data-reveal>
            <div class="decor-blob decor-blob--md decor-blob--alt" style="top: -20%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,255,255,.14) 0%, transparent 70%);" aria-hidden="true"></div>
            <h2 class="section-title mb-3" style="color: #fff;" data-split-text>{{ $heading }}</h2>

            @if($description)
                <p class="mx-auto mb-4" style="max-width: 620px; color: rgba(255,255,255,.72);">
                    {{ $description }}
                </p>
            @endif

            <div class="d-flex flex-wrap justify-content-center gap-3">
                <a href="{{ $primary['url'] }}" class="btn btn-primary-gradient">{{ $primary['label'] }}</a>

                @if($secondary)
                    <a href="{{ $secondary['url'] }}" class="btn btn-ghost-light">{{ $secondary['label'] }}</a>
                @endif
            </div>
        </div>
    </div>
</section>