"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { motion } from "framer-motion"

const navItems = [
  { href: "/", label: "Home", icon: "◈" },
  { href: "/map", label: "Map", icon: "◉" },
]

export default function Nav() {
  const pathname = usePathname()

  return (
    <>
      {/* Desktop top nav */}
      <nav className="hidden md:flex items-center justify-between px-8 py-5 border-b border-white/5 sticky top-0 z-50 bg-[#0d0d0d]/80 backdrop-blur-xl">
        <Link href="/" className="text-2xl font-black tracking-tighter text-[#f5f5f5] hover:text-[#f59e0b] transition-colors">
          food.
        </Link>
        <div className="flex items-center gap-8">
          {navItems.map((item) => (
            <Link
              key={item.href}
              href={item.href}
              className={`text-sm font-medium transition-colors hover:text-[#f59e0b] ${
                pathname === item.href ? "text-[#f59e0b]" : "text-white/60"
              }`}
            >
              {item.label}
            </Link>
          ))}
        </div>
      </nav>

      {/* Mobile bottom nav */}
      <nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 border-t border-white/5 bg-[#0d0d0d]/90 backdrop-blur-xl">
        <div className="flex items-center justify-around py-3">
          {navItems.map((item) => {
            const isActive = pathname === item.href
            return (
              <Link
                key={item.href}
                href={item.href}
                className="flex flex-col items-center gap-1 px-6 py-1"
              >
                <motion.div
                  whileTap={{ scale: 0.85 }}
                  className={`text-xl transition-colors ${
                    isActive ? "text-[#f59e0b]" : "text-white/40"
                  }`}
                >
                  {item.icon}
                </motion.div>
                <span
                  className={`text-[10px] font-medium tracking-wider uppercase transition-colors ${
                    isActive ? "text-[#f59e0b]" : "text-white/30"
                  }`}
                >
                  {item.label}
                </span>
              </Link>
            )
          })}
        </div>
      </nav>
    </>
  )
}