@php
    $icon = $icon ?? 'sparkles';
    $href = $href ?? null;
    $cta = $cta ?? null;
    $secondaryHref = $secondaryHref ?? null;
    $secondaryCta = $secondaryCta ?? null;
    $wrapperClass = $wrapperClass ?? '';
@endphp

<div @class([
    'flex flex-col items-center justify-center rounded-[14px] border border-dashed border-border/60 bg-foreground/[0.02] px-4 py-7 text-center',
    $wrapperClass,
])>
    <span class="mb-2 flex h-10 w-10 items-center justify-center rounded-xl border border-primary/15 bg-primary/8 text-primary">
        <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
    </span>
    <p class="text-sm font-semibold tracking-[-0.02em] text-foreground">{{ $title }}</p>
    <p class="mt-1 max-w-[19rem] text-xs leading-relaxed text-foreground/55">{{ $body }}</p>
    @if (($href && $cta) || ($secondaryHref && $secondaryCta))
        <div class="mt-3 flex flex-wrap items-center justify-center gap-2">
            @if ($href && $cta)
                <a
                    href="{{ $href }}"
                    wire:navigate
                    class="inline-flex items-center gap-1 rounded-full border border-primary/25 bg-primary/10 px-3 py-1.5 text-[11px] font-semibold text-primary ios-transition-fast ios-press hover:bg-primary/15"
                >
                    {{ $cta }}
                    <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
                </a>
            @endif
            @if ($secondaryHref && $secondaryCta)
                <a
                    href="{{ $secondaryHref }}"
                    wire:navigate
                    class="inline-flex items-center gap-1 rounded-full border border-border/70 bg-background/80 px-3 py-1.5 text-[11px] font-semibold text-foreground/70 ios-transition-fast ios-press hover:border-border hover:text-foreground"
                >
                    {{ $secondaryCta }}
                    <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
                </a>
            @endif
        </div>
    @endif
</div>