"use client";

import Link from "next/link";
import Image from "next/image";
import { Facebook, Instagram, Twitter, Mail, Phone, MapPin } from "lucide-react";

export default function Footer() {
    const currentYear = new Date().getFullYear();

    return (
        <>
            <footer className="bg-gradient-to-b from-white to-zinc-50 border-t border-zinc-200/80 pt-16 pb-12 relative overflow-hidden">
                {/* Subtle premium light background visual details */}
                <div className="absolute top-0 left-1/4 w-96 h-96 bg-brand-accent/5 rounded-full filter blur-3xl pointer-events-none opacity-40" />
                <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-brand-accent/5 rounded-full filter blur-3xl pointer-events-none opacity-40" />

                <div className="max-w-[1400px] mx-auto px-6 relative z-10">
                    
                    {/* Top Section: Brand Info, Company, Products, Contact */}
                    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-12 gap-12 xl:gap-16 mb-12 text-left">
                        {/* Column 1: Brand Info */}
                        <div className="sm:col-span-2 xl:col-span-4 flex flex-col items-start">
                            <Link href="/" className="mb-6 block">
                                <Image src="/images/logo-new.png" alt="iRoof Logo" width={240} height={80} className="h-14 md:h-20 w-auto object-contain" />
                            </Link>
                            <p className="text-zinc-500 text-sm leading-relaxed mb-6 max-w-sm font-sans">
                                Manufactured with a high-grade synthetic resin formula and a protective ASA top layer, i-roof delivers lifetime durability and exceptional weather resilience for Sri Lankan homes.
                            </p>
                            <div className="flex gap-3">
                                {[
                                    { Icon: Facebook, href: "https://www.facebook.com/iRoof.lk/" },
                                    { Icon: Instagram, href: "https://www.instagram.com/iroof.lk" },
                                    { Icon: Twitter, href: "https://x.com/i_rooflk" },
                                ].map((social, i) => (
                                    <a key={i} href={social.href} target="_blank" rel="noopener noreferrer" className="w-9 h-9 rounded-xl border border-zinc-200 flex items-center justify-center bg-white hover:bg-brand-accent hover:border-brand-accent transition-all duration-300 group shadow-sm hover:-translate-y-0.5">
                                        <social.Icon className="w-3.5 h-3.5 text-zinc-500 group-hover:text-white transition-colors" />
                                    </a>
                                ))}
                            </div>
                        </div>

                        {/* Column 2: Company */}
                        <div className="xl:col-span-3">
                            <h4 className="text-[11px] font-black uppercase tracking-[0.25em] text-brand-accent mb-6 font-sans">Company</h4>
                            <ul className="space-y-4 font-sans">
                                {[
                                    { name: "About Us", href: "/about" },
                                    { name: "All Products", href: "/products" },
                                    { name: "News", href: "/news" },
                                    { name: "FAQs", href: "/faq" },
                                ].map(item => (
                                    <li key={item.name}>
                                        <Link href={item.href} className="text-sm font-medium text-zinc-500 hover:text-brand-accent transition-all duration-300 flex items-center gap-1 group">
                                            <span className="w-0 h-[2px] bg-brand-accent transition-all group-hover:w-2 group-hover:mr-1.5" />
                                            {item.name}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Column 3: Products */}
                        <div className="xl:col-span-3">
                            <h4 className="text-[11px] font-black uppercase tracking-[0.25em] text-brand-accent mb-6 font-sans">Products</h4>
                            <ul className="space-y-4 font-sans">
                                {[
                                    { name: "Chocolate Brown", href: "/products/iroof-max-chocolate-brown" },
                                    { name: "Brick Red", href: "/products/iroof-max-brick" },
                                    { name: "Dark Green", href: "/products/iroof-max-green" },
                                    { name: "White", href: "/products/iroof-max-white" },
                                ].map(item => (
                                    <li key={item.name}>
                                        <Link href={item.href} className="text-sm font-medium text-zinc-500 hover:text-brand-accent transition-all duration-300 flex items-center gap-1 group">
                                            <span className="w-0 h-[2px] bg-brand-accent transition-all group-hover:w-2 group-hover:mr-1.5" />
                                            {item.name}
                                        </Link>
                                    </li>
                                ))}
                            </ul>
                        </div>

                        {/* Column 4: Contact */}
                        <div className="xl:col-span-2">
                            <h4 className="text-[11px] font-black uppercase tracking-[0.25em] text-brand-accent mb-6 font-sans">Contact</h4>
                            <ul className="space-y-4 font-sans text-left">
                                <li>
                                    <a href="mailto:info@iroof.lk" className="flex items-center gap-3 group/link text-sm font-medium text-zinc-500 hover:text-brand-accent transition-colors">
                                        <Mail className="w-4 h-4 text-brand-accent shrink-0 transition-transform group-hover/link:scale-110" />
                                        <span className="truncate">info@iroof.lk</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="tel:0762200200" className="flex items-center gap-3 group/link text-sm font-medium text-zinc-500 hover:text-brand-accent transition-colors">
                                        <Phone className="w-4 h-4 text-brand-accent shrink-0 transition-transform group-hover/link:scale-110" />
                                        <span>076 2200 200</span>
                                    </a>
                                </li>
                                <li className="flex items-start gap-3 text-sm font-medium text-zinc-500">
                                    <MapPin className="w-4 h-4 mt-1 text-brand-accent shrink-0" />
                                    <span className="leading-relaxed">Idea Industries, 06,<br />Lucas Road, Colombo 14</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </footer>
            
            {/* Small Height Black Copyright Bar */}
            <div className="bg-zinc-950 text-white/50 text-[10px] font-sans py-4 border-t border-zinc-900">
                <div className="max-w-[1400px] mx-auto px-6 flex flex-col sm:flex-row justify-between items-center gap-4 text-center">
                    <div>
                        <span className="tracking-wider">© {currentYear} iRoof.lk | All Rights Reserved.</span>
                    </div>
                    <div>
                        <span className="tracking-wider">
                            A product of{" "}
                            <a
                                href="https://ideagroup.lk"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="font-bold text-white hover:text-brand-accent transition-colors"
                            >
                                Idea Group (Pvt) Ltd.
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </>
    );
}