Infra Panel code

@php
    /*
    | Animated clone of the landing-page infrastructure panel. Renders three
    | columns — Network, Compute and Data — on a grid backdrop. Each column
    | reveals in a stagger as the panel scrolls into view, and the live status
    | indicators (Active / Enabled / Verified) pulse gently.
    |
    | This is a self-contained marketing visual with fixed sample content, mirroring
    | the static section it clones. Honours reduced-motion via the shared
    | data-reveal / animate-dot-pulse utilities.
    |
    | Usage:
    |   <x-ui.infra-panel />
    */
@endphp

<div {{ $attributes->merge(['class' => 'relative overflow-hidden rounded-3xl border border-gray-200 bg-white p-5 shadow-sm sm:p-8 dark:border-gray-800 dark:bg-gray-900 bg-grid']) }}>
    <div class="relative grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {{-- Network --}}
        <div class="rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur dark:border-gray-700 dark:bg-gray-950/80" data-reveal="up">
            <p class="flex items-center gap-2 text-xs font-medium text-gray-400"><x-ui.icon name="globe-simple" size="sm" /> Network</p>
            <div class="mt-3 rounded-xl border border-gray-200 p-3 dark:border-gray-800">
                <p class="text-sm font-semibold text-gray-900 dark:text-white">Edge network</p>
                <ul class="mt-2 space-y-1.5 text-xs text-gray-500 dark:text-gray-400">
                    <li class="flex items-center justify-between"><span class="flex items-center gap-1.5"><x-ui.icon name="shield-check" size="sm" /> DDoS protection</span><span class="flex items-center gap-1.5 text-green-600 dark:text-green-400"><span class="h-1.5 w-1.5 rounded-full bg-green-500 animate-dot-pulse"></span> Active</span></li>
                    <li class="flex items-center justify-between"><span class="flex items-center gap-1.5"><x-ui.icon name="globe" size="sm" /> CDN</span><span class="flex items-center gap-1.5 text-green-600 dark:text-green-400"><span class="h-1.5 w-1.5 rounded-full bg-green-500 animate-dot-pulse" style="animation-delay: 0.4s"></span> Enabled</span></li>
                    <li class="flex items-center justify-between"><span class="flex items-center gap-1.5"><x-ui.icon name="lightning" size="sm" /> Edge caching</span><span class="flex items-center gap-1.5 text-green-600 dark:text-green-400"><span class="h-1.5 w-1.5 rounded-full bg-green-500 animate-dot-pulse" style="animation-delay: 0.8s"></span> Enabled</span></li>
                </ul>
            </div>
            <div class="mt-3 rounded-xl border border-gray-200 p-3 dark:border-gray-800">
                <p class="text-sm font-semibold text-gray-900 dark:text-white">Domains</p>
                <p class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span class="flex items-center gap-1.5"><x-ui.icon name="link-simple" size="sm" /> Custom domains</span><span class="text-green-600 dark:text-green-400">Verified</span></p>
                <p class="mt-1 text-xs text-gray-400">beep.today</p>
            </div>
        </div>

        {{-- Compute --}}
        <div class="rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur dark:border-gray-700 dark:bg-gray-950/80" data-reveal="up" data-reveal-delay="120">
            <p class="flex items-center gap-2 text-xs font-medium text-gray-400"><x-ui.icon name="map-pin" size="sm" /> US East (Ohio)</p>
            @foreach ([
                ['cube', 'App cluster', 'Compute', 'Flex 512 MiB'],
                ['queue', 'Managed queue', 'Memory', '256 MiB'],
                ['hard-drives', 'Worker cluster', 'Compute', 'Flex 512 MiB'],
            ] as [$icon, $name, $k, $v])
                <div class="mt-3 rounded-xl border border-gray-200 p-3 dark:border-gray-800">
                    <p class="flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-white"><x-ui.icon :name="$icon" size="sm" class="text-gray-400" /> {{ $name }}</p>
                    <p class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>{{ $k }}</span><span class="font-medium text-gray-700 dark:text-gray-200">{{ $v }}</span></p>
                </div>
            @endforeach
        </div>

        {{-- Data --}}
        <div class="rounded-2xl border border-gray-200 bg-white/90 p-4 shadow-sm backdrop-blur dark:border-gray-700 dark:bg-gray-950/80" data-reveal="up" data-reveal-delay="240">
            <p class="flex items-center gap-2 text-xs font-medium text-gray-400"><x-ui.icon name="database" size="sm" /> Data services</p>
            <div class="mt-3 rounded-xl border border-gray-200 p-3 dark:border-gray-800">
                <p class="text-sm font-semibold text-gray-900 dark:text-white">Beep <span class="font-normal text-gray-400">· Postgres</span></p>
                <p class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Compute</span><span class="font-medium text-gray-700 dark:text-gray-200">Flex 1 GiB</span></p>
            </div>
            <div class="mt-3 rounded-xl border border-gray-200 p-3 dark:border-gray-800">
                <p class="flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-white"><x-ui.icon name="lightning" size="sm" class="text-brand-500" /> Cache <span class="font-normal text-gray-400">beep_main</span></p>
                <p class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Storage</span><span class="font-medium text-gray-700 dark:text-gray-200">250 MB</span></p>
            </div>
            <div class="mt-3 rounded-xl border border-gray-200 p-3 dark:border-gray-800">
                <p class="flex items-center gap-2 text-sm font-semibold text-gray-900 dark:text-white"><x-ui.icon name="hard-drive" size="sm" class="text-gray-400" /> Global storage</p>
                <p class="mt-2 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400"><span>Default</span><span class="text-green-600 dark:text-green-400">Private</span></p>
            </div>
        </div>
    </div>
</div>