@php
    // Error views render outside the normal controller flow, so there is no
    // $seo object and SiteComposer's data is not guaranteed. Everything here
    // is either self-contained or falls back to config().
    $seo = new \App\Services\Seo\SeoMetaData(
        title: 'Page not found — '.config('app.name'),
        description: 'The page you were looking for does not exist.',
        robots: 'noindex, follow',
    );
@endphp

<x-layout :seo="$seo">
    <section class="section bg-pattern-grid" style="background: var(--gradient-white-to-purple);">
        <div class="container-site">
            <div class="text-center mx-auto py-5" style="max-width: 620px;">
                {{-- Illustration is inline SVG rather than an image file: it is a
                     handful of shapes, it inherits the theme colours from CSS
                     variables, and it costs no extra request on a page whose
                     whole job is to load fast and get the visitor moving again
                     (PRD 4.19). --}}
                <svg viewBox="0 0 240 140" class="mb-4" style="width: min(280px, 70%); height: auto;" role="img" aria-label="Page not found illustration">
                    <defs>
                        <linearGradient id="e404" x1="0" y1="0" x2="1" y2="1">
                            <stop offset="0%" stop-color="#7C3AED"/>
                            <stop offset="100%" stop-color="#6D28D9"/>
                        </linearGradient>
                    </defs>
                    <circle cx="120" cy="70" r="58" fill="#F5F1FF"/>
                    <text x="120" y="92" text-anchor="middle" font-size="58" font-weight="700" fill="url(#e404)" font-family="system-ui, sans-serif">404</text>
                    <circle cx="42" cy="34" r="6" fill="#7C3AED" opacity=".35"/>
                    <circle cx="205" cy="46" r="4" fill="#7C3AED" opacity=".25"/>
                    <circle cx="196" cy="108" r="7" fill="#7C3AED" opacity=".2"/>
                </svg>

                <h1 class="mb-3" style="font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--color-heading);">
                    This page doesn&rsquo;t exist
                </h1>
                <p class="mb-4" style="color: var(--color-paragraph); font-size: var(--fs-paragraph);">
                    The link may be out of date, or the page may have moved. Nothing is broken on
                    your end — here are the useful places to go instead.
                </p>

                <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
                    <a href="{{ route('home') }}" class="btn btn-primary-gradient">Back to home</a>
                    <a href="{{ route('portfolio.index') }}" class="btn btn-secondary-outline">Browse portfolio</a>
                </div>

                <form method="GET" action="{{ route('search') }}" class="d-flex gap-2 mx-auto" style="max-width: 420px;" role="search">
                    <label for="notfound-search" class="visually-hidden">Search the site</label>
                    <input
                        type="search"
                        name="q"
                        id="notfound-search"
                        class="form-control"
                        placeholder="Search for what you were after…"
                        style="border-radius: var(--radius-form); padding: .75rem 1rem;"
                    >
                    <button type="submit" class="btn btn-secondary-outline flex-shrink-0">Search</button>
                </form>
            </div>
        </div>
    </section>
</x-layout>