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

{% block content %}

<!-- ── HERO ────────────────────────────────────────────────── -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden grid-bg">

    <!-- Radial glow behind content -->
    <div class="absolute inset-0 pointer-events-none"
         style="background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(250,204,21,0.07) 0%, transparent 70%);"></div>

    <!-- Bottom fade -->
    <div class="absolute bottom-0 left-0 right-0 h-32"
         style="background: linear-gradient(to bottom, transparent, #080808);"></div>

    <div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
        <!-- Lightning bolt icon -->
        <div class="mb-6 flex justify-center">
            <i class="fa-solid fa-bolt text-yellow-400"
               style="font-size: 5rem; filter: drop-shadow(0 0 24px rgba(250,204,21,0.75));"></i>
        </div>

        <h1 class="font-oswald font-bold tracking-widest text-white mb-2"
            style="font-size: clamp(2.5rem, 8vw, 6rem); line-height: 1.05;">
            THOR'S HAMMER
        </h1>
        <h2 class="font-oswald font-light tracking-[0.25em] mb-6 text-gradient"
            style="font-size: clamp(1.2rem, 4vw, 2.5rem);">
            ELECTRICAL LLC
        </h2>

        <p class="text-gray-400 text-lg md:text-xl mb-4 max-w-2xl mx-auto leading-relaxed">
            Levelland, Texas's Premier Electrical Contractor
        </p>
        <p class="text-gray-500 text-sm md:text-base mb-10 max-w-xl mx-auto">
            Residential &amp; Commercial · Licensed &amp; Insured · 20+ Years Experience
        </p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ url_for('work_order') }}"
               class="px-8 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>
            <a href="{{ url_for('services') }}"
               class="px-8 py-4 border-2 border-yellow-400/60 text-yellow-400 font-oswald font-bold tracking-widest text-base rounded-lg
                      hover:bg-yellow-400 hover:text-black hover:border-yellow-400 transition-all">
                VIEW SERVICES
            </a>
        </div>
    </div>

    <!-- Scroll indicator -->
    <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce text-yellow-400/40">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </div>
</section>

<!-- ── STATS BAR ───────────────────────────────────────────── -->
<section style="background-color: #111111; border-top: 1px solid rgba(250,204,21,0.12); border-bottom: 1px solid rgba(250,204,21,0.12);">
    <div class="max-w-5xl mx-auto px-4 py-8">
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
            <div class="group">
                <p class="font-oswald text-4xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">20+</p>
                <p class="text-gray-400 text-sm tracking-widest uppercase mt-1">Years of Experience</p>
            </div>
            <div class="group border-t sm:border-t-0 sm:border-x border-white/10 pt-6 sm:pt-0">
                <p class="font-oswald text-4xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">100%</p>
                <p class="text-gray-400 text-sm tracking-widest uppercase mt-1">Licensed &amp; Insured</p>
            </div>
            <div class="group border-t sm:border-t-0 pt-6 sm:pt-0">
                <p class="font-oswald text-4xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">Local</p>
                <p class="text-gray-400 text-sm tracking-widest uppercase mt-1">Levelland, Texas</p>
            </div>
        </div>
    </div>
</section>

<!-- ── LICENSE ─────────────────────────────────────────────── -->
<section class="py-20 px-4">
    <div class="max-w-3xl mx-auto text-center">
        <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-4">Certified &amp; Trusted</p>
        <h2 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-8">Our License</h2>
        <div class="inline-block rounded-xl overflow-hidden ring-2 ring-yellow-400/30 hover:ring-yellow-400/60 transition-all glow-yellow-sm">
            <img src="{{ url_for('static', filename='images/License.jpg') }}"
                 alt="Electrical License" class="max-w-full h-auto max-h-96 object-contain">
        </div>
    </div>
</section>

