Abstract Blueprint Header code

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

@php
    /*
    | Drafting blueprint header. A framed technical drawing built from borders,
    | dimension rails and registration ticks. No bitmap media, no animation —
    | just solid fills and static linework in the accent (blueprint) tint.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'abstract-blueprint-field relative isolate min-h-[100dvh] overflow-hidden bg-gray-950 text-white']) }}
>
    <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-accent-300/30" aria-hidden="true"></div>
    <div class="pointer-events-none absolute left-6 top-6 font-mono text-[0.68rem] uppercase tracking-[0.32em] text-accent-200/60 sm:left-8 lg:left-10" aria-hidden="true">BG-05 / blueprint</div>
    <div class="pointer-events-none absolute bottom-8 right-6 hidden font-mono text-[8rem] font-semibold leading-none text-accent-300/[0.05] lg:block" aria-hidden="true">05</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.78fr_1.22fr] lg:items-center lg:px-10">
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="font-mono text-xs uppercase tracking-[0.34em] text-accent-300/80">{{ $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">
            <div class="mb-6 flex items-center justify-between gap-4 font-mono text-xs uppercase tracking-[0.22em] text-accent-200/55">
                <span>drawing 05-A</span>
                <span>scale 1:1</span>
            </div>

            <div class="relative border border-accent-300/25 bg-accent-500/[0.04] p-10 sm:p-14">
                {{-- Registration / crop ticks at each corner. --}}
                <span class="pointer-events-none absolute -left-px -top-px h-5 w-5 border-l-2 border-t-2 border-accent-300/60" aria-hidden="true"></span>
                <span class="pointer-events-none absolute -right-px -top-px h-5 w-5 border-r-2 border-t-2 border-accent-300/60" aria-hidden="true"></span>
                <span class="pointer-events-none absolute -bottom-px -left-px h-5 w-5 border-b-2 border-l-2 border-accent-300/60" aria-hidden="true"></span>
                <span class="pointer-events-none absolute -bottom-px -right-px h-5 w-5 border-b-2 border-r-2 border-accent-300/60" aria-hidden="true"></span>

                {{-- Plotted part: two solid blocks with a centre line. --}}
                <div class="relative min-h-[16rem]">
                    <div class="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-accent-300/20" aria-hidden="true"></div>
                    <div class="grid h-full grid-cols-2 gap-6">
                        <div class="border border-accent-300/35 bg-accent-500/10"></div>
                        <div class="border border-dashed border-accent-300/40 bg-accent-500/[0.06]"></div>
                    </div>

                    {{-- Horizontal dimension rail with end ticks and a measurement. --}}
                    <div class="absolute -bottom-7 left-0 right-0 flex items-center gap-2" aria-hidden="true">
                        <span class="h-3 w-px bg-accent-300/55"></span>
                        <span class="h-px flex-1 bg-accent-300/45"></span>
                        <span class="font-mono text-[0.68rem] uppercase tracking-[0.2em] text-accent-200/75">128.0 rem</span>
                        <span class="h-px flex-1 bg-accent-300/45"></span>
                        <span class="h-3 w-px bg-accent-300/55"></span>
                    </div>
                </div>
            </div>

            {{-- Drawing schedule, tabular like the rest of the set. --}}
            <div class="mt-12 grid border-y border-accent-300/20 font-mono text-[0.7rem] uppercase tracking-[0.16em] text-white/60">
                @foreach ([
                    ['ref', 'A-05'],
                    ['layer', 'linework'],
                    ['tolerance', '±0.0px'],
                    ['media', 'none'],
                ] as [$label, $value])
                    <div class="grid grid-cols-[7rem_1fr] border-b border-accent-300/12 last:border-b-0">
                        <span class="border-r border-accent-300/12 px-4 py-3 text-accent-200/55">{{ $label }}</span>
                        <span class="px-4 py-3 text-white/82">{{ $value }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>