{% extends "base.html" %}
{% block title %}Services — 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">What We Offer</p>
        <h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide mb-4">OUR SERVICES</h1>
        <p class="text-gray-400 max-w-xl mx-auto text-lg">
            Thor's Hammer Electrical provides a diverse range of services for homes and businesses.
        </p>
    </div>
</section>

<!-- ── MAIN SERVICES ───────────────────────────────────────── -->
<section class="py-16 px-4">
    <div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">

        <!-- Residential -->
        <div class="card-hover rounded-2xl p-8 md:p-10 border border-yellow-400/20"
             style="background: linear-gradient(135deg, #141414, #111111);">
            <div class="w-14 h-14 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-6
                        ring-1 ring-yellow-400/30">
                <i class="fa-solid fa-house text-yellow-400 text-2xl"></i>
            </div>
            <h2 class="font-oswald text-2xl md:text-3xl font-bold text-white mb-4">Residential</h2>
            <p class="text-gray-400 leading-relaxed mb-6">
                Our residential services are the bread and butter of Thor's Hammer. We live to serve
                our community members and make sure their homes are safe, functional, and up to code.
            </p>
            <ul class="space-y-2">
                {% for item in ['Panel upgrades & repairs', 'Outlet & switch installation', 'Lighting installation', 'Wiring & rewiring', 'Ceiling fan installation', 'Christmas light installation', 'Security camera installation'] %}
                <li class="flex items-center gap-3 text-gray-300 text-sm">
                    <span class="text-yellow-400 flex-shrink-0">✓</span> {{ item }}
                </li>
                {% endfor %}
            </ul>
        </div>

        <!-- Commercial -->
        <div class="card-hover rounded-2xl p-8 md:p-10 border border-white/8"
             style="background-color: #111111;">
            <div class="w-14 h-14 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-6
                        ring-1 ring-white/10">
                <i class="fa-solid fa-building text-yellow-400 text-2xl"></i>
            </div>
            <h2 class="font-oswald text-2xl md:text-3xl font-bold text-white mb-4">Commercial</h2>
            <p class="text-gray-400 leading-relaxed mb-6">
                Part of serving your community is ensuring the needs of businesses are met. Having spent
                multiple years servicing commercial properties, Thor's Hammer is your go-to commercial
                electrical contractor.
            </p>
            <ul class="space-y-2">
                {% for item in ['Commercial wiring', 'Electrical inspections', 'Lighting systems', 'Power distribution', 'Code compliance'] %}
                <li class="flex items-center gap-3 text-gray-300 text-sm">
                    <span class="text-yellow-400 flex-shrink-0">✓</span> {{ item }}
                </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>

<!-- ── COMPLETED JOBS ──────────────────────────────────────── -->
<section class="py-16 px-4" style="background-color: #0d0d0d;">
    <div class="max-w-5xl mx-auto">
        <div class="text-center mb-12">
            <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Our Work</p>
            <h2 class="font-oswald text-3xl md:text-4xl font-bold text-white">Jobs We've Completed</h2>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {% set jobs = [
                ('fa-tree', 'Christmas Lights', 'Seasonal decorative lighting installation'),
                ('fa-network-wired', 'Network Cabling', 'Cat5, Cat6, and Cat6a Network Installation'),
                ('fa-camera', 'Security Cameras', 'Security camera system installation'),
                ('fa-lightbulb', 'Flood Lights', 'Outdoor flood light installation'),
            ] %}
            {% for icon, title, desc in jobs %}
            <div class="card-hover rounded-xl p-6 border border-white/8 text-center"
                 style="background-color: #111111;">
                <i class="fa-solid {{ icon }} text-yellow-400 text-2xl mb-3 block"></i>
                <h3 class="font-oswald font-semibold text-white text-sm tracking-wide mb-2">{{ title }}</h3>
                <p class="text-gray-500 text-xs leading-relaxed">{{ desc }}</p>
            </div>
            {% endfor %}
        </div>

        <div class="text-center mt-10 p-6 rounded-xl border border-dashed border-yellow-400/20">
            <p class="text-gray-500 text-sm">📸 Project photos coming soon!</p>
        </div>
    </div>
</section>

<!-- ── CTA ──────────────────────────────────────────────────── -->
<section class="py-16 px-4 text-center">
    <h2 class="font-oswald text-3xl font-bold text-white mb-4">Need Any of These Services?</h2>
    <p class="text-gray-400 mb-8">We serve Levelland, TX and surrounding areas. Submit a work order today.</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">
        <i class="fa-solid fa-bolt mr-2"></i> SUBMIT WORK ORDER
    </a>
</section>

{% endblock %}