import Link from 'next/link';
import Image from 'next/image';
import { useTranslations, useLocale } from 'next-intl';

export default function Footer() {
  const t = useTranslations('Footer');
  const locale = useLocale();
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-white text-neutral-dark py-16 border-t border-neutral-light">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 mb-12">
          {/* Column 1: Legal & Languages */}
          <div className="space-y-8">
            <div>
              <h4 className="text-lg font-bold mb-4">{t('legal')}</h4>
              <ul className="space-y-2 text-sm text-text-secondary">
                <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-primary">{t('legalNotice')}</Link></li>
                <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-primary">{t('privacyPolicy')}</Link></li>
                <li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-primary">{t('terms')}</Link></li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-bold mb-4">{t('languages')}</h4>
              <ul className="space-y-2 text-sm text-text-secondary">
                <li><Link href="/en" className="hover:text-primary">English</Link></li>
                <li><Link href="/de" className="hover:text-primary">Deutsch</Link></li>
              </ul>
            </div>
            <div>
              <p className="text-sm text-text-secondary">
                Copyright © {currentYear} KLZ Cables.<br />
                All rights reserved.
              </p>
            </div>
            <div>
               <Image 
                  src="/logo-white.svg" 
                  alt="KLZ Cables" 
                  width={100} 
                  height={25} 
                  className="h-6 w-auto invert"
                  unoptimized
                />
            </div>
          </div>

          {/* Column 2: Archives */}
          <div>
            <h4 className="text-lg font-bold mb-4">{t('archives')}</h4>
            <ul className="space-y-2 text-sm text-text-secondary">
              <li><Link href="#" className="hover:text-primary">November 2025</Link></li>
              <li><Link href="#" className="hover:text-primary">September 2025</Link></li>
              <li><Link href="#" className="hover:text-primary">August 2025</Link></li>
              <li><Link href="#" className="hover:text-primary">June 2025</Link></li>
              <li><Link href="#" className="hover:text-primary">May 2025</Link></li>
            </ul>
          </div>

          {/* Column 3: Categories */}
          <div>
            <h4 className="text-lg font-bold mb-4">{t('categories')}</h4>
            <ul className="space-y-2 text-sm text-text-secondary">
              <li><Link href="#" className="hover:text-primary">Cable Logistics</Link></li>
              <li><Link href="#" className="hover:text-primary">Cable Technology</Link></li>
              <li><Link href="#" className="hover:text-primary">KLZ News</Link></li>
              <li><Link href="#" className="hover:text-primary">Renewable Energy</Link></li>
            </ul>
          </div>

          {/* Column 4: Recent Posts */}
          <div className="lg:col-span-2">
            <h4 className="text-lg font-bold mb-4">{t('recentPosts')}</h4>
            <ul className="space-y-4 text-sm text-text-secondary">
              <li>
                <Link href="#" className="hover:text-primary block font-medium">Focus on wind farm construction: three typical cable challenges</Link>
              </li>
              <li>
                <Link href="#" className="hover:text-primary block font-medium">Why the N2XS(F)2Y is the ideal cable for your energy project</Link>
              </li>
              <li>
                <Link href="#" className="hover:text-primary block font-medium">Shortage of NA2XSF2Y? We have the three-core medium-voltage cable</Link>
              </li>
              <li>
                <Link href="#" className="hover:text-primary block font-medium">Which cables for wind power? Differences from low to extra-high voltage explained</Link>
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      {/* Slide out widget area (hidden for now, but referenced in HTML) */}
      <div className="fixed top-0 right-0 h-full w-80 bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
         {/* Content would go here */}
      </div>
    </footer>
  );
}