Capability code

@props([
    'icon' => 'sparkle',
    'title',
])

@php
    /*
    | Capability panel: a small icon + title, a line of copy, and a product
    | mockup in the `media` slot — the "feature + real UI" treatment used on
    | Laravel Cloud / Stripe capability grids. Designed to sit in a 2-up grid.
    |
    | Usage:
    |   <x-ui.capability icon="rocket-launch" title="Deploy in seconds">
    |       Connect a repo and ship — no CLI required.
    |       <x-slot:media>…mockup…</x-slot:media>
    |   </x-ui.capability>
    */
@endphp

<div {{ $attributes->merge(['class' => 'flex flex-col']) }}>
    <div class="flex items-center gap-2.5">
        <x-ui.icon :name="$icon" weight="bold" size="lg" class="text-gray-400 dark:text-gray-500" />
        <h3 class="text-lg font-semibold tracking-tight text-gray-900 dark:text-white">{{ $title }}</h3>
    </div>

    <div class="mt-3 max-w-md text-sm leading-relaxed text-gray-600 dark:text-gray-400">
        {{ $slot }}
    </div>

    @isset($media)
        <div class="relative mt-8 flex-1">
            {{ $media }}
        </div>
    @endisset
</div>