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

{% block content %}

<!-- ── PAGE HEADER ─────────────────────────────────────────── -->
<section class="relative py-24 px-4 text-center overflow-hidden grid-bg">
    <div class="absolute inset-0 pointer-events-none"
         style="background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(250,204,21,0.06) 0%, transparent 70%);"></div>
    <div class="relative z-10">
        <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Get In Touch</p>
        <h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide mb-4">CONTACT US</h1>
        <p class="text-gray-400 max-w-xl mx-auto">
            Have a question or need to reach us directly? Fill out the form below and we'll get back to you.
        </p>
    </div>
</section>

<!-- ── CONTACT INFO + FORM ─────────────────────────────────── -->
<section class="py-16 px-4">
    <div class="max-w-5xl mx-auto">

        <div class="grid md:grid-cols-3 gap-8 mb-12">
            <div class="card-hover rounded-xl p-6 border border-white/8 text-center" style="background-color: #111111;">
                <i class="fa-solid fa-location-dot text-yellow-400 text-2xl mb-3 block"></i>
                <h3 class="font-oswald font-semibold text-white mb-1">Location</h3>
                <p class="text-gray-400 text-sm">Levelland, Texas</p>
            </div>
            <div class="card-hover rounded-xl p-6 border border-white/8 text-center" style="background-color: #111111;">
                <i class="fa-solid fa-bolt text-yellow-400 text-2xl mb-3 block"></i>
                <h3 class="font-oswald font-semibold text-white mb-1">Work Orders</h3>
                <p class="text-gray-400 text-sm">
                    <a href="{{ url_for('work_order') }}" class="text-yellow-400 hover:text-yellow-300 transition-colors">
                        Submit here →
                    </a>
                </p>
            </div>
            <div class="card-hover rounded-xl p-6 border border-white/8 text-center" style="background-color: #111111;">
                <i class="fa-solid fa-clock text-yellow-400 text-2xl mb-3 block"></i>
                <h3 class="font-oswald font-semibold text-white mb-1">Response Time</h3>
                <p class="text-gray-400 text-sm">We respond promptly</p>
            </div>
        </div>

        <!-- Work Order CTA -->
        <div class="rounded-2xl p-10 text-center border border-yellow-400/15"
             style="background: linear-gradient(135deg, #141414, #111111);">
            <i class="fa-solid fa-bolt text-yellow-400 text-4xl mb-5 block"></i>
            <h2 class="font-oswald text-2xl font-bold text-white mb-3">Ready to Get Work Done?</h2>
            <p class="text-gray-400 mb-8 max-w-md mx-auto">
                Submit a work order and we'll be notified right away. Fill out your name, job description,
                and address and we'll follow up with you shortly.
            </p>
            <a href="{{ url_for('work_order') }}"
               class="inline-block px-10 py-4 bg-yellow-400 text-black font-oswald font-bold tracking-widest
                      text-base rounded-lg hover:bg-yellow-300 transition-all glow-yellow">
                SUBMIT WORK ORDER
            </a>
        </div>

    </div>
</section>

{% endblock %}