@php
    /** @var string|null $eyebrow */
    /** @var string $title */
    /** @var string|null $description */
    /** @var string|null $tone */
    $tones = [
        'brand' => 'bg-[linear-gradient(135deg,_rgba(255,255,255,0.98),_rgba(239,246,255,0.92)_48%,_rgba(236,253,245,0.88))]',
        'study' => 'bg-[linear-gradient(135deg,_rgba(255,255,255,0.98),_rgba(239,246,255,0.92)_45%,_rgba(224,242,254,0.88))]',
        'warm' => 'bg-[linear-gradient(135deg,_rgba(255,255,255,0.98),_rgba(255,247,237,0.92)_45%,_rgba(254,249,195,0.78))]',
    ];

    $backgroundClass = $tones[$tone ?? 'brand'] ?? $tones['brand'];
@endphp

<x-t-card class="overflow-hidden border-white/70 {{ $backgroundClass }} p-6 shadow-[0_24px_64px_-44px_rgba(15,23,42,0.35)]">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div class="max-w-2xl">
            @if (! empty($eyebrow))
                <p class="mb-2 text-[11px] font-semibold uppercase tracking-[0.24em] text-neutral-500">{{ $eyebrow }}</p>
            @endif
            <x-t-heading level="3" size="lg" class="mb-1">{{ $title }}</x-t-heading>
            @if (! empty($description))
                <x-t-text class="mb-0 text-neutral-600">{{ $description }}</x-t-text>
            @endif
        </div>
    </div>
</x-t-card>