e-tib.com/components/layout/Footer.tsx

import Link from 'next/link';
import Image from 'next/image';
import { useLocale } from 'next-intl';
import { ShieldCheck, Leaf, Lock, Accessibility, Zap } from 'lucide-react';
import { LanguageSwitcher } from './LanguageSwitcher';

interface CompanyInfo {
  contactEmail: string;
  contactPhone: string;
  address: string;
}

interface FooterProps {
  companyInfo?: CompanyInfo;
}

export function Footer({ companyInfo }: FooterProps) {
  const locale = useLocale();

  return (
    <footer className="bg-neutral-dark text-neutral-light py-16 relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent" />
      
      <div className="container grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-12 lg:gap-8 mb-12">
        {/* Brand Column */}
        <div className="col-span-1 md:col-span-2 lg:col-span-4 space-y-6">
          <Link href={`/${locale}`} className="relative block h-14 w-48 mb-6 group">
            <Image
              src="/assets/logo-white.png"
              alt="E-TIB Gruppe"
              fill
              className="object-contain object-left transition-transform duration-500 group-hover:scale-105"
            />
          </Link>
          <p className="text-white/60 text-base leading-relaxed max-w-sm">
            {locale === 'de' 
              ? 'Die Experten für Kabeltiefbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
              : 'Experts in cable construction, horizontal directional drilling, and comprehensive infrastructure projects. Quality and reliability from Guben.'}
          </p>
          {companyInfo && (
            <div className="text-white/70 text-sm space-y-3 mt-8 border-t border-white/10 pt-6 max-w-xs">
              <p className="whitespace-pre-line font-medium">{companyInfo.address}</p>
              <p>Email: <a href={`mailto:${companyInfo.contactEmail}`} className="hover:text-primary transition-colors">{companyInfo.contactEmail}</a></p>
              <p>Tel: <a href={`tel:${companyInfo.contactPhone.replace(/\s+/g, '')}`} className="hover:text-primary transition-colors">{companyInfo.contactPhone}</a></p>
            </div>
          )}
        </div>

        {/* Company Column */}
        <div className="col-span-1 lg:col-span-3 lg:col-start-6">
          <h4 className="font-heading font-bold uppercase tracking-widest text-xs mb-6 text-white/40">
            {locale === 'de' ? 'Unternehmen' : 'Company'}
          </h4>
          <ul className="space-y-4">
            <li>
              <Link href={`/${locale}/kompetenzen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Kompetenzen' : 'Competencies'}
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/ueber-uns`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Über uns' : 'About us'}
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/karriere`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Karriere' : 'Career'}
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/messen`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Messen & Events' : 'Fairs & Events'}
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Kontakt' : 'Contact'}
              </Link>
            </li>
          </ul>
        </div>

        {/* Legal Column */}
        <div className="col-span-1 lg:col-span-3">
          <h4 className="font-heading font-bold uppercase tracking-widest text-xs mb-6 text-white/40">
            {locale === 'de' ? 'Rechtliches' : 'Legal'}
          </h4>
          <ul className="space-y-4">
            <li>
              <Link href={`/${locale}/impressum`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Impressum' : 'Imprint'}
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/datenschutz`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'Datenschutz' : 'Privacy Policy'}
              </Link>
            </li>
            <li>
              <Link href={`/${locale}/${locale === 'de' ? 'agb' : 'terms'}`} className="text-white/70 hover:text-white hover:translate-x-1 inline-block transition-all">
                {locale === 'de' ? 'AGB' : 'Terms'}
              </Link>
            </li>
          </ul>
        </div>
      </div>

      <div className="container">
        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-6 text-white/50 text-sm">
          <p>&copy; {new Date().getFullYear()} E-TIB GmbH. {locale === 'de' ? 'Alle Rechte vorbehalten.' : 'All rights reserved.'}</p>
          <div className="flex items-center gap-4">
             <LanguageSwitcher isSolidMode={false} />
          </div>
        </div>

        {/* Quality Badges */}
        <div className="pt-8 mt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6 text-white/30 text-xs">
          <div>
            <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="hover:text-white/60 transition-colors">
              Website developed by Mintel
            </a>
          </div>
          <div className="flex flex-wrap justify-center gap-x-6 gap-y-3">
            <div className="flex items-center gap-1.5"><ShieldCheck className="w-3.5 h-3.5" /><span>SSL Secured</span></div>
            <div className="flex items-center gap-1.5"><Leaf className="w-3.5 h-3.5" /><span>Green Hosting</span></div>
            <div className="flex items-center gap-1.5"><Lock className="w-3.5 h-3.5" /><span>DSGVO Compliant</span></div>
            <div className="flex items-center gap-1.5"><Accessibility className="w-3.5 h-3.5" /><span>WCAG</span></div>
            <div className="flex items-center gap-1.5"><Zap className="w-3.5 h-3.5" /><span>PageSpeed 90+</span></div>
          </div>
        </div>
      </div>
    </footer>
  );
}