import { Shield, Award, Clock } from "lucide-react";
import Link from "next/link";
import Image from "next/image";
import { Metadata } from "next";
import NewspaperClipping from "@/components/NewspaperClipping";

export const metadata: Metadata = {
    title: "About Budd Electric Co. | Family-Owned Since 1969",
    description: "Learn about Budd Electric Co., a family-owned electrical contractor serving Corpus Christi and South Texas since 1969. Three generations of licensed master electricians.",
};

export default function AboutUs() {
    return (
        <div className="bg-[color:var(--bg)]">
            {/* PAGE 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">Our Legacy</h1>
                    <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                        Serving the Coastal Bend with integrity and elite craftsmanship since 1969.
                    </p>
                </div>
            </section>

            {/* STORY SECTION */}
            <section className="py-24">
                <div className="mx-auto max-w-7xl px-6 lg:px-8">
                    <div className="grid lg:grid-cols-2 gap-16 items-center">
                        <div className="relative">
                            <NewspaperClipping />
                        </div>
                        <div>
                            <h2 className="text-sm font-bold tracking-[0.2em] text-[color:var(--brand)] uppercase mb-3">Who We Are</h2>
                            <h3 className="text-3xl md:text-4xl font-bold text-[color:var(--ink)] font-display mb-6">Three Generations of Excellence</h3>
                            <div className="space-y-6 text-[color:var(--muted)] text-lg leading-relaxed">
                                <p>
                                    Budd Electric Co. is more than just a service provider; we are a family legacy built on trust, hard work, and technical expertise. Founded in 1969, we have proudly served Corpus Christi and the surrounding South Texas region for over five decades.
                                </p>
                                <p>
                                    As a family-owned and operated business, we treat every customer like a neighbor. Our team consists of fully Licensed Master Electricians (TECL #17007) dedicated to solving your electrical problems safely and efficiently.
                                </p>
                            </div>
                            <div className="mt-8 grid grid-cols-2 gap-6">
                                <div className="flex flex-col gap-2">
                                    <span className="text-4xl font-bold text-[color:var(--brand)]">1969</span>
                                    <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Established</span>
                                </div>
                                <div className="flex flex-col gap-2">
                                    <span className="text-4xl font-bold text-[color:var(--brand)]">3rd Gen</span>
                                    <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Master Electricians</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            {/* VALUES GRID */}
            <section className="bg-[color:var(--surface)] py-24">
                <div className="mx-auto max-w-7xl px-6 lg:px-8">
                    <div className="text-center max-w-3xl mx-auto mb-16">
                        <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display">Our Core Values</h2>
                        <p className="mt-4 text-[color:var(--muted)]">The principles that drive our work every single day.</p>
                    </div>

                    <div className="grid md:grid-cols-3 gap-8">
                        <div className="bg-white p-8 rounded shadow-sm border-t-4 border-[color:var(--brand)] text-center">
                            <div className="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6 text-[color:var(--brand)]">
                                <Shield size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[color:var(--ink)] mb-4">Safety First</h3>
                            <p className="text-[color:var(--muted)]">We never cut corners. Your safety and the safety of our team is our absolute top priority on every job.</p>
                        </div>
                        <div className="bg-white p-8 rounded shadow-sm border-t-4 border-[color:var(--brand)] text-center">
                            <div className="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6 text-[color:var(--brand)]">
                                <Award size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[color:var(--ink)] mb-4">Craftsmanship</h3>
                            <p className="text-[color:var(--muted)]">We take pride in clean, code-compliant, and efficient electrical installations that stand the test of time.</p>
                        </div>
                        <div className="bg-white p-8 rounded shadow-sm border-t-4 border-[color:var(--brand)] text-center">
                            <div className="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-6 text-[color:var(--brand)]">
                                <Clock size={32} />
                            </div>
                            <h3 className="text-xl font-bold text-[color:var(--ink)] mb-4">Reliability</h3>
                            <p className="text-[color:var(--muted)]">When we say we'll be there, we'll be there. We respect your time and your property.</p>
                        </div>
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section className="bg-[color:var(--brand)] py-16 text-center">
                <div className="mx-auto max-w-4xl px-6">
                    <h2 className="text-3xl font-bold text-white font-display mb-6">Experience the Budd Electric Difference</h2>
                    <div className="flex justify-center gap-6">
                        <Link href="/contact-us" className="bg-white text-[color:var(--brand)] px-8 py-3 font-bold uppercase tracking-widest hover:bg-gray-100 transition rounded shadow-lg">Contact Us Today</Link>
                    </div>
                </div>
            </section>
        </div>
    );
}
