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

export const metadata: Metadata = {
    title: "Photo Gallery | Budd Electric Projects & Work Showcase",
    description: "View our portfolio of completed electrical projects in Corpus Christi and South Texas. Residential, commercial, and generator installations by Budd Electric Co.",
};

export default function Gallery() {
    const images = [
        "/images/gallery-1.png",
        "/images/gallery-2.png",
        "/images/gallery-3.png",
        "/images/gallery-4.png",
        "/images/residential.png",
        "/images/commercial.png"
    ];

    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">Our Work</h1>
                    <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                        A showcase of electrical excellence across South Texas.
                    </p>
                </div>
            </section>

            {/* GALLERY GRID */}
            <section className="py-24">
                <div className="mx-auto max-w-7xl px-6 lg:px-8">
                    <div className="masonry-grid grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                        {images.map((src, i) => (
                            <div key={i} className="bg-white rounded shadow-lg overflow-hidden group relative aspect-[4/3]">
                                <Image
                                    src={src}
                                    alt={`Electrical project ${i + 1} - Professional electrical installation by Budd Electric Co.`}
                                    fill
                                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
                                    quality={65}
                                    loading="lazy"
                                    className="object-cover transition duration-700 group-hover:scale-110"
                                />
                            </div>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section className="bg-[color:var(--surface)] py-24 text-center border-t border-[color:var(--line)]">
                <div className="mx-auto max-w-2xl px-6">
                    <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display mb-6">Like what you see?</h2>
                    <p className="text-[color:var(--muted)] mb-8">Let us bring the same quality and dedication to your next project.</p>
                    <Link href="/contact-us" className="inline-flex items-center gap-2 bg-[color:var(--brand)] text-white px-8 py-3 font-bold uppercase tracking-widest hover:bg-[color:var(--brand-strong)] transition rounded shadow-lg shadow-red-900/20">
                        Start Your Project <ArrowRight size={18} />
                    </Link>
                </div>
            </section>
        </div>
    );
}
