// import { useState, useEffect } from 'react';
// import { motion } from 'motion/react';
// import { useLocation, useNavigate } from 'react-router-dom';

// interface CitySubmenuProps {
//   onClose: () => void;
// }

// interface SubmenuItem {
//   id: string;
//   label: string;
//   path?: string;
//   action?: () => void;
// }

// export function CitySubmenu({ onClose }: CitySubmenuProps) {
//   const [isScrolled, setIsScrolled] = useState(false);
//   const [activeItem, setActiveItem] = useState<string | null>(null);

//   const location = useLocation();
//   const navigate = useNavigate();

//   // Direct submenu items for Melbourne
//   const submenuItems: SubmenuItem[] = [
//     { 
//       id: 'melbourne', 
//       label: 'Melbourne',
//       path: '/melbourne'
//     },
//     { 
//       id: 'attractions', 
//       label: 'Attractions',
//       path: '/attractions'
//     },
//     { 
//       id: 'buy-now', 
//       label: 'Buy Now',
//       path: '/passes'
//     },
//     { 
//       id: 'blogs', 
//       label: 'Blogs',
//       path: '/blogs'
//     },
//     { 
//       id: 'how-it-works', 
//       label: 'How It Works',
//       path: '/how-it-works'
//     }
//   ];

//   // Handle scroll effects
//   useEffect(() => {
//     const handleScroll = () => {
//       const scrolled = window.scrollY > 20;
//       setIsScrolled(scrolled);
//     };

//     window.addEventListener('scroll', handleScroll);
//     return () => window.removeEventListener('scroll', handleScroll);
//   }, []);

//   // Determine active item based on current route
//   useEffect(() => {
//     const currentItem = submenuItems.find(item => 
//       item.path && location.pathname === item.path
//     );
//     setActiveItem(currentItem?.id || null);
//   }, [location.pathname]);

//   const handleSubmenuItemClick = (item: SubmenuItem) => {
//     if (item.path) {
//       navigate(item.path);
//     }
//     setActiveItem(item.id);
//     item.action?.();
//     onClose();
//   };

//   const isSubmenuItemActive = (itemId: string) => {
//     return activeItem === itemId;
//   };

//   // Render direct submenu items
//   const renderSubmenu = () => (
//     <div className="flex items-center gap-1">
//       {submenuItems.map((item) => (
//         <motion.button
//           key={item.id}
//           onClick={() => handleSubmenuItemClick(item)}
//           className={`font-poppins font-medium text-base relative px-4 py-2.5 transition-all duration-300 whitespace-nowrap rounded-full ${
//             isSubmenuItemActive(item.id)
//               ? 'bg-primary text-white shadow-md'
//               : 'text-gray-700 hover:text-white hover:bg-gray-800'
//           }`}
//           whileHover={{ scale: 1.02 }}
//           whileTap={{ scale: 0.98 }}
//         >
//           {item.label}
          
//           {!isSubmenuItemActive(item.id) && (
//             <motion.div
//               className="absolute inset-0 bg-gray-800 rounded-full -z-10"
//               initial={{ opacity: 0, scale: 0.9 }}
//               whileHover={{ opacity: 1, scale: 1 }}
//               transition={{ duration: 0.2 }}
//             />
//           )}
//         </motion.button>
//       ))}
//     </div>
//   );

//   return (
//     <>
//       {/* Desktop Submenu */}
//       <motion.div
//         className="fixed top-[120px] left-1/2 transform -translate-x-1/2 z-30 hidden lg:block"
//         initial={{ y: -20, opacity: 0 }}
//         animate={{ y: 0, opacity: 1 }}
//         transition={{ 
//           duration: 0.6, 
//           ease: [0.25, 0.1, 0.25, 1], 
//           delay: 0.4 
//         }}
//       >
//         <motion.div
//           className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
//           initial={{ scale: 0.9 }}
//           animate={{ 
//             scale: isScrolled ? 0.95 : 1,
//             y: isScrolled ? 2 : 0,
//             boxShadow: isScrolled 
//               ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
//               : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
//           }}
//           transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
//         >
//           {renderSubmenu()}
//         </motion.div>
//       </motion.div>

//       {/* Mobile Submenu */}
//       <motion.div
//         className="fixed top-[100px] left-4 right-4 z-30 md:hidden"
//         initial={{ y: -20, opacity: 0 }}
//         animate={{ y: 0, opacity: 1 }}
//         transition={{ 
//           duration: 0.6, 
//           ease: [0.25, 0.1, 0.25, 1], 
//           delay: 0.4 
//         }}
//       >
//         <motion.div
//           className="bg-white rounded-2xl px-3 py-3 shadow-lg border border-gray-200"
//           initial={{ scale: 0.9 }}
//           animate={{ 
//             scale: isScrolled ? 0.95 : 1,
//             y: isScrolled ? 2 : 0,
//             boxShadow: isScrolled 
//               ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
//               : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
//           }}
//           transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
//         >
//           <div className="flex items-center gap-2 overflow-x-auto scrollbar-hide">
//             {submenuItems.map((item) => (
//               <motion.button
//                 key={item.id}
//                 onClick={() => handleSubmenuItemClick(item)}
//                 className={`relative px-3 py-2 text-sm font-medium transition-all duration-300 whitespace-nowrap rounded-xl flex-shrink-0 ${
//                   isSubmenuItemActive(item.id)
//                     ? 'bg-primary text-white shadow-md'
//                     : 'text-gray-700 hover:text-white hover:bg-gray-800'
//                 }`}
//                 whileHover={{ scale: 1.02 }}
//                 whileTap={{ scale: 0.98 }}
//               >
//                 {item.label}
                
//                 {!isSubmenuItemActive(item.id) && (
//                   <motion.div
//                     className="absolute inset-0 bg-gray-800 rounded-xl -z-10"
//                     initial={{ opacity: 0, scale: 0.9 }}
//                     whileHover={{ opacity: 1, scale: 1 }}
//                     transition={{ duration: 0.2 }}
//                   />
//                 )}
//               </motion.button>
//             ))}
//           </div>
//         </motion.div>
//       </motion.div>

//       {/* Medium Screen Submenu */}
//       <motion.div
//         className="fixed top-[110px] left-1/2 transform -translate-x-1/2 z-30 hidden md:block lg:hidden"
//         initial={{ y: -20, opacity: 0 }}
//         animate={{ y: 0, opacity: 1 }}
//         transition={{ 
//           duration: 0.6, 
//           ease: [0.25, 0.1, 0.25, 1], 
//           delay: 0.4 
//         }}
//       >
//         <motion.div
//           className="bg-white rounded-full px-2 py-2 shadow-lg border border-gray-200"
//           initial={{ scale: 0.9 }}
//           animate={{ 
//             scale: isScrolled ? 0.95 : 1,
//             y: isScrolled ? 2 : 0,
//             boxShadow: isScrolled 
//               ? "0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" 
//               : "0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.03)"
//           }}
//           transition={{ duration: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
//         >
//           {renderSubmenu()}
//         </motion.div>
//       </motion.div>
//     </>
//   );
// }