{% extends 'layouts/front_layout.html.twig' %}

{% block title %}Erreur technique - Luxim Immobilier
{% endblock %}

{% block body %}
	<div class="flex min-h-[70vh] items-center justify-center bg-slate-50 p-4">

		<div class="text-center p-4" data-aos="fade-up">
			<div class="mb-6 inline-flex h-24 w-24 items-center justify-center rounded-full bg-orange-50 text-orange-500 border border-orange-100">
				<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
					<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
				</svg>
			</div>

			<h1 class="mb-4 font-heading text-6xl font-black text-slate-900 md:text-8xl">500</h1>
			<h2 class="mb-2 text-2xl font-bold text-slate-800">Oups ! Un petit souci technique</h2>

			<p class="mb-8 max-w-md mx-auto text-slate-500">
				Nos serveurs rencontrent une difficulté imprévue. Pas de panique, notre équipe technique a été alertée et travaille déjà sur le sujet.
			</p>

			<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
				<a href="{{ path('app_home') }}" class="inline-flex items-center gap-2 rounded-xl bg-primary px-8 py-4 font-heading font-bold text-white shadow-lg shadow-primary/20 transition-all hover:bg-primary/90 hover:scale-105">
					Réessayer plus tard
				</a>
				<a href="{{ path('app_contact') }}" class="font-semibold text-slate-600 hover:text-primary transition-colors">
					Contacter le support
				</a>
			</div>
		</div>
	</div>
{% endblock %}