import { useState, useRef, useEffect, useCallback } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ChevronDown, Menu, X, Code, Smartphone, Globe, Palette, Brain, Users, Building2, Monitor, ShoppingCart, Server, Wrench, Lightbulb, Database, Eye, MessageSquare, Target, BarChart3, Zap, Rocket, Shield, Cog, HeartHandshake, GraduationCap, Stethoscope, ShoppingBag, Truck, Gamepad2, Factory, DollarSign, Home, BookOpen, Users2, Code2, Laptop, Paintbrush, Bot, RefreshCw, Info, Clock, Award, Briefcase, Heart, Newspaper, FileText, Star, HelpCircle, Mail, FileCheck, Phone, MapPin, Headphones, UserPlus, Apple, GitMerge, Gauge, Chrome, Watch, Cloud, CloudCog, Link, PenTool, MousePointer2, TestTube, PlayCircle, Search, Workflow, Sparkles, Wand2, Activity, TrendingUp, Settings, ArrowRight, Calculator, Calendar, FileEdit, } from "lucide-react"; import { Button } from "./ui/button"; import BlackLogo14 from "../assets/BlackLogo14"; import { useLocation, useNavigate } from "react-router-dom"; const navigationData = { main_navigation: [ "Services", "AI & ML", "Solutions", "Industries", "Hire Talent", "Company", "Resources", ], services: [ { category: "Mobile App Development", icon: Smartphone, href: "/services/mobile-app-development", sub_services: [ { name: "iOS App Development", href: "/services/ios-app-development" }, { name: "Android App Development", href: "/services/android-app-development", }, { name: "Cross-Platform App Development", href: "/services/cross-platform-app-development", }, { name: "Native App Development", href: "/services/native-app-development", }, { name: "Progressive Web Apps (PWAs)", href: "/services/pwa-development", }, { name: "App Development for Wearables & Devices", href: "/services/wearable-device-development", }, ], }, { category: "Web & Cloud Solutions", icon: Globe, href: "/web-cloud", sub_services: [ { name: "Custom Web Application Development", href: "/services/custom-web-app-development", }, { name: "SaaS Product Engineering", href: "/services/saas-product-engineering", }, { name: "eCommerce Platforms", href: "/services/ecommerce-platforms" }, { name: "Admin Panels & Dashboards", href: "/services/admin-panels-dashboards", }, { name: "API & Backend Development", href: "/services/api-backend-development", }, ], }, { category: "Software Engineering", icon: Code2, href: "/software-engineering", sub_services: [ { name: "Enterprise Software Solutions", href: "/services/enterprise-software-solutions", }, { name: "System Architecture & DevOps", href: "/services/system-architecture-devops", }, { name: "Third-Party Integrations", href: "/services/third-party-integrations", }, { name: "Product Modernization", href: "/services/product-modernization", }, ], }, { category: "Design & Experience", icon: Paintbrush, href: "/design-experience", sub_services: [ { name: "UI/UX Design", href: "/services/ui-ux-design" }, { name: "Clickable Prototypes", href: "/services/clickable-prototypes", }, { name: "Design Thinking Workshops", href: "/services/design-thinking-workshops", }, { name: "User Research & Testing", href: "/services/user-research-testing", }, ], }, ], ai_data_intelligence: [ { category: "Artificial Intelligence Services", icon: Bot, href: "/artificial-intelligence", sub_services: [ { name: "AI Strategy & Consulting", href: "/services/ai-strategy-consulting", }, { name: "AI-Powered Automation & Workflows", href: "/services/ai-automation-workflows", }, { name: "AI Integration into Digital Products", href: "/services/ai-integration-digital-products", }, { name: "Gen AI Integration into Digital Products", href: "/services/gen-ai-integration-digital-products", }, { name: "AI Chatbots & Virtual Assistants", href: "/services/ai-chatbots-virtual-assistants", }, { name: "AI Model Deployment & Maintenance", href: "/services/ai-model-deployment-mlops", }, ], }, { category: "Machine Learning Solutions", icon: Brain, href: "/machine-learning", sub_services: [ { name: "Custom ML Model Development", href: "/services/custom-ml-model-development", }, { name: "Predictive Analytics & Forecasting", href: "/services/predictive-analytics-forecasting", }, { name: "Computer Vision Applications", href: "/services/computer-vision-applications", }, { name: "NLP & Text Analytics", href: "/services/nlp-text-analytics" }, { name: "Recommendation Engines", href: "/services/recommendation-engines", }, ], }, ], solutions: [ { text: "Digital Product Development", icon: Rocket, href: "/solutions/digital-product-development", }, { text: "MVP & Startup Launch Packages", icon: Zap, href: "/solutions/mvp-startup-launch-packages", }, { text: "Legacy System Rebuilds", icon: RefreshCw, href: "/solutions/legacy-system-rebuilds", }, { text: "Dedicated Offshore Development Centers (ODC)", icon: Building2, href: "/solutions/dedicated-offshore-odc", }, { text: "Business Process Automation", icon: Cog, href: "/solutions/business-process-automation", }, { text: "Compliance-Ready Systems (HIPAA, GDPR, etc.)", icon: Shield, href: "/solutions/compliance-ready-systems", }, ], industries: [ { group: "Financial Services", icon: DollarSign, items: [ { name: "FinTech & Banking Apps", href: "/industries/fintech-banking-apps", }, { name: "WealthTech Platforms", href: "/industries/financial-services/wealthtech-platforms", }, { name: "Real Estate Tech", href: "/industries/financial-services/real-estate-tech", }, ], }, { group: "Healthcare & Wellness", icon: Stethoscope, items: [ { name: "HealthTech Applications", href: "/industries/healthcare/healthtech-applications", }, { name: "Medical Compliance Solutions", href: "/industries/healthcare/medical-compliance-solutions", }, { name: "Fitness & Wellness Platforms", href: "/industries/healthcare/fitness-wellness-platforms", }, ], }, { group: "Learning & Education", icon: GraduationCap, items: [ { name: "EdTech Platforms", href: "/industries/education/edtech-platforms", }, { name: "Virtual Classrooms & LMS", href: "/industries/education/virtual-classrooms-lms", }, { name: "Microlearning Apps", href: "/industries/education/microlearning-apps", }, ], }, { group: "Commerce & Consumer", icon: ShoppingBag, items: [ { name: "eCommerce & Marketplaces", href: "/industries/commerce/ecommerce-marketplaces", }, { name: "Food Ordering & Delivery", href: "/industries/commerce/food-ordering-delivery", }, { name: "Travel & Booking Systems", href: "/industries/commerce/travel-booking-systems", }, { name: "Event & Ticketing Solutions", href: "/industries/commerce/event-ticketing-solutions", }, ], }, { group: "Media & Community", icon: Gamepad2, items: [ { name: "OTT & Streaming Apps", href: "/industries/media/ott-streaming-apps", }, { name: "Social Platforms & Networks", href: "/industries/media/social-platforms-networks", }, { name: "Sports & Fan Engagement", href: "/industries/media/sports-fan-engagement", }, ], }, { group: "Mobility & Logistics", icon: Truck, items: [ { name: "Transportation Apps", href: "/industries/mobility/transportation-apps", }, { name: "On-Demand Services", href: "/industries/mobility/on-demand-services", }, { name: "Supply Chain & Fleet Management", href: "/industries/mobility/supply-chain-fleet-management", }, ], }, { group: "Industrial & Emerging Tech", icon: Factory, items: [ { name: "Manufacturing Automation", href: "/industries/industrial/manufacturing-automation", }, { name: "AgriTech Platforms", href: "/industries/industrial/agritech-platforms", }, { name: "Oil & Gas Monitoring Systems", href: "/industries/industrial/oil-gas-monitoring-systems", }, ], }, ], hire_talent: [ { text: "Hire Mobile App Developers", icon: Smartphone, href: "/hire-talent/mobile-app-developers", }, { text: "Hire Full Stack Developers", icon: Code, href: "/hire-talent/full-stack-developers", }, { text: "Hire Frontend Developers", icon: Monitor, href: "/hire-talent/frontend-developers", }, { text: "Hire Backend Developers", icon: Database, href: "/hire-talent/backend-developers", }, { text: "Hire UI/UX Designers", icon: Palette, href: "/hire-talent/ui-ux-designers", }, { text: "Hire QA Engineers", icon: TestTube, href: "/hire-talent/qa-engineers", }, { text: "Dedicated Development Teams", icon: Users, href: "/dedicated-development-teams", }, { text: "Engagement Models", icon: Settings, href: "/engagement-models" }, { text: "Team Augmentation Services", icon: Zap, href: "/team-augmentation-services", }, ], company: [ { text: "About WDI", icon: Info, href: "/company/about-wdi" }, { text: "Leadership Team", icon: Users2, href: "/company/leadership-team" }, { text: "Careers", icon: Briefcase, href: "/company/careers" }, ], resources: [ { text: "Blogs", icon: BookOpen, href: "https://www.wdipl.com/blog", target: "_blank", rel: "noopener noreferrer" }, { text: "Portfolio", icon: FileText, href: "/case-studies" }, { text: "Client Testimonials", icon: Star, href: "/resources/client-testimonials", }, { text: "Whitepapers & Insights", icon: FileCheck, href: "/resources/whitepapers-insights", }, { text: "FAQs", icon: HelpCircle, href: "/resources/faqs" }, ], contact: [ { text: "Contact Form", icon: Mail, href: "/contact" }, { text: "Request a Proposal", icon: FileCheck, href: "/contact/request-a-proposal", }, { text: "Schedule a Discovery Call", icon: Phone, href: "/contact/schedule-a-discovery-call", }, { text: "Office Locations", icon: MapPin, href: "/contact/office-locations", }, { text: "Client Support", icon: Headphones, href: "/contact/client-support", }, { text: "Send your CV to HR", icon: UserPlus, href: "/contact/send-your-cv", }, ], }; // CTA configurations for each mega menu type const megaMenuCTAs = { Services: { title: "Development Quote", subtitle: "Get a custom quote for your project", buttonText: "Get Started", href: "/start-a-project", icon: Calculator, }, "AI & ML": { title: "AI Strategy Session", subtitle: "Discover AI opportunities for your business", buttonText: "Book Session", href: "/start-a-project", icon: Bot, }, Solutions: { title: "Solution Consultation", subtitle: "Find the perfect solution for your business", buttonText: "Consult Now", href: "/start-a-project", icon: Lightbulb, }, Industries: { title: "Industry Expertise", subtitle: "Learn how we transform your industry", buttonText: "Explore", href: "/start-a-project", icon: Building2, }, "Hire Talent": { title: "Team Assessment", subtitle: "Get matched with the right talent", buttonText: "Start Hiring", href: "/start-a-project", icon: Users, }, Company: { title: "Schedule a Call", subtitle: "Let's discuss your project requirements", buttonText: "Book Call", href: "/start-a-project", icon: Calendar, }, Resources: { title: "Free Consultation", subtitle: "Get expert insights for your project", buttonText: "Get Started", href: "/start-a-project", icon: FileEdit, }, Contact: { title: "Start Your Project", subtitle: "Ready to bring your idea to life?", buttonText: "Get Started", href: "/start-a-project", icon: Rocket, }, }; // Horizontal CTA Component matching reference design const MegaMenuCTA = ({ type }: { type: string }) => { const navigate = useNavigate(); const cta = megaMenuCTAs[type as keyof typeof megaMenuCTAs]; if (!cta) return null; return (

