"use client";

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

const Facebook = (props: React.SVGProps<SVGSVGElement>) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>);
const Twitter = (props: React.SVGProps<SVGSVGElement>) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M22 4.01c-1 .49-1.98.689-3 .99-1.121-1.265-2.783-1.335-4.38-.737S11.977 6.323 12 8v1c-3.245.083-6.135-1.395-8-4 0 0-4.182 7.433 4 11-1.872 1.247-3.739 2.088-6 2 3.308 1.803 6.913 2.423 10.034 1.517 3.58-1.04 6.522-3.723 7.651-7.742a13.84 13.84 0 0 0 .497-3.753C20.18 7.773 21.692 5.25 22 4.009z"/></svg>);
const Linkedin = (props: React.SVGProps<SVGSVGElement>) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>);
const Instagram = (props: React.SVGProps<SVGSVGElement>) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>);
const Youtube = (props: React.SVGProps<SVGSVGElement>) => (<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33 2.78 2.78 0 0 0 1.94 2c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.33z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/></svg>);

export function Footer() {
  return (
    <footer className="bg-[#050B20] text-gray-400 pt-16 pb-8 border-t border-gray-900 font-sans">
      <div className="container mx-auto px-4 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 lg:gap-4 xl:gap-8 mb-12">
          
          {/* Column 1: Brand & Contact Info */}
          <div className="lg:col-span-3 space-y-7">
            <Link href="/" className="flex items-center gap-2 mb-2">
              <div className="flex h-11 w-11 items-center justify-center rounded-lg bg-transparent border-2 border-white text-lg font-bold text-white">
                JV
              </div>
              <span className="text-[28px] font-bold text-white tracking-tight">JOBVUMI</span>
            </Link>
            <p className="text-[13px] leading-relaxed max-w-[260px] text-gray-400">
              Your trusted partner in finding the right job and building a better future.
            </p>
            
            <div className="flex items-center gap-4">
               <div className="w-10 h-10 bg-[#161a33] rounded flex items-center justify-center text-[#7c3aed] shrink-0">
                 <Phone className="w-4 h-4" />
               </div>
               <div>
                 <p className="text-[11px] text-gray-500 mb-0.5">Call us</p>
                 <p className="text-[13px] font-semibold text-gray-300">9777159937</p>
               </div>
            </div>

            <div className="flex items-center gap-4">
               <div className="w-10 h-10 bg-[#161a33] rounded flex items-center justify-center text-[#7c3aed] shrink-0">
                 <Mail className="w-4 h-4" />
               </div>
               <div>
                 <p className="text-[11px] text-gray-500 mb-0.5">Email us</p>
                 <p className="text-[13px] font-semibold text-gray-300">hello@jobvumi.com</p>
               </div>
            </div>

            <div className="pt-2">
              <p className="font-semibold text-white mb-4 text-[13px]">Follow us on social media</p>
              <div className="flex items-center gap-3">
                {[Facebook, Linkedin, Twitter, Instagram, Youtube].map((Icon, i) => (
                  <Link key={i} href="#" className="flex h-9 w-9 items-center justify-center rounded-full bg-[#161a33] hover:bg-[#7c3aed] transition-colors">
                    <Icon className="h-4 w-4 text-white" />
                  </Link>
                ))}
              </div>
            </div>
          </div>

          {/* Column 2: For Candidates */}
          <div className="lg:col-span-2">
            <h3 className="text-white font-bold text-[15px] mb-2">For Candidates</h3>
            <div className="w-8 h-0.5 bg-[#7c3aed] mb-6"></div>
            <ul className="space-y-4 text-[13px]">
              {['Jobs', 'Companies', 'Interview Prep', 'Career Tips', 'Browse Categories', 'Salary Insights', 'Job Alerts'].map(link => (
                <li key={link}><Link href="#" className="flex items-center gap-2 hover:text-white transition-colors"><ChevronRight className="w-3.5 h-3.5 shrink-0" /> {link}</Link></li>
              ))}
            </ul>
          </div>

          {/* Column 3: For Employers */}
          <div className="lg:col-span-2">
            <h3 className="text-white font-bold text-[15px] mb-2">For Employers</h3>
            <div className="w-8 h-0.5 bg-[#7c3aed] mb-6"></div>
            <ul className="space-y-4 text-[13px]">
              {['Post a Job', 'Browse Candidates', 'Pricing', 'Employer Login', 'Solutions', 'Resource Center'].map(link => (
                <li key={link}><Link href="#" className="flex items-center gap-2 hover:text-white transition-colors"><ChevronRight className="w-3.5 h-3.5 shrink-0" /> {link}</Link></li>
              ))}
            </ul>
          </div>

          {/* Column 4: Quick Links */}
          <div className="lg:col-span-2">
            <h3 className="text-white font-bold text-[15px] mb-2">Quick Links</h3>
            <div className="w-8 h-0.5 bg-[#7c3aed] mb-6"></div>
            <ul className="space-y-4 text-[13px]">
              {['About Us', 'Contact Us', 'Blog', 'Success Stories', 'News & Updates', 'Sitemap'].map(link => (
                <li key={link}><Link href="#" className="flex items-center gap-2 hover:text-white transition-colors"><ChevronRight className="w-3.5 h-3.5 shrink-0" /> {link}</Link></li>
              ))}
            </ul>
          </div>

          {/* Column 5: Support */}
          <div className="lg:col-span-1">
            <h3 className="text-white font-bold text-[15px] mb-2">Support</h3>
            <div className="w-8 h-0.5 bg-[#7c3aed] mb-6"></div>
            <ul className="space-y-4 text-[13px]">
              {['FAQs', 'Help Center', 'Privacy Policy', 'Terms & Conditions', 'Report an Issue'].map(link => (
                <li key={link}><Link href="#" className="flex items-center gap-2 hover:text-white transition-colors"><ChevronRight className="w-3.5 h-3.5 shrink-0" /> {link}</Link></li>
              ))}
            </ul>
          </div>

          {/* Column 6: Address & Help */}
          <div className="lg:col-span-2 space-y-6">
            <div>
              <h3 className="text-white font-bold text-[15px] mb-2">Address</h3>
              <div className="w-8 h-0.5 bg-[#7c3aed] mb-6"></div>
              <div className="flex items-start gap-4 text-[13px] leading-[1.6]">
                <div className="w-8 h-8 bg-[#161a33] rounded flex shrink-0 items-center justify-center text-[#7c3aed] mt-1">
                  <MapPin className="h-4 w-4" />
                </div>
                <p>
                  3rd Floor, Room No-305,<br/>
                  DLF Cyber City,<br/>
                  Chandaka Industrial Estate,<br/>
                  Patia, Bhubaneswar,<br/>
                  Odisha 751024
                </p>
              </div>
            </div>
            
            <div className="bg-[#161a33] border border-gray-800 rounded-xl p-4 flex items-center gap-3 group cursor-pointer hover:border-[#7c3aed] transition-colors mt-8">
               <div className="w-10 h-10 bg-[#e0e7ff] text-[#7c3aed] rounded-full flex items-center justify-center shrink-0">
                 <Headphones className="w-5 h-5" />
               </div>
               <div className="flex-1">
                 <h4 className="text-white font-bold text-[13px]">Need Help?</h4>
                 <p className="text-[10px] text-gray-400 group-hover:text-gray-300">Visit our Help Center</p>
               </div>
               <ChevronRight className="w-4 h-4 text-white shrink-0" />
            </div>
          </div>

        </div>

        {/* Bottom Section */}
        <div className="flex flex-col md:flex-row items-center justify-between pt-6 border-t border-gray-800 text-[12px] text-gray-400 relative">
          <div className="space-y-1.5 mb-4 md:mb-0 text-center md:text-left">
            <p className="font-medium text-gray-300">© 2025 Jobvumi - Job Portal. All rights reserved.</p>
            <p>Powered by Vanisha Cooltech System</p>
          </div>
          
          <div className="flex items-center gap-4 font-semibold text-gray-400">
            <Link href="/admin" className="hover:text-white transition-colors">Admin Login</Link>
            <span className="w-1 h-1 rounded-full bg-gray-600"></span>
            <Link href="/associate" className="hover:text-white transition-colors">Associate Login</Link>
          </div>
        </div>
      </div>
    </footer>
  );
}