@extends('layouts.site')

@section('title', 'Page not found')

@section('content')
    <div class="mx-auto max-w-xl px-4 py-24 text-center" data-aos="fade-up">
        <p class="text-sm font-semibold uppercase tracking-wide text-[var(--color-accent)]">404</p>
        <h1 class="mt-4 font-display text-3xl font-bold text-[var(--color-heading)]" style="font-family: var(--font-heading);">We could not find that page</h1>
        <p class="mt-6 text-neutral-700">If you typed the address manually, please check spelling. Otherwise, return home and continue browsing.</p>
        <div class="mt-10 flex flex-wrap justify-center gap-3">
            <a class="inline-flex min-h-[44px] items-center rounded-md bg-[var(--color-accent)] px-5 py-3 text-sm font-semibold text-white hover:opacity-90" href="{{ route('home') }}">Home</a>
            <a class="inline-flex min-h-[44px] items-center rounded-md border border-[var(--color-primary)] px-5 py-3 text-sm font-semibold text-[var(--color-primary)] hover:bg-neutral-50" href="{{ route('contact.show') }}">Contact us</a>
        </div>
    </div>
@endsection