@extends('errors.layout')
@section('title', '404 — Page Not Found')
@section('content')
<div class="max-w-2xl mx-auto text-center">
    <div class="float-anim inline-block">
        <div class="relative">
            <svg width="200" height="200" viewBox="0 0 200 200" fill="none" class="mx-auto">
                <circle cx="100" cy="100" r="92" fill="#dbe6ff"/>
                <circle cx="100" cy="100" r="72" fill="#fff" stroke="#3b6df0" stroke-width="2" stroke-dasharray="4 6"/>
                <text x="100" y="118" text-anchor="middle" font-family="Plus Jakarta Sans, sans-serif" font-weight="900" font-size="56" fill="#0a1430">404</text>
                <circle cx="40" cy="40" r="6" fill="#ff8a00"/>
                <circle cx="170" cy="60" r="4" fill="#3b6df0"/>
                <circle cx="160" cy="160" r="5" fill="#10b981"/>
                <path d="M30 130 l8 -4 l0 8 z" fill="#3b6df0"/>
            </svg>
        </div>
    </div>
    <h1 class="font-display font-extrabold text-3xl lg:text-5xl mt-6 leading-tight">{{ __('Page not found') }}</h1>
    <p class="text-slate-500 text-[15px] mt-3 max-w-md mx-auto">{{ __("Sorry — the page you're looking for doesn't exist or may have been moved. Let's get you back on track.") }}</p>

    <div class="flex items-center justify-center gap-3 mt-7 flex-wrap">
        <a href="{{ url('/') }}" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 py-3 rounded-full transition-colors flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>
            {{ __('Back to home') }}
        </a>
        <a href="{{ url('shop') }}" class="bg-white hover:bg-slate-50 border-2 border-slate-200 text-deep font-bold px-6 py-3 rounded-full transition-colors flex items-center gap-2">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
            {{ __('Browse shop') }}
        </a>
    </div>

    <div class="mt-10 grid grid-cols-3 gap-3 max-w-md mx-auto">
        <a href="{{ url('/') }}" class="bg-white rounded-xl shadow-card p-3 text-center hover:shadow-hover transition-shadow">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="mx-auto text-brand-600"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></svg>
            <div class="text-[12px] font-semibold mt-1.5">{{ __('Home') }}</div>
        </a>
        <a href="{{ url('shop') }}" class="bg-white rounded-xl shadow-card p-3 text-center hover:shadow-hover transition-shadow">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="mx-auto text-saffron"><path d="M5 8h14l-1.2 11.2a2 2 0 0 1-2 1.8H8.2a2 2 0 0 1-2-1.8L5 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
            <div class="text-[12px] font-semibold mt-1.5">{{ __('Shop') }}</div>
        </a>
        <a href="{{ route('contact.us') }}" class="bg-white rounded-xl shadow-card p-3 text-center hover:shadow-hover transition-shadow">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" class="mx-auto text-emerald-600"><path d="M21 15a4 4 0 0 1-4 4H8l-5 3V6a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v9Z"/></svg>
            <div class="text-[12px] font-semibold mt-1.5">{{ __('Support') }}</div>
        </a>
    </div>
</div>
@endsection