@extends('frontend.layout.layout')
@section('title', '500 - Internal Server Error')
@section('main')
    <main class="flex-grow flex items-center justify-center py-20 px-6 md:px-14 text-center">
        <div class="max-w-2xl">
            <p class="text-9xl font-extrabold text-red-600 mb-8 animate-pulse">500</p>
            <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">Internal Server Error</h1>
            <p class="text-lg md:text-xl text-gray-700 mb-8">We're experiencing some technical difficulties. Our team has
                been notified and is working to fix the issue.</p>
            <p class="text-md text-gray-600 mb-8">Please try refreshing the page or come back later. If the problem persists,
                feel free to contact our support team.</p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="{{ route('home') }}"
                    class="bg-primary text-white px-8 py-4 !rounded-button text-lg font-medium hover:bg-primary/90 transition-colors shadow-lg shadow-primary/20">Go
                    to Homepage</a>
                <a href="{{ route('contact') }}"
                    class="border border-primary text-primary px-8 py-4 !rounded-button text-lg font-medium hover:bg-primary hover:text-white transition-colors">Contact
                    Support</a>
            </div>
        </div>
    </main>
@endsection