import Link from "next/link";
import { Facebook, Youtube, Home, Clock, Newspaper, Info, Users } from "lucide-react";
import { socialLinks } from "@/data";

export function Footer() {
  return (
    <footer className="bg-slate-950 text-slate-200 border-t border-slate-800 pt-16 pb-8">
      <div className="container px-4">
        <div className="grid md:grid-cols-3 gap-12 mb-12">
            <div>
                <Link href="/" className="flex items-center gap-2 font-bold text-xl mb-4 text-white">
                    <img src="/logo-circle.png" alt="Trains of Rajbari" className="h-8 w-8 rounded-full" />
                    <span>Trains of Rajbari</span>
                </Link>
                <p className="text-slate-400 text-sm leading-relaxed">
                    Connecting the people of Rajbari through the tracks. Providing real-time updates, schedules, and a community platform for railway enthusiasts.
                </p>
            </div>
            
            <div>
                <h3 className="font-bold mb-4 text-white">Quick Links</h3>
                <div className="flex flex-col gap-2 text-sm text-slate-400">
                    <Link href="/" className="flex items-center gap-2 hover:text-primary transition-colors"><Home size={14} />Home</Link>
                    <Link href="/schedules" className="flex items-center gap-2 hover:text-primary transition-colors"><Clock size={14} />Schedules</Link>
                    <Link href="/blogs" className="flex items-center gap-2 hover:text-primary transition-colors"><Newspaper size={14} />Updates &amp; Blog</Link>
                    <Link href="/about" className="flex items-center gap-2 hover:text-primary transition-colors"><Info size={14} />About Us</Link>
                </div>
            </div>

            <div>
                <h3 className="font-bold mb-4 text-white">Connect With Us</h3>
                <div className="flex gap-4">
                    <a href={socialLinks.facebookPage} target="_blank" rel="noopener noreferrer" className="h-10 w-10 flex items-center justify-center rounded-full bg-slate-900 border border-slate-700 hover:border-primary hover:text-primary transition-colors">
                        <Facebook size={20} />
                    </a>
                    <a href={socialLinks.youtube} target="_blank" rel="noopener noreferrer" className="h-10 w-10 flex items-center justify-center rounded-full bg-slate-900 border border-slate-700 hover:border-primary hover:text-primary transition-colors">
                        <Youtube size={20} />
                    </a>
                     <a href={socialLinks.facebookGroup} target="_blank" rel="noopener noreferrer" className="h-10 w-10 flex items-center justify-center rounded-full bg-slate-900 border border-slate-700 hover:border-primary hover:text-primary transition-colors" title="Join our Group">
                         <Users size={18} />
                    </a>
                </div>
            </div>
        </div>
        
        <div className="border-t border-slate-800 pt-8 text-center text-sm text-slate-500">
            <p>&copy; {new Date().getFullYear()} Trains of Rajbari. All rights reserved.</p>
            <p className="mt-2">
              Developed by <a href="https://tarikul.dev/" target="_blank" rel="noopener noreferrer" className="text-primary underline hover:text-secondary transition-colors">TARIKUL ISLAM</a>.
            </p>
        </div>
      </div>
    </footer>
  );
}
