klz-cables.com/components/Footer.tsx

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

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

  return (
    <footer className="bg-primary text-white py-24 relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
      
      <Container>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 mb-20">
          {/* Brand Column */}
          <div className="lg:col-span-4 space-y-8">
            <Link href={`/${locale}`} className="inline-block group">
              <Image 
                src="/logo-white.svg" 
                alt={t('products')} 
                width={150} 
                height={40} 
                className="h-10 w-auto transition-transform duration-500 group-hover:scale-110"
                unoptimized
              />
            </Link>
            <p className="text-white/60 text-base md:text-lg leading-relaxed max-w-sm">
              {t('tagline')}
            </p>
            <div className="flex gap-4">
              <a href="https://www.linkedin.com/company/klz-vertriebs-gmbh/" target="_blank" rel="noopener noreferrer" className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center hover:bg-accent hover:text-primary-dark transition-all duration-300 border border-white/10">
                <span className="sr-only">LinkedIn</span>
                <svg className="w-5 h-5 fill-current" viewBox="0 0 24 24">
                  <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
                </svg>
              </a>
            </div>
          </div>

          {/* Links Columns */}
          <div className="lg:col-span-2">
            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('legal')}</h4>
            <ul className="space-y-4 text-white/70">
              <li><Link href={`/${locale}/${t('legalNoticeSlug')}`} className="hover:text-white transition-colors">{t('legalNotice')}</Link></li>
              <li><Link href={`/${locale}/${t('privacyPolicySlug')}`} className="hover:text-white transition-colors">{t('privacyPolicy')}</Link></li>
              <li><Link href={`/${locale}/${t('termsSlug')}`} className="hover:text-white transition-colors">{t('terms')}</Link></li>
            </ul>
          </div>

          <div className="lg:col-span-2">
            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('company')}</h4>
            <ul className="space-y-4 text-white/70">
              <li><Link href={`/${locale}/team`} className="hover:text-white transition-colors">{navT('team')}</Link></li>
              <li><Link href={`/${locale}/products`} className="hover:text-white transition-colors">{navT('products')}</Link></li>
              <li><Link href={`/${locale}/blog`} className="hover:text-white transition-colors">{navT('blog')}</Link></li>
              <li><Link href={`/${locale}/contact`} className="hover:text-white transition-colors">{navT('contact')}</Link></li>
            </ul>
          </div>

          {/* Recent Posts Column */}
          <div className="lg:col-span-4">
            <h4 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">{t('recentPosts')}</h4>
            <ul className="space-y-6">
              {[
                "Focus on wind farm construction: three typical cable challenges",
                "Why the N2XS(F)2Y is the ideal cable for your energy project"
              ].map((post, i) => (
                <li key={i}>
                  <Link href="#" className="group block">
                    <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                      {post}
                    </p>
                    <span className="text-xs text-white/40 uppercase tracking-widest">{t('readArticle')} &rarr;</span>
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
          <p>{t('copyright', { year: currentYear })}</p>
          <div className="flex gap-8">
            <Link href="/en" className="hover:text-white transition-colors">English</Link>
            <Link href="/de" className="hover:text-white transition-colors">Deutsch</Link>
          </div>
        </div>
      </Container>
    </footer>
  );
}