{% extends "base.html" %}
{% block title %}Something Went Wrong — Thor's Hammer Electrical LLC{% endblock %}

{% block content %}

<section class="min-h-[80vh] flex items-center justify-center px-4">
    <div class="max-w-lg w-full text-center">

        <div class="rounded-2xl p-10 border border-red-500/20"
             style="background: linear-gradient(135deg, #141414, #111111);">

            <!-- Icon -->
            <div class="w-20 h-20 rounded-full bg-red-500/10 flex items-center justify-center mx-auto mb-6
                        ring-2 ring-red-500/30">
                <i class="fa-solid fa-triangle-exclamation text-red-400 text-3xl"></i>
            </div>

            <h1 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-3">
                Something Went Wrong
            </h1>
            <p class="text-red-400 font-oswald text-lg tracking-wide mb-4">
                We couldn't process your work order
            </p>
            <p class="text-gray-400 text-sm leading-relaxed mb-8">
                We're sorry for the inconvenience. Please try submitting your order again.
                If the issue persists, feel free to contact us directly.
            </p>

            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                <a href="{{ url_for('work_order') }}"
                   class="px-8 py-3 bg-yellow-400 text-black font-oswald font-bold tracking-widest
                          text-sm rounded-lg hover:bg-yellow-300 transition-all">
                    TRY AGAIN
                </a>
                <a href="{{ url_for('contact') }}"
                   class="px-8 py-3 border border-white/15 text-gray-300 font-oswald font-bold tracking-widest
                          text-sm rounded-lg hover:bg-white/5 transition-all">
                    CONTACT US
                </a>
            </div>
        </div>

    </div>
</section>

{% endblock %}