Abstract Ribbon Header code

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

@php
    /*
    | Editorial ribbon header. The heavy rail is kept outside the readable
    | content plane so the section never masks headings or table rows.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'relative isolate min-h-[100dvh] overflow-hidden bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-white']) }}
>
    <div class="absolute inset-y-0 left-0 hidden w-[15vw] min-w-36 bg-gray-950 dark:bg-white lg:block" aria-hidden="true"></div>
    <div class="absolute left-[15vw] top-0 hidden h-full w-px bg-gray-950/16 dark:bg-white/16 lg:block" aria-hidden="true"></div>
    <div class="absolute bottom-0 right-0 hidden h-32 w-[42vw] border-t border-gray-950/14 bg-amber-300/70 dark:border-white/14 dark:bg-amber-300/80 lg:block" aria-hidden="true"></div>
    <div class="absolute bottom-8 left-6 hidden font-mono text-[7rem] font-semibold leading-none text-white/[0.08] lg:block" aria-hidden="true">02</div>

    <div class="grid w-full gap-12 px-6 py-24 sm:px-8 lg:min-h-[100dvh] lg:grid-cols-[minmax(32rem,0.9fr)_minmax(34rem,1fr)] lg:items-center lg:gap-16 lg:pl-[20vw] lg:pr-[8vw]">
        <div>
            @if ($eyebrow)
                <p class="font-mono text-xs uppercase tracking-[0.34em] text-gray-500 dark:text-gray-400">{{ $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-gray-950 text-balance dark:text-white sm:text-6xl lg:text-7xl">{{ $title }}</{{ $as }}>
            @endif

            @if ($description)
                <p class="mt-6 max-w-xl text-base leading-7 text-gray-600 text-pretty dark:text-gray-300 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">
            <div class="mb-8 flex items-center gap-4 font-mono text-xs uppercase tracking-[0.22em] text-gray-500 dark:text-gray-400">
                <span class="h-px flex-1 bg-gray-950/18 dark:bg-white/18"></span>
                <span>ribbon field</span>
            </div>

            <div class="grid border-y border-gray-950/18 bg-gray-50/75 text-sm dark:border-white/18 dark:bg-gray-950/75">
                @foreach ([
                    ['01', 'Masthead', 'left rail, no media'],
                    ['02', 'Register', 'content stays clear'],
                    ['03', 'Proof', 'tabular hierarchy'],
                    ['04', 'Exit', 'anchored action row'],
                ] as [$num, $label, $copy])
                    <div class="grid grid-cols-[4rem_1fr] border-b border-gray-950/12 last:border-b-0 dark:border-white/12">
                        <div class="border-r border-gray-950/12 px-4 py-4 font-mono text-xs text-gray-500 dark:border-white/12 dark:text-gray-400">{{ $num }}</div>
                        <div class="px-4 py-4">
                            <p class="font-semibold text-gray-950 dark:text-white">{{ $label }}</p>
                            <p class="mt-1 text-gray-600 dark:text-gray-400">{{ $copy }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>