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

'use client';

import * as React from 'react';
import { usePathname } from 'next/navigation';
import { TransitionLink } from '@/components/ui/TransitionLink';
import { Home, Briefcase, Users, Mail } from 'lucide-react';
import { motion } from 'framer-motion';

export interface NavLink {
  label: string;
  url: string;
}

interface MobileBottomNavProps {
  navLinks: NavLink[];
  currentLocale: string;
}

export function MobileBottomNav({ navLinks, currentLocale }: MobileBottomNavProps) {
  const pathname = usePathname() || '/';

  // Construct our bottom nav items based on the passed links
  const items = React.useMemo(() => {
    const homeUrl = `/${currentLocale}`;
    
    // Find the specific links from the provided navLinks (which might be translated)
    const competenciesUrl = navLinks[0]?.url || `/${currentLocale}/kompetenzen`;
    const aboutUrl = navLinks[1]?.url || `/${currentLocale}/ueber-uns`;
    const contactUrl = `/${currentLocale}/${currentLocale === 'de' ? 'kontakt' : 'contact'}`;

    return [
      {
        label: currentLocale === 'de' ? 'Start' : 'Home',
        url: homeUrl,
        icon: <Home className="w-5 h-5 md:w-6 md:h-6" strokeWidth={2.5} />,
        exactMatch: true
      },
      {
        label: navLinks[0]?.label || (currentLocale === 'de' ? 'Kompetenzen' : 'Competencies'),
        url: competenciesUrl,
        icon: <Briefcase className="w-5 h-5 md:w-6 md:h-6" strokeWidth={2.5} />
      },
      {
        label: navLinks[1]?.label || (currentLocale === 'de' ? 'Über uns' : 'About Us'),
        url: aboutUrl,
        icon: <Users className="w-5 h-5 md:w-6 md:h-6" strokeWidth={2.5} />
      },
      {
        label: currentLocale === 'de' ? 'Kontakt' : 'Contact',
        url: contactUrl,
        icon: <Mail className="w-5 h-5 md:w-6 md:h-6" strokeWidth={2.5} />
      }
    ];
  }, [currentLocale, navLinks]);

  return (
    <div className="md:hidden fixed bottom-0 left-0 right-0 z-[9999] px-4 pb-[calc(env(safe-area-inset-bottom)+1rem)] pt-4 pointer-events-none flex justify-center">
      <nav className="flex justify-between items-center bg-white/70 backdrop-blur-3xl border border-white/60 shadow-[0_8px_32px_rgba(0,0,0,0.12)] rounded-3xl p-1.5 pointer-events-auto w-full max-w-[400px]">
        {items.map((item) => {
          // Determine if active
          const mappedUrl = item.url.startsWith('/') && !item.url.match(/^\/(en|de)/) 
            ? `/${currentLocale}${item.url}` 
            : item.url;
            
          const isActive = item.exactMatch 
            ? pathname === mappedUrl 
            : (pathname === mappedUrl || (mappedUrl !== `/${currentLocale}` && pathname?.startsWith(`${mappedUrl}/`)));

          return (
            <TransitionLink 
              key={item.label}
              href={mappedUrl}
              className={`relative flex flex-col items-center justify-center flex-1 h-[60px] transition-colors duration-300 select-none ${
                isActive ? 'text-white' : 'text-neutral-500 hover:text-neutral-900'
              }`}
              style={{ WebkitTapHighlightColor: 'transparent', touchAction: 'manipulation' }}
            >
              {isActive && (
                <motion.div
                  layoutId="mobile-nav-active-bg"
                  className="absolute inset-0 bg-primary rounded-2xl shadow-md"
                  transition={{ type: 'spring', stiffness: 400, damping: 25 }}
                />
              )}
              
              <div className="relative flex flex-col items-center justify-center z-10 w-full h-full">
                <motion.div 
                  whileTap={{ scale: 0.8 }}
                  animate={{ y: isActive ? -2 : 0 }}
                  transition={{ type: 'spring', stiffness: 400, damping: 17 }}
                >
                  {item.icon}
                </motion.div>
                <motion.span 
                  animate={{ opacity: isActive ? 1 : 0.7, y: isActive ? 0 : 2 }}
                  className="text-[10px] font-bold mt-1 tracking-wide"
                >
                  {item.label}
                </motion.span>
              </div>
            </TransitionLink>
          );
        })}
      </nav>
    </div>
  );
}