<?php include 'includes/header.php'; ?>

<main class="min-h-screen flex items-center justify-center pt-20">
    <div class="text-center px-4">
        <h1 class="text-[12rem] font-black leading-none text-white/5 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 select-none">404</h1>
        <div class="relative z-10">
            <div class="w-24 h-24 bg-accent/20 rounded-3xl flex items-center justify-center text-accent mx-auto mb-8 animate-bounce">
                <i class="fas fa-car-burst text-5xl"></i>
            </div>
            <h2 class="text-5xl font-black mb-6">Engine <span class="text-gradient">Stalled!</span></h2>
            <p class="text-text-muted text-xl mb-12 max-w-md mx-auto">We couldn't find the page you're looking for. It might have been moved or doesn't exist.</p>
            <div class="flex flex-col sm:row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                <a href="index.php" class="bg-accent hover:bg-accent-dark text-primary px-10 py-4 rounded-xl font-bold transition-all shadow-xl shadow-accent/20">
                    Back to Garage
                </a>
                <a href="contact.php" class="text-text-muted hover:text-white font-bold transition-colors">
                    Report a Problem
                </a>
            </div>
        </div>
    </div>
</main>

<?php include 'includes/footer.php'; ?>