<!-- ── ABOUT SNIPPET ───────────────────────────────────────── -->
<section class="py-20 px-4" style="background-color: #0d0d0d;">
    <div class="max-w-5xl mx-auto">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">Who We Are</p>
                <h2 class="font-oswald text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">
                    Powering Levelland<br/>
                    <span class="text-gradient">Since 2023</span>
                </h2>
                <p class="text-gray-400 leading-relaxed mb-4">
                    Thor's Hammer Electrical LLC is a locally owned and operated electrical services company
                    based in Levelland, Texas. Owned by Master Electrician Leonard Johnson, we bring
                    over 20 years of hands-on experience to every job.
                </p>
                <p class="text-gray-400 leading-relaxed mb-8">
                    We put the power back in the panel — and we treat every customer like family.
                </p>
                <a href="{{ url_for('about') }}"
                   class="inline-flex items-center gap-2 px-6 py-3 border border-yellow-400/50 text-yellow-400
                          font-oswald font-bold tracking-wider text-sm rounded-lg hover:bg-yellow-400 hover:text-black transition-all">
                    LEARN MORE
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                    </svg>
                </a>
            </div>

            <!-- Feature tiles -->
            <div class="grid grid-cols-2 gap-4">
                {% set features = [
                    ('fa-bolt', 'Residential', 'Home wiring, panels, lighting & more'),
                    ('fa-industry', 'Commercial', 'Business & industrial electrical work'),
                    ('fa-shield-halved', 'Licensed', 'Fully licensed Master Electrician'),
                    ('fa-handshake', 'Family Values', 'You become part of our family'),
                ] %}
                {% for icon, title, desc in features %}
                <div class="card-hover rounded-xl p-5 border border-white/8"
                     style="background-color: #161616;">
                    <i class="fa-solid {{ icon }} text-yellow-400 text-xl mb-3 block"></i>
                    <h3 class="font-oswald font-semibold text-white text-sm tracking-wide mb-1">{{ title }}</h3>
                    <p class="text-gray-500 text-xs leading-relaxed">{{ desc }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>

<!-- ── SERVICES PREVIEW ────────────────────────────────────── -->
<section class="py-20 px-4">
    <div class="max-w-5xl mx-auto text-center">
        <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">What We Do</p>
        <h2 class="font-oswald text-4xl md:text-5xl font-bold text-white mb-4">Our Services</h2>
        <p class="text-gray-400 mb-12 max-w-xl mx-auto">
            From residential homes to commercial businesses, Thor's Hammer has you covered.
        </p>

        <div class="grid md:grid-cols-2 gap-6 mb-10">
            <div class="card-hover rounded-2xl p-8 border border-white/8 text-left"
                 style="background-color: #111111;">
                <div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-5">
                    <i class="fa-solid fa-house text-yellow-400 text-2xl"></i>
                </div>
                <h3 class="font-oswald text-xl font-bold text-white mb-3">Residential</h3>
                <p class="text-gray-400 text-sm leading-relaxed">
                    Our residential services are the bread and butter of Thor's Hammer. We live to serve
                    our community members and ensure every home is safe and powered.
                </p>
            </div>
            <div class="card-hover rounded-2xl p-8 border border-white/8 text-left"
                 style="background-color: #111111;">
                <div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center mb-5">
                    <i class="fa-solid fa-building text-yellow-400 text-2xl"></i>
                </div>
                <h3 class="font-oswald text-xl font-bold text-white mb-3">Commercial</h3>
                <p class="text-gray-400 text-sm leading-relaxed">
                    Having spent years servicing commercial properties, Thor's Hammer is your go-to
                    commercial electrical contractor for businesses of all sizes.
                </p>
            </div>
        </div>

        <a href="{{ url_for('services') }}"
           class="inline-flex items-center gap-2 px-8 py-3 border-2 border-yellow-400/60 text-yellow-400
                  font-oswald font-bold tracking-wider text-sm rounded-lg hover:bg-yellow-400 hover:text-black transition-all">
            SEE ALL SERVICES
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
        </a>
    </div>
</section>

<!-- ── CALL TO ACTION ──────────────────────────────────────── -->
<section class="py-20 px-4" style="background-color: #0d0d0d;">
    <div class="max-w-3xl mx-auto text-center">
        <div class="rounded-2xl p-10 md:p-14 border border-yellow-400/20 relative overflow-hidden"
             style="background: linear-gradient(135deg, #111111, #0f0f0f);">
            <div class="absolute inset-0 pointer-events-none"
                 style="background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(250,204,21,0.05) 0%, transparent 70%);"></div>
            <div class="relative z-10">
                <i class="fa-solid fa-bolt text-yellow-400 text-5xl mb-6 block"></i>
                <h2 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-4">
                    Ready to Get Started?
                </h2>
                <p class="text-gray-400 mb-8 text-lg">
                    Submit your work order today and we'll get back to you promptly.
                </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>
    </div>
</section>

{% endblock %}