{cta.title}

{cta.subtitle}

); }; interface MegaMenuProps { isOpen: boolean; onClose: () => void; onCancelClose: () => void; type: string; timeoutRef?: React.MutableRefObject; } const MegaMenu = ({ isOpen, onClose, onCancelClose, type, timeoutRef, }: MegaMenuProps) => { const navigate = useNavigate(); if (!isOpen) return null; const handleNavigate = (path: string, target?: string) => { if (target === "_blank") { window.open(path, "_blank", "noopener,noreferrer"); } else { navigate(path); } onClose(); }; const renderServicesMenu = () => (
{navigationData.services.map((service, index) => { const Icon = service.icon; return (
{ e.preventDefault(); handleNavigate(service.href); }} > {service.category}
); })}
); const renderAIMenu = () => (
{navigationData.ai_data_intelligence.map((category) => { const Icon = category.icon; return (
{ e.preventDefault(); handleNavigate(category.href); }} > {category.category}
); })}
); const renderSolutionsMenu = () => (
{navigationData.solutions.map((solution) => { const Icon = solution.icon; return ( { e.preventDefault(); handleNavigate(solution.href); }} >
{solution.text} ); })}
); const renderIndustriesMenu = () => (
{navigationData.industries.map((industry) => { const Icon = industry.icon; return (

{industry.group}

); })}
); const renderGenericMenu = (items: any[], menuType: string) => (
{items.map((item) => { const Icon = item.icon; return ( { e.preventDefault(); handleNavigate(item.href, item.target); }} >
{item.text} ); })}
); const getMenuContent = () => { switch (type) { case "Services": return renderServicesMenu(); case "AI & ML": return renderAIMenu(); case "Solutions": return renderSolutionsMenu(); case "Industries": return renderIndustriesMenu(); case "Hire Talent": return renderGenericMenu(navigationData.hire_talent, "Hire Talent"); case "Company": return renderGenericMenu(navigationData.company, "Company"); case "Resources": return renderGenericMenu(navigationData.resources, "Resources"); case "Contact": return renderGenericMenu(navigationData.contact, "Contact"); default: return null; } }; return (
{getMenuContent()}
); }; export const Navigation = () => { const [activeMenu, setActiveMenu] = useState(null); const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false); const timeoutRef = useRef(); const navRef = useRef(null); const navigate = useNavigate(); const openMenu = useCallback((item: string) => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } if ( [ "Services", "AI & ML", "Solutions", "Industries", "Hire Talent", "Company", "Resources", ].includes(item) ) { setActiveMenu(item); } }, []); const closeMenu = useCallback(() => { timeoutRef.current = setTimeout(() => { setActiveMenu(null); }, 200); }, []); const cancelClose = useCallback(() => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }, []); const handleNavItemMouseEnter = useCallback( (item: string) => { cancelClose(); openMenu(item); }, [cancelClose, openMenu] ); const handleNavItemMouseLeave = useCallback(() => { closeMenu(); }, [closeMenu]); const handleNavMouseLeave = useCallback( (e: React.MouseEvent) => { const relatedTarget = e.relatedTarget; if ( relatedTarget instanceof Node && !navRef.current?.contains(relatedTarget) ) { closeMenu(); } }, [closeMenu] ); const handleNavMouseEnter = useCallback(() => { cancelClose(); }, [cancelClose]); useEffect(() => { return () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } }; }, []); const hasDropdown = (item: string) => { return [ "Services", "AI & ML", "Solutions", "Industries", "Hire Talent", "Company", "Resources", ].includes(item); }; // Function to get main category page route for navigation items const getMainCategoryRoute = (item: string) => { switch (item) { case "Services": return "/services"; case "Company": return "/company/about-wdi"; case "Resources": return "/resources"; case "Contact": return "/contact"; case "Hire Talent": return "/hire-talent"; case "AI & ML": return "/artificial-intelligence"; case "Solutions": return "/solutions/digital-product-development"; case "Industries": return "/industries/fintech-banking-apps"; default: return "/"; } }; const handleNavigation = (path: string, target?: string) => { if (target === "_blank") { window.open(path, "_blank", "noopener,noreferrer"); } else { navigate(path); } setIsMobileMenuOpen(false); setActiveMenu(null); }; return ( ); };