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

import { TransitionLink } from '@/components/ui/TransitionLink';
import Image from 'next/image';
import { useLocale } from 'next-intl';
import { ShieldCheck, Leaf, Lock, Accessibility, Zap, Mail, Phone } from 'lucide-react';
import { LanguageSwitcher } from './LanguageSwitcher';
import { Tooltip } from '@/components/ui/Tooltip';
import { EUFundingBadge } from '@/components/decorations/EUFundingBadge';
interface CompanyInfo {
  contactEmail: string;
  contactPhone: string;
  address: string;
}

interface FooterProps {
  companyInfo?: CompanyInfo;
}

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

  return (
    <footer className="bg-[#050B14] text-neutral-light pt-24 pb-28 md:pt-32 md:pb-16 relative overflow-hidden border-t border-white/5">
      {/* Subtle background tech grid */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_100%)] pointer-events-none" />

      {/* Top glowing edge */}
      <div className="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-1/3 h-[200px] bg-primary/20 blur-[100px] rounded-full pointer-events-none opacity-50" />

      <EUFundingBadge />

      <div className="container relative z-10 grid grid-cols-1 md:grid-cols-4 lg:grid-cols-12 gap-4 md:gap-6 lg:gap-8 mb-4 md:mb-12">
        {/* Brand Column Bento */}
        <div className="col-span-1 md:col-span-4 lg:col-span-5 flex flex-col justify-between bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700" />

          <div className="space-y-4 md:space-y-6 relative z-10">
            <TransitionLink href={`/${locale}`} className="relative block h-12 md:h-14 w-40 md:w-48 mb-4 md:mb-6 group/logo cursor-pointer">
              <Image
                src="/assets/logo-white.png"
                alt="E-TIB Gruppe"
                fill
                className="object-contain object-left transition-transform duration-500 group-hover/logo:scale-105 origin-left"
              />
            </TransitionLink>
            <p className="text-neutral-400 text-base leading-relaxed max-w-sm">
              {locale === 'de'
                ? 'Die Experten für Kabelnetzbau, Horizontalspülbohrungen und umfassende Infrastrukturprojekte. Qualität und Zuverlässigkeit aus Guben.'
                : 'Experts in cable network construction, horizontal directional drilling, and comprehensive infrastructure projects. Quality and reliability from Guben.'}
            </p>
          </div>

          {companyInfo && (
            <div className="text-white/70 text-sm space-y-3 md:space-y-4 mt-8 md:mt-12 relative z-10">
              <div className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.05] transition-colors">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                  <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                </div>
                <div>
                  <p className="text-xs text-neutral-400 uppercase tracking-wider mb-1 font-heading">{locale === 'de' ? 'Hauptsitz' : 'Headquarters'}</p>
                  <p className="whitespace-pre-line font-medium text-neutral-200">{companyInfo.address}</p>
                </div>
              </div>
              <a href={`mailto:${companyInfo.contactEmail}`} className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact cursor-pointer">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0 group-hover/contact:bg-primary/30 transition-colors">
                  <Mail className="w-5 h-5 text-primary" />
                </div>
                <div className="min-w-0">
                  <p className="text-xs text-neutral-400 uppercase tracking-wider mb-1 font-heading">E-Mail</p>
                  <p className="font-medium text-neutral-200 group-hover/contact:text-primary transition-colors truncate">{companyInfo.contactEmail}</p>
                </div>
              </a>
              <a href={`tel:${companyInfo.contactPhone.replace(/\s+/g, '')}`} className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.08] hover:border-primary/30 transition-all group/contact cursor-pointer">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0 group-hover/contact:bg-primary/30 transition-colors">
                  <Phone className="w-5 h-5 text-primary" />
                </div>
                <div className="min-w-0">
                  <p className="text-xs text-neutral-400 uppercase tracking-wider mb-1 font-heading">{locale === 'de' ? 'Telefon' : 'Phone'}</p>
                  <p className="font-medium text-neutral-200 group-hover/contact:text-primary transition-colors truncate">{companyInfo.contactPhone}</p>
                </div>
              </a>
              <div className="flex gap-4 p-4 rounded-2xl bg-white/[0.03] border border-white/[0.05] hover:bg-white/[0.05] transition-colors">
                <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
                  <svg className="w-5 h-5 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                </div>
                <div>
                  <p className="text-xs text-neutral-400 uppercase tracking-wider mb-1 font-heading">{locale === 'de' ? 'Öffnungszeiten' : 'Opening Hours'}</p>
                  <div className="text-sm font-medium text-neutral-200">
                    <p>{locale === 'de' ? 'Mo. – Fr.' : 'Mon. – Fri.'}: 07:00 – 17:00 {locale === 'de' ? 'Uhr' : ''}</p>
                    <p className="text-white/50 mt-0.5">{locale === 'de' ? 'Sa. – So.' : 'Sat. – Sun.'}: {locale === 'de' ? 'Geschlossen' : 'Closed'}</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Navigation Bento Grid */}
        <div className="col-span-1 md:col-span-4 lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6 lg:gap-8">

          {/* Links Column */}
          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
            <div className="absolute inset-0 bg-gradient-to-bl from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
            
            {/* Desktop View */}
            <div className="hidden md:block relative z-10 flex-grow">
              <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 text-white">
                {locale === 'de' ? 'Navigation' : 'Navigation'}
                <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
              </h4>
              <ul className="space-y-2 mb-8">
                {[
                  { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/${locale === 'de' ? 'kompetenzen' : 'competencies'}` },
                  { label: locale === 'de' ? 'Referenzen' : 'References', href: `/${locale}/referenzen` },
                  { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/${locale === 'de' ? 'messen' : 'trade-fairs'}` },
                  { label: locale === 'de' ? 'Kontakt' : 'Contact', href: `/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}` },
                ].map((link) => (
                  <li key={link.href}>
                    <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
                      <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
                      <span className="font-medium">{link.label}</span>
                    </TransitionLink>
                  </li>
                ))}
              </ul>

              <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-4 text-white">
                <TransitionLink href={`/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}`} className="hover:text-primary transition-colors cursor-pointer inline-block">
                  {locale === 'de' ? 'Über uns' : 'About us'}
                </TransitionLink>
                <span className="block w-8 h-1 bg-primary mt-3 rounded-full" />
              </h4>
              <ul className="space-y-2 border-l border-white/10 pl-4 ml-1">
                {[
                  { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
                  { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
                  { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
                  { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
                ].map((link) => (
                  <li key={link.href}>
                    <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
                      <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
                      <span className="font-medium">{link.label}</span>
                    </TransitionLink>
                  </li>
                ))}
              </ul>
            </div>

            {/* Mobile View (Accordions) */}
            <div className="md:hidden relative z-10 flex-grow space-y-4">
              <details className="group/acc">
                <summary className="font-heading font-bold uppercase tracking-widest text-sm text-white list-none cursor-pointer flex justify-between items-center py-2 outline-none select-none">
                  {locale === 'de' ? 'Navigation' : 'Navigation'}
                  <svg className="w-4 h-4 text-white/50 transition-transform group-open/acc:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div className="pt-2 pb-4">
                  <ul className="space-y-3">
                    {[
                      { label: locale === 'de' ? 'Kompetenzen' : 'Competencies', href: `/${locale}/${locale === 'de' ? 'kompetenzen' : 'competencies'}` },
                      { label: locale === 'de' ? 'Referenzen' : 'References', href: `/${locale}/referenzen` },
                      { label: locale === 'de' ? 'Messen & Events' : 'Fairs & Events', href: `/${locale}/${locale === 'de' ? 'messen' : 'trade-fairs'}` },
                      { label: locale === 'de' ? 'Kontakt' : 'Contact', href: `/${locale}/${locale === 'de' ? 'kontakt' : 'contact'}` },
                    ].map((link) => (
                      <li key={link.href}>
                        <TransitionLink href={link.href} className="flex items-center text-neutral-400 hover:text-white transition-colors py-1">
                          <span className="font-medium">{link.label}</span>
                        </TransitionLink>
                      </li>
                    ))}
                  </ul>
                </div>
              </details>
              
              <div className="h-px bg-white/10 w-full"></div>

              <details className="group/acc">
                <summary className="font-heading font-bold uppercase tracking-widest text-sm text-white list-none cursor-pointer flex justify-between items-center py-2 outline-none select-none">
                  {locale === 'de' ? 'Über uns' : 'About us'}
                  <svg className="w-4 h-4 text-white/50 transition-transform group-open/acc:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div className="pt-2 pb-4">
                  <ul className="space-y-3">
                    {[
                      { label: locale === 'de' ? 'Unternehmen' : 'Company', href: `/${locale}/${locale === 'de' ? 'ueber-uns' : 'about-us'}` },
                      { label: locale === 'de' ? 'Standorte' : 'Locations', href: `/${locale}/standorte` },
                      { label: locale === 'de' ? 'Unser Team' : 'Our Team', href: `/${locale}/team` },
                      { label: locale === 'de' ? 'Zertifikate' : 'Certificates', href: `/${locale}/zertifikate` },
                      { label: locale === 'de' ? 'Karriere' : 'Career', href: `/${locale}/${locale === 'de' ? 'karriere' : 'career'}` },
                    ].map((link) => (
                      <li key={link.href}>
                        <TransitionLink href={link.href} className="flex items-center text-neutral-400 hover:text-white transition-colors py-1">
                          <span className="font-medium">{link.label}</span>
                        </TransitionLink>
                      </li>
                    ))}
                  </ul>
                </div>
              </details>
            </div>
          </div>

          {/* Legal Column */}
          <div className="bg-white/[0.02] border border-white/5 rounded-3xl p-5 md:p-8 lg:p-10 backdrop-blur-md relative group overflow-hidden flex flex-col">
            <div className="absolute inset-0 bg-gradient-to-tr from-white/[0.04] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
            
            {/* Desktop View */}
            <div className="hidden md:block relative z-10 flex-grow">
              <h4 className="font-heading font-bold uppercase tracking-widest text-sm mb-6 text-white">
                {locale === 'de' ? 'Rechtliches' : 'Legal'}
                <span className="block w-8 h-1 bg-primary mt-3 rounded-full opacity-50" />
              </h4>
              <ul className="space-y-2">
                {[
                  { label: locale === 'de' ? 'Impressum' : 'Imprint', href: `/${locale}/${locale === 'de' ? 'impressum' : 'imprint'}` },
                  { label: locale === 'de' ? 'Datenschutz' : 'Privacy Policy', href: `/${locale}/${locale === 'de' ? 'datenschutz' : 'privacy-policy'}` },
                  { label: locale === 'de' ? 'AGB' : 'Terms', href: `/${locale}/${locale === 'de' ? 'agb' : 'terms'}` },
                ].map((link) => (
                  <li key={link.href}>
                    <TransitionLink href={link.href} className="group/link flex items-center text-neutral-400 hover:text-white transition-colors py-1 cursor-pointer">
                      <span className="w-0 h-px bg-primary mr-0 group-hover/link:w-4 group-hover/link:mr-3 transition-all duration-300" />
                      <span className="font-medium">{link.label}</span>
                    </TransitionLink>
                  </li>
                ))}
              </ul>
            </div>

            {/* Mobile View */}
            <div className="md:hidden relative z-10 flex-grow">
              <details className="group/acc">
                <summary className="font-heading font-bold uppercase tracking-widest text-sm text-white list-none cursor-pointer flex justify-between items-center py-2 outline-none select-none">
                  {locale === 'de' ? 'Rechtliches' : 'Legal'}
                  <svg className="w-4 h-4 text-white/50 transition-transform group-open/acc:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 9l-7 7-7-7"/></svg>
                </summary>
                <div className="pt-2 pb-4">
                  <ul className="space-y-3">
                    {[
                      { label: locale === 'de' ? 'Impressum' : 'Imprint', href: `/${locale}/${locale === 'de' ? 'impressum' : 'imprint'}` },
                      { label: locale === 'de' ? 'Datenschutz' : 'Privacy Policy', href: `/${locale}/${locale === 'de' ? 'datenschutz' : 'privacy-policy'}` },
                      { label: locale === 'de' ? 'AGB' : 'Terms', href: `/${locale}/${locale === 'de' ? 'agb' : 'terms'}` },
                    ].map((link) => (
                      <li key={link.href}>
                        <TransitionLink href={link.href} className="flex items-center text-neutral-400 hover:text-white transition-colors py-1">
                          <span className="font-medium">{link.label}</span>
                        </TransitionLink>
                      </li>
                    ))}
                  </ul>
                </div>
              </details>
            </div>
          </div>

        </div>
      </div>

      <div className="container relative z-10">
        <div className="flex flex-col md:flex-row justify-between items-center gap-4 md:gap-6 py-4 px-5 md:py-6 md:px-8 rounded-2xl bg-white/[0.02] border border-white/5 backdrop-blur-md text-center md:text-left">
          <div className="flex flex-col md:flex-row items-center gap-4 md:gap-6 h-full">
            <p className="text-neutral-400 text-xs font-medium m-0">&copy; {new Date().getFullYear()} E-TIB GmbH. {locale === 'de' ? 'Alle Rechte vorbehalten.' : 'All rights reserved.'}</p>
          </div>

          <div className="flex items-center gap-6">
            <LanguageSwitcher isSolidMode={false} />
          </div>
        </div>

        {/* Quality Badges */}
        <div className="mt-4 md:mt-6 flex flex-wrap justify-center gap-x-4 gap-y-3 md:gap-x-8 md:gap-y-4 text-neutral-400 text-[10px] md:text-xs font-medium uppercase tracking-wider px-2">
          <Tooltip content={locale === 'de' ? 'Ihre Daten werden sicher und verschlüsselt übertragen.' : 'Your data is transmitted securely and encrypted.'}>
            <div className="flex items-center gap-2 cursor-help"><ShieldCheck className="w-4 h-4 text-neutral-400" /><span>SSL Secured</span></div>
          </Tooltip>
          <Tooltip content={locale === 'de' ? 'Wir nutzen 100% Ökostrom für den Betrieb unserer Website.' : 'We use 100% green energy to run our website.'}>
            <div className="flex items-center gap-2 cursor-help"><Leaf className="w-4 h-4 text-primary" /><span>Green Hosting</span></div>
          </Tooltip>
          <Tooltip content={locale === 'de' ? 'Ihre Privatsphäre ist uns wichtig. Wir halten uns streng an den Datenschutz.' : 'Your privacy is important to us. We strictly adhere to data protection laws.'}>
            <div className="flex items-center gap-2 cursor-help"><Lock className="w-4 h-4 text-neutral-400" /><span>DSGVO Compliant</span></div>
          </Tooltip>
          <Tooltip content={locale === 'de' ? 'Blitzschnelle Ladezeiten für ein optimales Nutzererlebnis.' : 'Lightning-fast loading times for an optimal user experience.'}>
            <div className="flex items-center gap-2 cursor-help"><Zap className="w-4 h-4 text-neutral-400" /><span>High Performance</span></div>
          </Tooltip>
        </div>

        {/* Mintel Design & Version */}
        <div className="mt-6 flex justify-center items-center gap-3 text-neutral-500 text-[10px] md:text-xs opacity-60 hover:opacity-100 transition-opacity">
          <a href="https://mintel.me" target="_blank" rel="noopener noreferrer" className="hover:text-neutral-300 transition-colors flex items-center gap-2">
            <span>Designed & Engineered by Marc Mintel</span>
          </a>
          {process.env.NEXT_PUBLIC_APP_VERSION && (
            <>
              <span className="w-1 h-1 rounded-full bg-white/20" />
              <div className="flex items-center gap-2">
                <span className="font-mono text-[10px]">v{process.env.NEXT_PUBLIC_APP_VERSION.replace(/^v/, '')}</span>
                {process.env.NEXT_PUBLIC_TARGET && process.env.NEXT_PUBLIC_TARGET !== 'production' && (
                  <span className="px-1.5 py-0.5 rounded-sm bg-white/10 text-[9px] uppercase tracking-wider">
                    {process.env.NEXT_PUBLIC_TARGET}
                  </span>
                )}
              </div>
            </>
          )}
        </div>
      </div>
    </footer>
  );
}