@php
    $configs = [
        'indigo' => ['bg' => 'linear-gradient(135deg,var(--news-red) 0%,var(--news-red-dark) 100%)', 'text' => '#fff', 'btn_bg' => '#fff', 'btn_color' => 'var(--news-red)'],
        'dark'   => ['bg' => 'linear-gradient(135deg,#111827 0%,#1f2937 100%)', 'text' => '#fff', 'btn_bg' => 'var(--news-red)', 'btn_color' => '#fff'],
        'light'  => ['bg' => 'linear-gradient(135deg,#f9fafb 0%,#f3f4f6 100%)', 'text' => '#111', 'btn_bg' => 'var(--news-red)', 'btn_color' => '#fff'],
        'white'  => ['bg' => '#fff', 'text' => '#111', 'btn_bg' => 'var(--news-red)', 'btn_color' => '#fff'],
    ];
    $cfg = $configs[$background ?? 'indigo'];
    $fw = $full_width ?? false;
@endphp

<section style="background:{{ $cfg['bg'] }}; {{ $fw ? '' : 'border-radius:16px; margin:32px 0;' }} padding:64px 32px; text-align:center; position:relative; overflow:hidden;">
    {{-- Decorative circles --}}
    <div style="position:absolute; top:-40px; right:-40px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,0.06); pointer-events:none;"></div>
    <div style="position:absolute; bottom:-60px; left:-30px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.04); pointer-events:none;"></div>

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

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

        @if(!empty($button_text) && !empty($button_url))
        <a href="{{ $button_url }}"
           style="display:inline-flex; align-items:center; gap:8px; padding:14px 36px; background:{{ $cfg['btn_bg'] }}; color:{{ $cfg['btn_color'] }}; font-weight:800; font-size:15px; border-radius:8px; text-decoration:none; box-shadow:0 4px 24px rgba(0,0,0,0.18); transition:all 0.2s; letter-spacing:0.01em;"
           onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 32px rgba(0,0,0,0.25)'"
           onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 24px rgba(0,0,0,0.18)'">
            {{ $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>
