import Link from "next/link";
import { MapPin, Phone, Mail, Clock } from "lucide-react";

export default function Footer() {
    return (
        <footer className="bg-[color:var(--bg-dark)] border-t border-white/5 pt-20 pb-8 text-white">
            <div className="mx-auto max-w-7xl px-6 lg:px-8">
                <div className="grid lg:grid-cols-4 gap-12 mb-16">
                    <div className="lg:col-span-1">
                        <span className="font-display text-2xl font-bold tracking-tight uppercase leading-none text-white">Budd</span>
                        <span className="block text-xs font-bold tracking-[0.3em] text-[color:var(--brand-light)] uppercase mt-1">Electric Co.</span>
                        <p className="mt-6 text-gray-400 text-sm leading-relaxed">
                            Family-owned since 1969. Providing elite residential and commercial electrical services to Corpus Christi and the Coastal Bend.
                        </p>
                    </div>

                    <div>
                        <p className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Quick Links</p>
                        <ul className="space-y-4 text-sm text-gray-400">
                            <li><Link href="/" className="hover:text-[color:var(--brand-light)] transition-colors">Home</Link></li>
                            <li><Link href="/about-us" className="hover:text-[color:var(--brand-light)] transition-colors">About Us</Link></li>
                            <li><Link href="/electrical-services" className="hover:text-[color:var(--brand-light)] transition-colors">Electrical Services</Link></li>
                            <li><Link href="/photo-gallery" className="hover:text-[color:var(--brand-light)] transition-colors">Photo Gallery</Link></li>
                            <li><Link href="/contact-us" className="hover:text-[color:var(--brand-light)] transition-colors">Contact Us</Link></li>
                        </ul>

                        {/* Desktop Payment Methods - Moved here */}
                        <div className="hidden lg:block mt-8 w-[200px]">
                            <p className="text-white text-xs font-bold uppercase tracking-wider mb-3">We Accept:</p>
                            <div className="grid grid-cols-3 gap-2">
                                {/* Visa */}
                                <div className="flex flex-col items-center gap-1">
                                    <div className="bg-white px-2 py-1.5 rounded shadow-sm">
                                        <svg className="h-5" viewBox="0 0 48 16" fill="none">
                                            <path d="M20.5 2L17.5 14H14L17 2H20.5ZM31 2.5C30.2 2.2 29 2 27.5 2C24 2 21.5 3.8 21.5 6.3C21.5 8.2 23.3 9.2 24.7 9.8C26.1 10.4 26.6 10.8 26.6 11.4C26.6 12.3 25.5 12.7 24.5 12.7C23 12.7 22.2 12.5 21 12L20.5 11.8L20 14.2C20.8 14.5 22.3 14.8 23.8 14.8C27.5 14.8 30 13 30 10.4C30 8.9 29 7.8 26.8 6.9C25.5 6.3 24.7 5.9 24.7 5.3C24.7 4.7 25.4 4.1 26.9 4.1C28.1 4.1 29 4.3 29.7 4.6L30 4.7L30.5 2.3L31 2.5ZM38.5 2H36C35 2 34.3 2.3 33.9 3.2L28.5 14H32L32.8 12H37.5L38 14H41.5L38.5 2ZM35.5 5L36.8 9.5H34L35.5 5ZM13.5 2L10 11.5L9.6 9.5L8.3 3.5C8.1 2.7 7.5 2 6.6 2H0.5L0.4 2.5C1.8 2.8 3.1 3.2 4.3 3.8L7.9 14H11.5L17 2H13.5Z" fill="#1434CB" />
                                        </svg>
                                    </div>
                                    <span className="text-gray-400 text-[10px] text-center">Visa</span>
                                </div>
                                {/* MasterCard */}
                                <div className="flex flex-col items-center gap-1">
                                    <div className="bg-white px-2 py-1.5 rounded shadow-sm">
                                        <svg className="h-5" viewBox="0 0 48 32" fill="none">
                                            <circle cx="18" cy="16" r="10" fill="#EB001B" />
                                            <circle cx="30" cy="16" r="10" fill="#F79E1B" />
                                            <path d="M24 8.5C22.2 10 21 12.3 21 15C21 17.7 22.2 20 24 21.5C25.8 20 27 17.7 27 15C27 12.3 25.8 10 24 8.5Z" fill="#FF5F00" />
                                        </svg>
                                    </div>
                                    <span className="text-gray-400 text-[10px] text-center">MasterCard</span>
                                </div>
                                {/* Cash */}
                                <div className="flex flex-col items-center gap-1">
                                    <div className="bg-green-600 px-2 py-1.5 rounded shadow-sm">
                                        <svg className="h-5 w-8" viewBox="0 0 40 28" fill="none">
                                            <rect x="2" y="6" width="36" height="16" rx="2" fill="#22C55E" stroke="white" strokeWidth="2" />
                                            <circle cx="20" cy="14" r="5" fill="white" />
                                            <text x="20" y="17" fontSize="8" fill="#22C55E" textAnchor="middle" fontWeight="bold">$</text>
                                        </svg>
                                    </div>
                                    <span className="text-gray-400 text-[10px] text-center">Cash</span>
                                </div>
                                {/* Check */}
                                <div className="flex flex-col items-center gap-1">
                                    <div className="bg-blue-100 px-2 py-1.5 rounded shadow-sm border border-blue-300">
                                        <svg className="h-5 w-8" viewBox="0 0 48 28" fill="none">
                                            <rect x="2" y="4" width="44" height="20" rx="1" fill="white" stroke="#3B82F6" strokeWidth="1.5" />
                                            <line x1="6" y1="10" x2="22" y2="10" stroke="#3B82F6" strokeWidth="1" />
                                            <line x1="6" y1="14" x2="18" y2="14" stroke="#3B82F6" strokeWidth="1" />
                                            <line x1="6" y1="18" x2="20" y2="18" stroke="#3B82F6" strokeWidth="1" />
                                            <text x="32" y="18" fontSize="12" fill="#3B82F6" fontFamily="cursive" fontWeight="bold">✓</text>
                                        </svg>
                                    </div>
                                    <span className="text-gray-400 text-[10px] text-center">Check</span>
                                </div>
                                {/* Debit */}
                                <div className="flex flex-col items-center gap-1">
                                    <div className="bg-orange-500 px-2 py-1.5 rounded shadow-sm">
                                        <span className="text-white font-bold text-[10px] tracking-wide">DEBIT</span>
                                    </div>
                                    <span className="text-gray-400 text-[10px] text-center">Debit</span>
                                </div>
                                {/* Credit Card */}
                                <div className="flex flex-col items-center gap-1">
                                    <div className="bg-gray-700 px-2 py-1.5 rounded shadow-sm">
                                        <svg className="h-5 w-8" viewBox="0 0 40 28" fill="none">
                                            <rect x="2" y="4" width="36" height="20" rx="2" fill="#374151" stroke="#9CA3AF" strokeWidth="1" />
                                            <rect x="2" y="8" width="36" height="4" fill="#1F2937" />
                                            <rect x="6" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
                                            <rect x="20" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
                                        </svg>
                                    </div>
                                    <span className="text-gray-400 text-[10px] text-center">Credit</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <p className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Services</p>
                        <ul className="space-y-4 text-sm text-gray-400">
                            <li><Link href="/electrical-services#residential" className="hover:text-[color:var(--brand-light)] transition-colors">Residential</Link></li>
                            <li><Link href="/electrical-services#commercial" className="hover:text-[color:var(--brand-light)] transition-colors">Commercial</Link></li>
                            <li><Link href="/electrical-services#generator" className="hover:text-[color:var(--brand-light)] transition-colors">Generator Installation</Link></li>
                        </ul>
                    </div>

                    <div>
                        <p className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Contact Info</p>
                        <ul className="space-y-4 text-sm text-gray-400 mb-6">
                            <li className="flex gap-3">
                                <MapPin size={18} className="text-[color:var(--brand-light)] flex-none" />
                                <span>3910 Apollo Rd.<br />Corpus Christi, TX 78413</span>
                            </li>
                            <li className="flex gap-3">
                                <Phone size={18} className="text-[color:var(--brand-light)] flex-none" />
                                <span>(361) 855-2255</span>
                            </li>
                            <li className="flex gap-3">
                                <Mail size={18} className="text-[color:var(--brand-light)] flex-none" />
                                <span>buddelectric@grandecom.net</span>
                            </li>
                            <li className="flex gap-3">
                                <Clock size={18} className="text-[color:var(--brand-light)] flex-none" />
                                <span>Mon-Fri: 8:00 AM - 5:00 PM<br />Sat-Sun: Closed</span>
                            </li>
                        </ul>

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




                {/* Payment Methods - Mobile Only */}
                <div className="border-t border-white/5 pt-8 pb-6 lg:hidden">
                    <div className="flex flex-col items-center justify-center gap-4">
                        <span className="text-gray-400 text-xs uppercase tracking-wider">We Accept:</span>
                        <div className="flex flex-wrap items-start justify-center gap-6">
                            {/* Visa */}
                            <div className="flex flex-col items-center gap-2">
                                <div className="bg-white px-4 py-2.5 rounded shadow-sm">
                                    <svg className="h-7" viewBox="0 0 48 16" fill="none">
                                        <path d="M20.5 2L17.5 14H14L17 2H20.5ZM31 2.5C30.2 2.2 29 2 27.5 2C24 2 21.5 3.8 21.5 6.3C21.5 8.2 23.3 9.2 24.7 9.8C26.1 10.4 26.6 10.8 26.6 11.4C26.6 12.3 25.5 12.7 24.5 12.7C23 12.7 22.2 12.5 21 12L20.5 11.8L20 14.2C20.8 14.5 22.3 14.8 23.8 14.8C27.5 14.8 30 13 30 10.4C30 8.9 29 7.8 26.8 6.9C25.5 6.3 24.7 5.9 24.7 5.3C24.7 4.7 25.4 4.1 26.9 4.1C28.1 4.1 29 4.3 29.7 4.6L30 4.7L30.5 2.3L31 2.5ZM38.5 2H36C35 2 34.3 2.3 33.9 3.2L28.5 14H32L32.8 12H37.5L38 14H41.5L38.5 2ZM35.5 5L36.8 9.5H34L35.5 5ZM13.5 2L10 11.5L9.6 9.5L8.3 3.5C8.1 2.7 7.5 2 6.6 2H0.5L0.4 2.5C1.8 2.8 3.1 3.2 4.3 3.8L7.9 14H11.5L17 2H13.5Z" fill="#1434CB" />
                                    </svg>
                                </div>
                                <span className="text-gray-400 text-xs">Visa</span>
                            </div>
                            {/* MasterCard */}
                            <div className="flex flex-col items-center gap-2">
                                <div className="bg-white px-4 py-2.5 rounded shadow-sm">
                                    <svg className="h-7" viewBox="0 0 48 32" fill="none">
                                        <circle cx="18" cy="16" r="10" fill="#EB001B" />
                                        <circle cx="30" cy="16" r="10" fill="#F79E1B" />
                                        <path d="M24 8.5C22.2 10 21 12.3 21 15C21 17.7 22.2 20 24 21.5C25.8 20 27 17.7 27 15C27 12.3 25.8 10 24 8.5Z" fill="#FF5F00" />
                                    </svg>
                                </div>
                                <span className="text-gray-400 text-xs">MasterCard</span>
                            </div>
                            {/* Cash */}
                            <div className="flex flex-col items-center gap-2">
                                <div className="bg-green-600 px-4 py-2.5 rounded shadow-sm">
                                    <svg className="h-7 w-10" viewBox="0 0 40 28" fill="none">
                                        <rect x="2" y="6" width="36" height="16" rx="2" fill="#22C55E" stroke="white" strokeWidth="2" />
                                        <circle cx="20" cy="14" r="5" fill="white" />
                                        <text x="20" y="17" fontSize="8" fill="#22C55E" textAnchor="middle" fontWeight="bold">$</text>
                                    </svg>
                                </div>
                                <span className="text-gray-400 text-xs">Cash</span>
                            </div>
                            {/* Check */}
                            <div className="flex flex-col items-center gap-2">
                                <div className="bg-blue-100 px-4 py-2.5 rounded shadow-sm border border-blue-300">
                                    <svg className="h-7 w-12" viewBox="0 0 48 28" fill="none">
                                        <rect x="2" y="4" width="44" height="20" rx="1" fill="white" stroke="#3B82F6" strokeWidth="1.5" />
                                        <line x1="6" y1="10" x2="22" y2="10" stroke="#3B82F6" strokeWidth="1" />
                                        <line x1="6" y1="14" x2="18" y2="14" stroke="#3B82F6" strokeWidth="1" />
                                        <line x1="6" y1="18" x2="20" y2="18" stroke="#3B82F6" strokeWidth="1" />
                                        <text x="32" y="18" fontSize="12" fill="#3B82F6" fontFamily="cursive" fontWeight="bold">✓</text>
                                    </svg>
                                </div>
                                <span className="text-gray-400 text-xs">Check</span>
                            </div>
                            {/* Debit */}
                            <div className="flex flex-col items-center gap-2">
                                <div className="bg-orange-500 px-4 py-2.5 rounded shadow-sm">
                                    <span className="text-white font-bold text-sm tracking-wide">DEBIT</span>
                                </div>
                                <span className="text-gray-400 text-xs">Debit</span>
                            </div>
                            {/* Credit Card */}
                            <div className="flex flex-col items-center gap-2">
                                <div className="bg-gray-700 px-4 py-2.5 rounded shadow-sm">
                                    <svg className="h-7 w-10" viewBox="0 0 40 28" fill="none">
                                        <rect x="2" y="4" width="36" height="20" rx="2" fill="#374151" stroke="#9CA3AF" strokeWidth="1" />
                                        <rect x="2" y="8" width="36" height="4" fill="#1F2937" />
                                        <rect x="6" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
                                        <rect x="20" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
                                    </svg>
                                </div>
                                <span className="text-gray-400 text-xs">Credit Card</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-500 text-xs uppercase tracking-wider">
                    <p>&copy; {new Date().getFullYear()} Budd Electric Co. TECL #17007</p>
                    <div className="flex gap-6 mt-4 md:mt-0">
                        <Link href="https://www.thryv.com/client-privacy-policy/" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Privacy Policy</Link>
                        <Link href="https://www.thryv.com/client-terms-of-use/" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Terms of Service</Link>
                    </div>
                </div>
            </div>
        </footer >
    );
}
