Abstract Grid Header code

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

@php
    /*
    | Blueprint ledger header. It keeps the page on solid colour and uses only
    | cheap borders/rows for structure. Optional `motion` (`none`|`pulse`|
    | `bounce`, default `none`) adds a staggered tactile cell animation;
    | `speed` (0.5–2.5, default 1) tunes tempo. Honours prefers-reduced-motion.
    */
    $motion = in_array($motion, ['pulse', 'bounce'], true) ? $motion : 'none';
    $speed = max(0.5, min(2.5, round((float) $speed, 2)));
@endphp

<section
    {{ $attributes->merge(['class' => 'abstract-grid-field relative isolate min-h-[100dvh] overflow-hidden bg-gray-950 text-white']) }}
>
    <div class="pointer-events-none absolute inset-y-0 left-[8vw] hidden w-px bg-white/14 lg:block" aria-hidden="true"></div>
    <div class="pointer-events-none absolute inset-y-0 right-[18vw] hidden w-px bg-white/10 lg:block" aria-hidden="true"></div>
    <div class="pointer-events-none absolute left-6 top-6 font-mono text-[0.68rem] uppercase tracking-[0.32em] text-white/38 sm:left-8 lg:left-10" aria-hidden="true">BG-01 / ledger</div>
    <div class="pointer-events-none absolute bottom-8 right-6 hidden font-mono text-[8rem] font-semibold leading-none text-white/[0.035] lg:block" aria-hidden="true">01</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.74fr_1.26fr] lg:items-center lg:px-10">
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="font-mono text-xs uppercase tracking-[0.34em] text-amber-200/78">{{ $eyebrow }}</p>
            @endif

            @if ($title)
                <{{ $as }} class="mt-6 font-serif text-4xl font-medium leading-[0.92] 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="relative min-h-[34rem] border-y border-white/14 py-8">
            <div
                class="grid h-full min-h-[28rem] grid-cols-12 grid-rows-6 border-l border-t border-white/12"
                data-grid-motion="{{ $motion }}"
                style="--grid-motion-speed: {{ $speed }}"
            >
                @for ($row = 0; $row < 6; $row++)
                    @for ($col = 0; $col < 12; $col++)
                        <div
                            class="abstract-grid-cell border-b border-r border-white/[0.075]"
                            style="--grid-cell-i: {{ ($row * 12) + $col }}"
                        ></div>
                    @endfor
                @endfor
            </div>

            <div class="absolute left-0 top-8 -translate-y-full font-mono text-xs uppercase tracking-[0.22em] text-white/45">Ledger grid</div>
            <div class="absolute bottom-10 left-5 max-w-64 border-l border-amber-200/55 pl-4">
                <p class="font-mono text-xs uppercase tracking-[0.24em] text-amber-100/80">Register</p>
                <p class="mt-3 text-sm leading-6 text-white/66">A disciplined lead surface for operational copy, route markers and calls to action.</p>
            </div>
            <div class="absolute right-4 top-16 grid w-48 gap-px border border-white/16 bg-white/10 font-mono text-[0.68rem] uppercase tracking-[0.18em] text-white/58">
                @foreach ([['x', '08.4'], ['y', '31.7'], ['unit', 'rem'], ['mode', 'css']] as [$label, $value])
                    <div class="grid grid-cols-2 bg-gray-950/86">
                        <span class="border-r border-white/10 px-3 py-2">{{ $label }}</span>
                        <span class="px-3 py-2 text-white/80">{{ $value }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>