@page "/not-found"
@inject NavigationManager Navigation

<div class="artistic-404-container">
    <div class="container h-100">
        <div class="row align-items-center justify-content-center min-vh-70 py-5">

            <div class="col-12 col-md-5 d-flex justify-content-center mb-5 mb-md-0">
                <div class="artistic-svg-wrapper">
                    <svg viewBox="0 0 400 400" width="350" height="350" stroke="#1A1A1A" stroke-width="2" fill="none">
                        <path d="M60 80 Q80 60 100 80" />
                        <path d="M100 60 Q120 40 140 60" />
                        <path d="M280 70 Q300 50 320 70" />

                        <path d="M100 200 L200 180 L300 200 L300 300 L200 320 L100 300 Z" fill="#F8F8F8" />
                        <path d="M200 180 L200 320" />
                        <path d="M120 220 L180 220 M120 250 L180 250 M220 220 L280 220 M220 250 L280 250" stroke="#DDD" />

                        <circle cx="230" cy="230" r="40" />
                        <line x1="258" y1="258" x2="290" y2="290" />
                    </svg>
                </div>
            </div>

            <div class="col-12 col-md-6 offset-md-1">
                <div class="meta-tag font-monospace text-uppercase text-muted mb-3">System Index // Uncharted Territory</div>
                <h1 class="display-4 text-dark mb-4 editorial-headline">Nothing was found<br />in this search.</h1>
                <p class="text-muted mb-5 body-manifesto-text">
                    Even with careful scrutiny, the requested volume remains elusive. It appears the shelf you are exploring is currently vacant.
                </p>
                <button class="btn btn-dark rounded-pill px-5 py-3" @onclick='() => Navigation.NavigateTo("/")'>Return to Collection</button>
            </div>
        </div>
    </div>
</div>