'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { Icon } from '@/components/marketing/icons';
import { isNavActive, mobilePrimaryNav } from '@/components/panel/nav-config';
import { cn } from '@/lib/utils';

export function BottomNav() {
  const pathname = usePathname();
  return (
    <nav
      className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 pb-[var(--safe-bottom)] backdrop-blur-md lg:hidden"
      aria-label="Primary"
      style={{ paddingBottom: 'max(0.35rem, var(--safe-bottom))' }}
    >
      <ul className="mx-auto grid max-w-lg grid-cols-5 gap-0 px-1 pt-1">
        {mobilePrimaryNav.map(item => {
          const active = isNavActive(pathname, item);
          return (
            <li key={item.href}>
              <Link
                href={item.href}
                className={cn(
                  'relative flex min-h-[3.5rem] flex-col items-center justify-center gap-0.5 rounded-xl px-1 text-[10px] font-semibold tracking-wide transition-colors duration-200',
                  active ? 'text-primary' : 'text-muted-foreground hover:text-navy',
                )}
                aria-current={active ? 'page' : undefined}
              >
                {active && <span className="absolute inset-x-3 top-0 h-0.5 rounded-full bg-primary" aria-hidden="true" />}
                <Icon name={item.icon} size={22} className={cn(active && 'scale-105')} />
                <span>{item.label}</span>
              </Link>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}