{% extends "base.html" %}
{% block title %}Order Submitted — 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-yellow-400/20"
             style="background: linear-gradient(135deg, #141414, #111111);">

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

            <h1 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-3">
                Order Submitted!
            </h1>
            <p class="text-yellow-400 font-oswald text-lg tracking-wide mb-4">
                Thank you for choosing Thor's Hammer Electrical
            </p>
            <p class="text-gray-400 text-sm leading-relaxed mb-8">
                We've received your work order and will be in touch shortly.
                We appreciate your business!
            </p>

            <div class="flex flex-col sm:flex-row gap-3 justify-center">
                <a href="{{ url_for('index') }}"
                   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">
                    BACK TO HOME
                </a>
                <a href="{{ url_for('services') }}"
                   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">
                    OUR SERVICES
                </a>
            </div>
        </div>

    </div>
</section>

{% endblock %}