{% extends "base.html" %}
{% block title %}About — 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">Our Story</p>
        <h1 class="font-oswald text-5xl md:text-6xl font-bold text-white tracking-wide">ABOUT US</h1>
    </div>
</section>

<!-- ── MISSION ─────────────────────────────────────────────── -->
<section class="py-16 px-4">
    <div class="max-w-4xl mx-auto">
        <div class="card-hover rounded-2xl p-8 md:p-10 border border-yellow-400/15"
             style="background-color: #111111;">
            <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center flex-shrink-0">
                    <i class="fa-solid fa-bullseye text-yellow-400 text-xl"></i>
                </div>
                <h2 class="font-oswald text-2xl md:text-3xl font-bold text-white">Mission Statement</h2>
            </div>
            <p class="text-gray-300 leading-relaxed text-lg mb-4">
                We at Thor's Hammer Electrical strive to be the best in the field. We proudly serve
                Levelland and the surrounding areas with dedication, integrity, and craftsmanship.
            </p>
            <p class="text-yellow-400 font-oswald text-lg font-medium tracking-wide">
                "At Thor's Hammer Electrical, we put the power back in the panel!"
            </p>
        </div>
    </div>
</section>

<!-- ── HISTORY ─────────────────────────────────────────────── -->
<section class="py-8 px-4">
    <div class="max-w-4xl mx-auto">
        <div class="card-hover rounded-2xl p-8 md:p-10 border border-white/8"
             style="background-color: #111111;">
            <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 rounded-xl bg-yellow-400/10 flex items-center justify-center flex-shrink-0">
                    <i class="fa-solid fa-book-open text-yellow-400 text-xl"></i>
                </div>
                <h2 class="font-oswald text-2xl md:text-3xl font-bold text-white">Company History</h2>
            </div>
            <p class="text-gray-300 leading-relaxed mb-4">
                Thor's Hammer Electrical LLC was founded in April 2023. We bring over <strong class="text-white">20 years of
                electrical experience</strong> to every project, operating as a small company with big family values.
            </p>
            <p class="text-gray-300 leading-relaxed">
                When you choose Thor's Hammer Electrical for your electrical needs,
                you don't just get a contractor — you become part of the family.
            </p>
        </div>
    </div>
</section>

<!-- ── TEAM ─────────────────────────────────────────────────── -->
<section class="py-16 px-4" style="background-color: #0d0d0d;">
    <div class="max-w-4xl mx-auto text-center">
        <p class="font-oswald text-sm text-yellow-400 tracking-[0.3em] uppercase mb-3">The Crew</p>
        <h2 class="font-oswald text-3xl md:text-4xl font-bold text-white mb-12">Our Team</h2>

        <div class="grid md:grid-cols-3 gap-6">

            <!-- Leonard -->
            <div class="card-hover rounded-2xl p-8 border border-yellow-400/20"
                 style="background: linear-gradient(135deg, #141414, #111111);">
                <div class="w-16 h-16 rounded-full bg-yellow-400/15 flex items-center justify-center mx-auto mb-5
                            ring-2 ring-yellow-400/30">
                    <i class="fa-solid fa-helmet-safety text-yellow-400 text-2xl"></i>
                </div>
                <h3 class="font-oswald text-xl font-bold text-white mb-1">Leonard Johnson</h3>
                <p class="text-yellow-400 text-sm font-medium tracking-wide mb-3">Master Electrician</p>
                <p class="text-gray-500 text-xs leading-relaxed">Company Owner &amp; Operator<br/>20+ Years Experience</p>
            </div>

            <!-- Makayla -->
            <div class="card-hover rounded-2xl p-8 border border-white/8"
                 style="background-color: #111111;">
                <div class="w-16 h-16 rounded-full bg-yellow-400/10 flex items-center justify-center mx-auto mb-5
                            ring-2 ring-white/10">
                    <i class="fa-solid fa-screwdriver-wrench text-yellow-400/70 text-2xl"></i>
                </div>
                <h3 class="font-oswald text-xl font-bold text-white mb-1">Makayla Johnson</h3>
                <p class="text-yellow-400/70 text-sm font-medium tracking-wide mb-3">Electrician's Apprentice</p>
                <p class="text-gray-500 text-xs leading-relaxed">Team Member</p>
            </div>

            <!-- Robert -->
            <div class="card-hover rounded-2xl p-8 border border-white/8"
                 style="background-color: #111111;">
                <div class="w-16 h-16 rounded-full bg-yellow-400/10 flex items-center justify-center mx-auto mb-5
                            ring-2 ring-white/10">
                    <i class="fa-solid fa-screwdriver-wrench text-yellow-400/70 text-2xl"></i>
                </div>
                <h3 class="font-oswald text-xl font-bold text-white mb-1">Robert Johnson</h3>
                <p class="text-yellow-400/70 text-sm font-medium tracking-wide mb-3">Electrician's Apprentice</p>
                <p class="text-gray-500 text-xs leading-relaxed">Team Member</p>
            </div>

            <!-- Benjamin Mosley -->
            <div class="card-hover rounded-2xl p-8 border border-white/8"
                 style="background-color: #111111;">
                <div class="w-16 h-16 rounded-full bg-yellow-400/10 flex items-center justify-center mx-auto mb-5
                            ring-2 ring-white/10">
                    <i class="fa-solid fa-laptop-code text-yellow-400/70 text-2xl"></i>
                </div>
                <h3 class="font-oswald text-xl font-bold text-white mb-1">Benjamin Mosley</h3>
                <p class="text-yellow-400/70 text-sm font-medium tracking-wide mb-3">IT &amp; Web</p>
                <p class="text-gray-500 text-xs leading-relaxed">
                    <a href="https://www.bennyshouse.net" target="_blank" rel="noopener noreferrer"
                       class="hover:text-yellow-400 transition-colors">Benny's House</a>
                </p>
            </div>

        </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 Electrical Work Done?</h2>
    <p class="text-gray-400 mb-8">Submit a work order and we'll be in touch.</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 %}