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 "../imports/BlackLogo14"; import { navigateTo } from "../App"; 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: "Our History", icon: Clock, href: "/company/our-history" }, { text: "Leadership Team", icon: Users2, href: "/company/leadership-team" }, { text: "Awards & Certifications", icon: Award, href: "/company/awards-certifications" }, { text: "Careers", icon: Briefcase, href: "/company/careers" }, { text: "Culture & Values", icon: Heart, href: "/company/culture-values" }, { text: "Press & Media", icon: Newspaper, href: "/company/press-media" } ], resources: [ { text: "Articles", icon: BookOpen, href: "/resources/blog" }, { text: "Case Studies", 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 - UPDATED ALL TO LINK TO START A PROJECT PAGE 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 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) => { if (!isOpen) return null; const navigate = (path: string) => { navigateTo(path); onClose(); }; const renderServicesMenu = () => (
{navigationData.services.map((service, index) => { const Icon = service.icon; return (

service.href && navigate(service.href)} > {service.category}

); })}
); const renderAIMenu = () => (
{navigationData.ai_data_intelligence.map((category) => { const Icon = category.icon; return (

category.href && navigate(category.href)} > {category.category}

); })}
); const renderSolutionsMenu = () => (
{navigationData.solutions.map((solution) => { const Icon = solution.icon; return ( { e.preventDefault(); if (solution.href) { navigate(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(); if (item.href) { navigate(item.href); } }} >
{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 = (path: string) => { navigateTo(path); }; 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 as Element; if (!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'; 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'; // Default to first solution case 'Industries': return '/industries/fintech-banking-apps'; // Default to first industry default: return null; } }; return ( ); };