'use client';

import Link from 'next/link';
import { motion } from 'framer-motion';
import { 
  Monitor, 
  BookOpen, 
  ClipboardList, 
  Globe, 
  Users, 
  QrCode, 
  Tag, 
  Layers,
  LayoutDashboard,
  ChefHat,
  Heart,
  FileText,
  MessageSquare,
  Bike,
  TicketPercent
} from 'lucide-react';

const navItems = [
  { name: 'DASHBOARD', href: '/features/business-dashboard', icon: LayoutDashboard, color: 'bg-indigo-500' },
  { name: 'POS', href: '/features/pos', icon: Monitor, color: 'bg-emerald-400' },
  { name: 'MENU', href: '/features/multi-menu-management', icon: BookOpen, color: 'bg-sky-400' },
  { name: 'ORDERS', href: '/features/order-management', icon: ClipboardList, color: 'bg-orange-400' },
  { name: 'KITCHEN', href: '/features/kitchen-management', icon: ChefHat, color: 'bg-red-500' },
  { name: 'TABLES', href: '/features/table-reservation', icon: Users, color: 'bg-purple-400' },
  { name: 'WEBSITE', href: '/features/restaurant-website', icon: Globe, color: 'bg-emerald-500' },
  { name: 'LOYALTY', href: '/features/loyalty-management', icon: Heart, color: 'bg-pink-500' },
  { name: 'QR CODE', href: '/features/qr-code-menu', icon: QrCode, color: 'bg-sky-500' },
  { name: 'INVOICING', href: '/features/invoicing', icon: FileText, color: 'bg-blue-500' },
  { name: 'PROMO', href: '/features/promotion-management', icon: Tag, color: 'bg-orange-500' },
  { name: 'OFFERS', href: '/features/promotions', icon: TicketPercent, color: 'bg-yellow-500' },
  { name: 'STOCK', href: '/features/inventory-management', icon: Layers, color: 'bg-purple-500' },
  { name: 'TEAM', href: '/features/team-communication', icon: MessageSquare, color: 'bg-teal-500' },
  { name: 'UBER', href: '/features/uber-integration', icon: Bike, color: 'bg-black' },
];

const FeatureQuickNav = () => {
  // Duplicate only once for CSS loop
  const duplicatedItems = [...navItems, ...navItems];

  return (
    <section className="py-16 bg-gray-300 text-whiteborder-y border-white/5 overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 mb-10">
        <div className="text-center">
          <h3 className="text-sm font-black uppercase tracking-[0.3em] text-zinc-500 flex items-center justify-center gap-4">
            <span className="h-px w-8 bg-zinc-900"></span>
            Explore All Features
            <span className="h-px w-8 bg-zinc-800"></span>
          </h3>
        </div>
      </div>

      <div className="relative flex overflow-hidden group">
        <div 
          className="flex gap-4 px-4 whitespace-nowrap animate-infinite-scroll group-hover:[animation-play-state:paused]"
        >
          {duplicatedItems.map((item, idx) => (
            <Link 
              key={`${item.name}-${idx}`} 
              href={item.href}
              className="relative w-40 flex-shrink-0 bg-zinc-900 hover:bg-white p-6 rounded-2xl transition-all duration-300 group/card shadow-sm hover:shadow-xl border border-white/5 hover:border-red-500 flex flex-col items-center gap-4 text-center overflow-hidden"
            >
              {/* Colorful Top Border */}
              <div className={`absolute top-0 left-0 right-0 h-1 ${item.color}`}></div>
              
              <div className="text-white group-hover/card:text-red-500 transition-colors transform group-hover/card:scale-110 duration-300">
                <item.icon className="w-10 h-10" />
              </div>
              <span className="text-[10px] font-black tracking-widest uppercase text-zinc-500 group-hover/card:text-zinc-950 transition-colors">
                {item.name}
              </span>
            </Link>
          ))}
        </div>
        
        {/* Gradient Overlays for smooth entry/exit fade */}
        <div className="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-zinc-950 to-transparent z-10 pointer-events-none"></div>
        <div className="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-zinc-950 to-transparent z-10 pointer-events-none"></div>
      </div>
    </section>
  );
};

export default FeatureQuickNav;
