@props([
    'module',
    'compact' => false,
])

@if ($module->promotion_enabled && $module->promotion_title && $module->promotion_url)
    <div @class([
        'overflow-hidden rounded-2xl bg-gradient-to-br from-navy-900 to-navy-700 text-white shadow-brand',
        'mt-4 p-5' => ! $compact,
        'mt-6 p-5 md:p-6' => $compact,
    ])>
        <div class="flex items-start gap-4">
            <span class="grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-wise-400 text-navy-950">
                <x-icon :name="$module->promotion_icon ?: 'arrow-right'" class="h-5 w-5" />
            </span>
            <div class="min-w-0 flex-1">
                @if ($module->promotion_eyebrow)
                    <p class="text-[11px] font-bold uppercase tracking-[0.16em] text-wise-300">{{ $module->promotion_eyebrow }}</p>
                @endif
                <h3 class="mt-1 font-display font-bold text-white">{{ $module->promotion_title }}</h3>
                @if ($module->promotion_body)
                    <p class="mt-1.5 text-sm leading-relaxed text-navy-100">{{ $module->promotion_body }}</p>
                @endif
                <a href="{{ $module->promotion_url }}" class="mt-4 inline-flex items-center gap-1.5 text-sm font-bold text-wise-300 transition hover:text-white">
                    {{ $module->promotion_label ?: 'Learn more' }} <x-icon name="arrow-right" class="h-4 w-4" />
                </a>
            </div>
        </div>
    </div>
@endif