Abstract Terminal Header code

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Instrument header. A dense but quiet command surface, built from linework
    | and tabular rows instead of animated background effects.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'abstract-terminal-field relative isolate min-h-[100dvh] overflow-hidden bg-gray-950 text-white']) }}
>
    <div class="absolute inset-x-0 top-0 -z-10 h-px bg-white/18" aria-hidden="true"></div>
    <div class="absolute bottom-10 right-8 hidden font-mono text-[6rem] font-semibold leading-none text-white/[0.035] lg:block" aria-hidden="true">03</div>

    <div class="mx-auto grid w-full max-w-7xl gap-12 px-6 py-24 sm:px-8 lg:min-h-[100dvh] lg:grid-cols-[0.82fr_1.18fr] lg:items-center lg:px-10">
        <div>
            @if ($eyebrow)
                <p class="font-mono text-xs uppercase tracking-[0.34em] text-amber-200/72">{{ $eyebrow }}</p>
            @endif

            @if ($title)
                <{{ $as }} class="mt-6 max-w-4xl font-serif text-4xl font-medium leading-[0.94] tracking-[-0.035em] text-white text-balance sm:text-6xl lg:text-7xl">{{ $title }}</{{ $as }}>
            @endif

            @if ($description)
                <p class="mt-6 max-w-xl text-base leading-7 text-white/66 text-pretty sm:text-lg">{{ $description }}</p>
            @endif

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

        <div class="border-y border-white/14 py-5">
            <div class="mb-5 flex items-center justify-between gap-4 font-mono text-xs uppercase tracking-[0.22em] text-white/45">
                <span>instrument panel</span>
                <span>no-media</span>
            </div>
            <div class="grid gap-px bg-white/12">
                @foreach ([
                    ['css', 'grid register', 'ready', '18.7ms'],
                    ['mask', 'solid field', 'idle', '04.2ms'],
                    ['copy', 'display rail', 'locked', '11.6ms'],
                    ['route', 'abstract surface', 'mounted', '22.9ms'],
                ] as [$type, $label, $state, $time])
                    <div class="grid bg-gray-950/92 text-sm sm:grid-cols-[4.5rem_1fr_6rem_5rem]">
                        <span class="border-b border-white/10 px-3 py-3 font-mono text-white/42 sm:border-b-0 sm:border-r sm:py-4">{{ $type }}</span>
                        <span class="border-b border-white/10 px-3 py-3 text-white/82 sm:border-b-0 sm:border-r sm:py-4">{{ $label }}</span>
                        <span class="border-b border-white/10 px-3 py-3 font-mono text-amber-200/70 sm:border-b-0 sm:border-r sm:py-4">{{ $state }}</span>
                        <span class="px-3 py-4 text-right font-mono text-white/42">{{ $time }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>