import { Home, Zap, Building2 } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { ArrowRight } from "lucide-react";
import { Metadata } from "next";

export const metadata: Metadata = {
    title: "Electrical Services Corpus Christi | Commercial & Residential",
    description: "Professional commercial and residential electrical services in Corpus Christi, TX. Licensed electricians for all your electrical needs. Call (361) 855-2255.",
};

export default function Services() {
    return (
        <div className="bg-[color:var(--bg)]">
            {/* HERO */}
            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
                <div className="absolute inset-0 opacity-10">
                    <Image
                        src="/images/hero-bg.png"
                        alt=""
                        fill
                        priority
                        quality={40}
                        sizes="100vw"
                        className="object-cover object-center"
                    />
                </div>
                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
                    <h1 className="text-4xl md:text-6xl font-bold text-white font-display mb-6">Electrical Services</h1>
                    <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                        Comprehensive solutions for every need. Commercial and Residential electrical services.
                    </p>
                </div>
            </section>

            {/* SERVICE LIST */}
            <section className="py-24">
                <div className="mx-auto max-w-7xl px-6 lg:px-8 space-y-24">
                    {/* COMMERCIAL */}
                    <div id="commercial" className="grid lg:grid-cols-2 gap-16 items-center scroll-mt-36">
                        <div className="order-2 lg:order-1">
                            <div className="w-14 h-14 bg-red-50 text-[color:var(--brand)] rounded flex items-center justify-center mb-6">
                                <Building2 size={32} />
                            </div>
                            <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display mb-6">Commercial & Residential Electrical Remodels</h2>
                            <p className="text-[color:var(--muted)] text-lg mb-8 leading-relaxed">
                                We are your wiring, lighting and electrical service upgrade specialists in Corpus Christi and all of South Texas. We have encountered all the standard common electrical problems and have the experience, knowledge, skill, and expertise to solve them all. Our electrical repair expertise includes faulty outlets, panel reinstallation, meter replacement, new lighting fixtures, and adding circuits to your fuse box. Call Budd Electric Co. for a complimentary electrical repair consultation or free quote at (361) 855-2255.
                            </p>
                            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                {["Commercial & Residential", "Complete Electrical Service Upgrades", "Electrical Repairs"].map((item, i) => (
                                    <li key={i} className="flex items-center gap-3 text-gray-700 font-medium">
                                        <span className="w-2 h-2 bg-[color:var(--brand)] rounded-full"></span>
                                        {item}
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="order-1 lg:order-2 rounded-lg overflow-hidden shadow-xl aspect-[4/3] bg-gray-100 relative">
                            <Image
                                src="/images/commercial.png"
                                alt="Commercial electrical wiring and service upgrades"
                                fill
                                sizes="(max-width: 1024px) 100vw, 50vw"
                                quality={65}
                                loading="lazy"
                                className="object-cover"
                            />
                        </div>
                    </div>

                    {/* GENERATORS */}
                    <div id="generator" className="grid lg:grid-cols-2 gap-16 items-center scroll-mt-36">
                        <div className="rounded-lg overflow-hidden shadow-xl aspect-[4/3] bg-gray-100 relative">
                            <Image
                                src="/images/generator.png"
                                alt="Kohler whole-home standby generator installation and service"
                                fill
                                sizes="(max-width: 1024px) 100vw, 50vw"
                                quality={65}
                                loading="lazy"
                                className="object-cover"
                            />
                        </div>
                        <div>
                            <div className="w-14 h-14 bg-red-50 text-[color:var(--brand)] rounded flex items-center justify-center mb-6">
                                <Zap size={32} />
                            </div>
                            <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display mb-6">Kohler Generators</h2>
                            <p className="text-[color:var(--muted)] text-lg mb-8 leading-relaxed">
                                Don&apos;t be left in the dark during a storm. As an authorized Kohler dealer, we sell, install, and service standby generators to keep your power on when the grid goes down.
                            </p>
                            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                {["Sales & Consultation", "Professional Installation", "Maintenance Plans", "Warranty Service", "Transfer Switch Install"].map((item, i) => (
                                    <li key={i} className="flex items-center gap-3 text-gray-700 font-medium">
                                        <span className="w-2 h-2 bg-[color:var(--brand)] rounded-full"></span>
                                        {item}
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </div>

                    {/* RESIDENTIAL */}
                    <div id="residential" className="grid lg:grid-cols-2 gap-16 items-center scroll-mt-36">
                        <div className="order-2 lg:order-1">
                            <div className="w-14 h-14 bg-red-50 text-[color:var(--brand)] rounded flex items-center justify-center mb-6">
                                <Home size={32} />
                            </div>
                            <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display mb-6">Residential Services</h2>
                            <p className="text-[color:var(--muted)] text-lg mb-8 leading-relaxed">
                                Your home is your sanctuary. We ensure it&apos;s powered safely and efficiently. From simple outlet repairs to full-home rewiring, no job is too small or too complex.
                            </p>
                            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                {["Service Upgrades", "Safety Inspections", "Lighting Installation", "Ceiling Fans", "Outlet Repair", "Panel Replacement"].map((item, i) => (
                                    <li key={i} className="flex items-center gap-3 text-gray-700 font-medium">
                                        <span className="w-2 h-2 bg-[color:var(--brand)] rounded-full"></span>
                                        {item}
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div className="order-1 lg:order-2 rounded-lg overflow-hidden shadow-xl aspect-[4/3] bg-gray-100 relative">
                            <Image
                                src="/images/residential.png"
                                alt="Professional residential electrical wiring and home electrical services"
                                fill
                                sizes="(max-width: 1024px) 100vw, 50vw"
                                quality={65}
                                loading="lazy"
                                className="object-cover"
                            />
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section className="bg-[color:var(--bg-dark)] py-20 border-t border-white/10">
                <div className="mx-auto max-w-4xl px-6 text-center">
                    <h2 className="text-3xl font-bold text-white font-display mb-6">Need a custom solution?</h2>
                    <p className="text-gray-400 mb-8 max-w-2xl mx-auto">If you don't see the specific service you need listed, give us a call. We likely handle it.</p>
                    <Link href="/contact-us" className="inline-flex items-center gap-3 bg-[color:var(--brand)] text-white px-8 py-4 font-bold uppercase tracking-widest hover:bg-[color:var(--brand-strong)] transition rounded shadow-lg shadow-red-900/20">
                        Get a Free Quote <ArrowRight size={20} />
                    </Link>
                </div>
            </section>
        </div>
    );
}
