import { MapPin, Phone, Mail, Clock } from "lucide-react";
import { Metadata } from "next";
import Image from "next/image";
import ContactForm from "@/components/ContactForm";

export const metadata: Metadata = {
    title: "Contact Budd Electric Co. | Corpus Christi Electrician",
    description: "Contact Budd Electric Co. for professional electrical services in Corpus Christi, TX. Call (361) 855-2255 for a free quote or schedule a service call today.",
};

export default function Contact() {
    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">Contact Us</h1>
                    <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                        Get in touch for a free quote or schedule a service call today.
                    </p>
                </div>
            </section>

            {/* CONTACT INFO + FORM */}
            <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">
                        {/* INFO */}
                        <div>
                            <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display mb-8">We're Here for You</h2>
                            <div className="space-y-8">
                                <div className="flex gap-4">
                                    <div className="w-12 h-12 bg-gray-100 rounded flex items-center justify-center text-[color:var(--brand)] flex-none">
                                        <MapPin size={24} />
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-lg text-[color:var(--ink)]">Visit Our Office</h4>
                                        <p className="text-[color:var(--muted)]">3910 Apollo Rd.<br />Corpus Christi, TX 78413</p>
                                    </div>
                                </div>

                                <div className="flex gap-4">
                                    <div className="w-12 h-12 bg-gray-100 rounded flex items-center justify-center text-[color:var(--brand)] flex-none">
                                        <Phone size={24} />
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-lg text-[color:var(--ink)]">Call Us</h4>
                                        <p className="text-[color:var(--muted)] text-xl font-bold text-[color:var(--brand)]">(361) 855-2255</p>
                                        <p className="text-sm text-gray-400">24/7 Emergency Support Available</p>
                                    </div>
                                </div>

                                <div className="flex gap-4">
                                    <div className="w-12 h-12 bg-gray-100 rounded flex items-center justify-center text-[color:var(--brand)] flex-none">
                                        <Mail size={24} />
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-lg text-[color:var(--ink)]">Email Us</h4>
                                        <p className="text-[color:var(--muted)]">buddelectric@grandecom.net</p>
                                    </div>
                                </div>

                                <div className="flex gap-4">
                                    <div className="w-12 h-12 bg-gray-100 rounded flex items-center justify-center text-[color:var(--brand)] flex-none">
                                        <Clock size={24} />
                                    </div>
                                    <div>
                                        <h4 className="font-bold text-lg text-[color:var(--ink)]">Business Hours</h4>
                                        <p className="text-[color:var(--muted)]">Monday - Friday: 8:00 AM - 5:00 PM<br />Saturday & Sunday: Emergency Only</p>
                                    </div>
                                </div>
                            </div>

                            {/* MAP */}
                            <div className="mt-12 h-64 w-full bg-gray-100 rounded overflow-hidden relative">
                                <iframe
                                    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8&q=3910+Apollo+Rd+Corpus+Christi+TX+78413&zoom=15"
                                    title="Budd Electric Co. Location Map"
                                    width="100%"
                                    height="100%"
                                    style={{ border: 0 }}
                                    allowFullScreen
                                    loading="lazy"
                                    referrerPolicy="no-referrer-when-downgrade"
                                ></iframe>
                            </div>
                        </div>

                        {/* FORM */}
                        <div className="bg-white p-10 rounded shadow-2xl border-t-8 border-[color:var(--brand)]">
                            <h3 className="text-2xl font-bold font-display text-[color:var(--ink)] mb-6">Send us a Message</h3>
                            <ContactForm />
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
}
