'use client';

import * as React from 'react';
import Link from 'next/link';
import { Linkedin, Facebook, Instagram } from 'lucide-react';
import Image from 'next/image';
import { allProducts } from '@/app/lib/site-data';

const XIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z" />
  </svg>
);

function Logo() {
  return (
      <Image
        src="https://demo.voitekk.com/voitekk/assets/images/voitekkLogo.png"
        alt="Voitekk Logo"
        width={52}
        height={13}
        priority
        className="object-contain"
      />
  );
}

export function Footer() {
  const [year, setYear] = React.useState<number | null>(null);

  React.useEffect(() => {
    setYear(new Date().getFullYear());
  }, []);

  const socialLinks = [
    { name: 'LinkedIn', icon: Linkedin, url: 'https://in.linkedin.com/company/voitekk-softsol-pvt-ltd' },
    { name: 'Facebook', icon: Facebook, url: 'https://www.facebook.com/VoitekkSoftSolPvtLtd/' },
    { name: 'Instagram', icon: Instagram, url: 'https://www.instagram.com/voitekkbpo/?hl=en' },
    { name: 'Twitter', icon: XIcon, url: 'https://x.com/voitekk' },
  ];

  const footerLinks = {
      "Capabilities": allProducts.map(p => ({ label: p.title, href: `/products/${p.slug}`})),
      "Resources": [
          { label: 'Customer Stories', href: '/case-studies' },
          { label: 'Blog', href: '/blog' },
      ],
      "Company": [
          { label: 'About Us', href: '/about' },
          { label: 'Careers', href: '/contact' },
          { label: 'Contact Us', href: '/contact' },
      ],
      "Partners": [
          { label: 'Find a Partner', href: '/contact' },
          { label: 'Become a Partner', href: '/contact' },
      ]
  }

  return (
    <footer className="bg-black text-slate-300">
      <div className="container mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-5">
          <div className="col-span-2 md:col-span-4 lg:col-span-1">
            <Link href="/" className="mb-4 inline-block">
              <Logo />
            </Link>
             <div className="flex space-x-4 mt-4">
              {socialLinks.map((social) => (
                <a key={social.name} href={social.url} className="text-slate-400 hover:text-white" target="_blank" rel="noopener noreferrer">
                  <social.icon className="h-5 w-5" />
                  <span className="sr-only">{social.name}</span>
                </a>
              ))}
            </div>
          </div>
          {Object.entries(footerLinks).map(([title, links]) => (
             <div key={title}>
                <h3 className="font-headline text-sm font-semibold uppercase tracking-wider text-white/90">{title}</h3>
                <ul className="mt-4 space-y-2">
                {links.map((link) => (
                    <li key={`${link.href}-${link.label}`}>
                    <Link
                        href={link.href}
                        className="text-sm text-slate-400 hover:text-white"
                    >
                        {link.label}
                    </Link>
                    </li>
                ))}
                </ul>
            </div>
          ))}
        </div>

        <div className="mt-12 border-t border-white/20 pt-8 flex flex-col sm:flex-row-reverse justify-between items-center gap-4">
            <div className="flex flex-wrap gap-x-4 gap-y-2 text-sm text-slate-400 justify-center">
                 <Link href="/terms-of-use" className="hover:text-white">Terms of Use</Link>
                 <Link href="/privacy-policy" className="hover:text-white">Privacy Policy</Link>
                 <Link href="/legal" className="hover:text-white">Legal</Link>
                 <Link href="/cookie-settings" className="hover:text-white">Cookie Settings</Link>
            </div>
          <p className="text-sm text-slate-400 text-center sm:text-left">&copy; {year || 2024} Voitekk. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}