Abstract Topographic Header code

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

@php
    /*
    | Survey header. Solid colour plus a drafting register, kept intentionally
    | cheap for browsers that struggle with large CSS gradients.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'abstract-topographic-field relative isolate min-h-[100dvh] overflow-hidden bg-gray-950 text-white']) }}
>
    <div class="absolute inset-0 -z-20 bg-gray-950" aria-hidden="true"></div>
    <div class="absolute left-6 top-6 hidden font-mono text-xs uppercase tracking-[0.28em] text-white/38 sm:block" aria-hidden="true">survey / no bitmap</div>
    <div class="absolute bottom-8 right-8 hidden font-mono text-[6rem] font-semibold leading-none text-white/[0.04] lg:block" aria-hidden="true">04</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-[1fr_0.94fr] lg:items-center lg:px-10">
        <div>
            @if ($eyebrow)
                <p class="font-mono text-xs uppercase tracking-[0.34em] text-amber-200/76">{{ $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="relative border-l border-white/16 pl-6 lg:pl-8">
            <div class="absolute -left-px top-0 h-24 w-px bg-amber-200/70"></div>
            <p class="font-mono text-xs uppercase tracking-[0.28em] text-white/45">Survey register</p>
            <div class="mt-8 grid gap-6">
                @foreach ([
                    ['altitude', '112.4', 'line interval'],
                    ['bearing', '034.8', 'section angle'],
                    ['weight', '0kb', 'external media'],
                    ['surface', 'css', 'render mode'],
                ] as [$label, $value, $copy])
                    <div class="grid gap-2 border-t border-white/12 pt-4 text-sm sm:grid-cols-[6.5rem_5rem_1fr]">
                        <p class="font-mono uppercase tracking-[0.18em] text-white/42">{{ $label }}</p>
                        <p class="font-mono text-white">{{ $value }}</p>
                        <p class="text-white/58">{{ $copy }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>