Demo Page Hero code

@props([
    'badge' => null,
    'badgeIcon' => null,
    'title',
    'description' => null,
])

@php
    /*
    | Hero band for demo/reference pages (AI loops, repositories, etc.).
    |
    | Usage:
    |   <x-ui.demo-page-hero
    |       badge="Agent loops"
    |       badge-icon="arrows-clockwise"
    |       title="AI loop demos"
    |       description="Browse sample dashboards..."
    |   >
    |       <x-slot:actions>...</x-slot:actions>
    |   </x-ui.demo-page-hero>
    */
@endphp

<div {{ $attributes->merge(['class' => 'border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900/40']) }}>
    <div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 sm:py-16 lg:px-8">
        @if ($badge)
            <x-ui.badge variant="brand" :icon="$badgeIcon">{{ $badge }}</x-ui.badge>
        @endif

        <h1 class="mt-4 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl dark:text-white">{{ $title }}</h1>

        @if ($description)
            <p class="mt-3 max-w-2xl text-base leading-7 text-gray-600 sm:text-lg dark:text-gray-400">{{ $description }}</p>
        @endif

        @isset($actions)
            <div class="mt-6 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
        @endisset
    </div>
</div>