@php
    $configs = [
        'indigo' => ['bg' => 'linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%)', 'text' => '#fff', 'btn_bg' => '#fff', 'btn_color' => '#4f46e5'],
        'dark'   => ['bg' => 'linear-gradient(135deg,#0f172a 0%,#1e293b 100%)', 'text' => '#fff', 'btn_bg' => '#6366f1', 'btn_color' => '#fff'],
        'light'  => ['bg' => 'linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%)', 'text' => '#0f172a', 'btn_bg' => '#4f46e5', 'btn_color' => '#fff'],
        'white'  => ['bg' => '#fff', 'text' => '#0f172a', 'btn_bg' => '#4f46e5', 'btn_color' => '#fff'],
    ];
    $cfg = $configs[$background ?? 'indigo'];
    $fw = $full_width ?? false;
@endphp

<section style="background:{{ $cfg['bg'] }}; {{ $fw ? '' : 'border-radius:20px; margin:40px 0;' }} padding:72px 32px; text-align:center; position:relative; overflow:hidden;">
    <div style="position:absolute; top:-50px; right:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.07); pointer-events:none;"></div>
    <div style="position:absolute; bottom:-70px; left:-40px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,0.05); pointer-events:none;"></div>

    <div style="position:relative;">
        @if(!empty($title))
        <h2 style="font-size:2.2rem; font-weight:900; color:{{ $cfg['text'] }}; margin:0 0 14px; line-height:1.2; letter-spacing:-0.02em;">
            {{ $title }}
        </h2>
        @endif

        @if(!empty($description))
        <p style="font-size:1.05rem; color:{{ $cfg['text'] }}; opacity:0.75; margin:0 auto 36px; max-width:540px; line-height:1.75;">
            {{ $description }}
        </p>
        @endif

        @if(!empty($button_text) && !empty($button_url))
        <a href="{{ $button_url }}"
           style="display:inline-flex; align-items:center; gap:8px; padding:15px 40px; background:{{ $cfg['btn_bg'] }}; color:{{ $cfg['btn_color'] }}; font-weight:800; font-size:15px; border-radius:10px; text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,0.15); transition:all 0.2s;"
           onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 10px 36px rgba(0,0,0,0.22)'"
           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 24px rgba(0,0,0,0.15)'">
            {{ $button_text }}
            <svg style="width:16px; height:16px;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
        </a>
        @endif
    </div>
</section>
