@extends('layouts.app')
@section('title', 'Page introuvable - ' . $site['name'])

@section('content')
<section class="mx-auto max-w-5xl px-4 sm:px-6 py-24 grid md:grid-cols-2 gap-12 items-center">
    <div>
        <p class="text-7xl sm:text-8xl font-extrabold text-navy-900">404</p>
        <h1 class="mt-4 text-2xl font-bold text-navy-900">Oups, cette page est introuvable.</h1>
        <p class="mt-2 text-navy-700/70">La page que vous recherchez n'existe pas ou a été déplacée.</p>
        <a href="{{ route('home') }}" class="mt-6 inline-block rounded-full bg-orange-500 px-7 py-3.5 font-semibold text-white hover:bg-orange-600 transition">Retour à l'accueil</a>
    </div>
    <div class="grid place-items-center">
        <div class="relative h-48 w-48 rounded-full bg-navy-50 grid place-items-center">
            <span class="text-7xl">📞</span>
            <span class="absolute top-4 right-2 h-12 w-12 rounded-2xl bg-orange-500 grid place-items-center text-white text-xl shadow-lg">💬</span>
        </div>
    </div>
</section>
@endsection