import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { useState } from "react";
import { ChevronDown } from "lucide-react";
import { TechAnimation, TeamAnimation } from "@/components/TechAnimations";
import OptimizedImage from "@/components/ImageOptimization";
import { Link } from "react-router-dom";

// Import professional images - Enterprise-specific
import customSoftwareDevImage from "@/assets/custom-software-dev.jpg";
import sapDashboardImage from "@/assets/sap-s4hana-dashboard.jpg";
import salesforceCrmImage from "@/assets/salesforce-einstein-crm.jpg";
import workdayHcmImage from "@/assets/workday-hcm-dashboard.jpg";
import cloudMigrationImage from "@/assets/cloud-migration-enterprise.jpg";
import odcTeamImage from "@/assets/odc-bangalore-team.jpg";
import innovationImage from "@/assets/innovation-workspace.jpg";
import teamworkImage from "@/assets/teamwork-collaboration.jpg";
import itServicesImage from "@/assets/it-services-modern.jpg";
import technologyImage from "@/assets/advanced-technology.jpg";
import remoteWorkImage from "@/assets/remote-work-setup.jpg";
import clientSupportImage from "@/assets/client-support-communication.jpg";
import businessConsultingImage from "@/assets/business-consulting-strategy.jpg";
import teamMeetingImage from "@/assets/teamwork-meeting.jpg";
import teamBrainstormingImage from "@/assets/teamwork-brainstorming.jpg";
import itServerRoomImage from "@/assets/it-server-room.jpg";
import innovationLabImage from "@/assets/innovation-lab.jpg";
import technologyWorkspaceImage from "@/assets/technology-workspace.jpg";
import remoteWorkOfficeImage from "@/assets/remote-work-office.jpg";
import {
  Code,
  Smartphone,
  Globe,
  Database,
  Cloud,
  Shield,
  Settings,
  Users,
  Headphones,
  Cpu,
  BarChart3,
  Palette,
  Search,
  MessageSquare,
  Workflow,
  Zap,
  Target,
  FileText,
  Briefcase,
  Monitor,
  Layers,
  GitBranch,
  TestTube,
  Rocket,
  Wrench,
  Eye,
  Lock,
  Server,
  Bot,
  Brain,
  Network,
  HardDrive,
  Wifi,
  Smartphone as Mobile,
  Tablet,
  Watch,
} from "lucide-react";

const Services = () => {
  const [expandedServices, setExpandedServices] = useState<number[]>([]);

  const toggleService = (index: number) => {
    setExpandedServices((prev) =>
      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index],
    );
  };

  const services = [
    {
      icon: Code,
      title: "Custom Software Development",
      description:
        "Tailored software solutions built from scratch to meet your unique business requirements and objectives.",
      features: [
        "Full-stack development",
        "Legacy system modernization",
        "API development",
      ],
      category: "Development",
      image: customSoftwareDevImage,
      details: {
        overview:
          "Our custom software development services deliver bespoke solutions that perfectly align with your business processes and goals.",
        benefits: [
          "Scalable architecture",
          "Technology stack flexibility",
          "Custom integrations",
          "Ongoing support",
        ],
        technologies: [
          "React, Angular, Vue.js",
          "Node.js, Python, Java",
          "PostgreSQL, MongoDB",
          "AWS, Azure, GCP",
        ],
        process: [
          "Requirements gathering",
          "System design",
          "Development",
          "Testing & deployment",
        ],
      },
    },
    {
      icon: Smartphone,
      title: "Mobile App Development",
      description:
        "Native and cross-platform mobile applications for iOS and Android with engaging user experiences.",
      features: ["React Native", "Flutter", "Native development"],
      category: "Mobile",
      image: innovationImage,
      details: {
        overview:
          "We create high-performance mobile applications that provide seamless user experiences across all platforms.",
        benefits: [
          "Cross-platform compatibility",
          "Native performance",
          "App store optimization",
          "Push notifications",
        ],
        technologies: [
          "Swift, Kotlin",
          "React Native, Flutter",
          "Firebase, AWS Mobile",
          "App Analytics",
        ],
        process: [
          "UI/UX design",
          "Development",
          "Testing",
          "App store submission",
        ],
      },
    },
    {
      icon: Globe,
      title: "Web Development",
      description:
        "Modern, responsive websites and web applications using latest frameworks and technologies.",
      features: [
        "React/Angular/Vue",
        "Progressive Web Apps",
        "E-commerce platforms",
      ],
      category: "Web",
      image: itServicesImage,
      details: {
        overview:
          "We build modern, responsive web applications that deliver exceptional user experiences and drive business growth.",
        benefits: [
          "Responsive design",
          "SEO optimization",
          "Fast load times",
          "Cross-browser compatibility",
        ],
        technologies: [
          "React, Angular, Vue.js",
          "Next.js, Gatsby",
          "TypeScript, JavaScript",
          "Tailwind CSS, Material UI",
        ],
        process: [
          "Requirements analysis",
          "UI/UX design",
          "Development",
          "Testing & launch",
        ],
      },
    },
    {
      icon: Cloud,
      title: "Cloud Migration",
      description:
        "Seamless migration of your applications and data to cloud platforms with minimal downtime.",
      features: ["AWS/Azure/GCP", "Containerization", "Microservices"],
      category: "Cloud",
      image: cloudMigrationImage,
      details: {
        overview:
          "Our cloud migration services help you move to the cloud efficiently with minimal risk and maximum benefit.",
        benefits: [
          "Reduced infrastructure costs",
          "Scalability",
          "High availability",
          "Disaster recovery",
        ],
        technologies: [
          "AWS, Azure, Google Cloud",
          "Docker, Kubernetes",
          "Terraform, Ansible",
          "Cloud monitoring tools",
        ],
        process: [
          "Assessment & planning",
          "Migration strategy",
          "Implementation",
          "Optimization",
        ],
      },
    },
    {
      icon: Database,
      title: "Database Management",
      description:
        "Database design, optimization, and management services for optimal performance and security.",
      features: ["SQL/NoSQL", "Data modeling", "Performance tuning"],
      category: "Data",
      image: itServerRoomImage,
      details: {
        overview:
          "We provide comprehensive database management services to ensure your data is secure, accessible, and optimized for performance.",
        benefits: [
          "Data integrity",
          "Query optimization",
          "Backup & recovery",
          "Security compliance",
        ],
        technologies: [
          "PostgreSQL, MySQL, Oracle",
          "MongoDB, Cassandra, Redis",
          "Database monitoring tools",
          "ETL pipelines",
        ],
        process: [
          "Database audit",
          "Schema design",
          "Migration & setup",
          "Ongoing optimization",
        ],
      },
    },
    {
      icon: Shield,
      title: "Cybersecurity Services",
      description:
        "Comprehensive security solutions to protect your digital assets and ensure compliance.",
      features: [
        "Security audits",
        "Penetration testing",
        "Compliance management",
      ],
      category: "Security",
      image: technologyWorkspaceImage,
      details: {
        overview:
          "Protect your business from cyber threats with our comprehensive security solutions and compliance services.",
        benefits: [
          "Threat detection",
          "Risk mitigation",
          "Compliance assurance",
          "Security training",
        ],
        technologies: [
          "Security scanning tools",
          "SIEM solutions",
          "Firewall & IDS/IPS",
          "Encryption technologies",
        ],
        process: [
          "Security assessment",
          "Vulnerability analysis",
          "Implementation",
          "Monitoring & response",
        ],
      },
    },
    {
      icon: BarChart3,
      title: "Data Analytics & BI",
      description:
        "Transform raw data into actionable insights with advanced analytics and visualization tools.",
      features: [
        "Business intelligence",
        "Data visualization",
        "Predictive analytics",
      ],
      category: "Analytics",
      image: businessConsultingImage,
      details: {
        overview:
          "Turn your data into actionable insights with our advanced analytics and business intelligence solutions.",
        benefits: [
          "Data-driven decisions",
          "Real-time insights",
          "Custom dashboards",
          "Predictive modeling",
        ],
        technologies: [
          "Power BI, Tableau",
          "Python, R",
          "Apache Spark",
          "Machine learning frameworks",
        ],
        process: [
          "Data collection",
          "Analysis & modeling",
          "Visualization",
          "Insights delivery",
        ],
      },
    },
    {
      icon: Cpu,
      title: "AI & Machine Learning",
      description:
        "Intelligent solutions powered by artificial intelligence and machine learning algorithms.",
      features: [
        "Natural language processing",
        "Computer vision",
        "Predictive modeling",
      ],
      category: "AI/ML",
      image: sapDashboardImage,
      details: {
        overview:
          "Leverage the power of AI and machine learning to automate processes and gain competitive advantages.",
        benefits: [
          "Process automation",
          "Intelligent predictions",
          "Pattern recognition",
          "Enhanced decision-making",
        ],
        technologies: [
          "TensorFlow, PyTorch",
          "OpenAI, Hugging Face",
          "Scikit-learn",
          "Computer vision libraries",
        ],
        process: [
          "Use case analysis",
          "Model development",
          "Training & testing",
          "Deployment & monitoring",
        ],
      },
    },
    {
      icon: Settings,
      title: "DevOps & Automation",
      description:
        "Streamline your development pipeline with CI/CD, automation, and infrastructure as code.",
      features: [
        "CI/CD pipelines",
        "Infrastructure automation",
        "Monitoring & logging",
      ],
      category: "DevOps",
      image: innovationLabImage,
      details: {
        overview:
          "Accelerate your software delivery with our DevOps practices and automation solutions.",
        benefits: [
          "Faster deployments",
          "Reduced errors",
          "Continuous integration",
          "Infrastructure as code",
        ],
        technologies: [
          "Jenkins, GitLab CI",
          "Docker, Kubernetes",
          "Terraform, Ansible",
          "Prometheus, Grafana",
        ],
        process: [
          "Pipeline setup",
          "Automation implementation",
          "Monitoring configuration",
          "Continuous improvement",
        ],
      },
    },
    {
      icon: Palette,
      title: "UI/UX Design",
      description:
        "User-centered design solutions that create engaging and intuitive digital experiences.",
      features: ["User research", "Prototyping", "Design systems"],
      category: "Design",
      image: innovationLabImage,
      details: {
        overview:
          "Create exceptional user experiences with our comprehensive UI/UX design services that put users first.",
        benefits: [
          "Improved user satisfaction",
          "Higher conversion rates",
          "Brand consistency",
          "Reduced development costs",
        ],
        technologies: [
          "Figma, Adobe XD",
          "Sketch, InVision",
          "User testing tools",
          "Design systems",
        ],
        process: [
          "Research & discovery",
          "Wireframing",
          "Visual design",
          "Prototyping & testing",
        ],
      },
    },
    {
      icon: Headphones,
      title: "24/7 Support & Maintenance",
      description:
        "Round-the-clock technical support and maintenance to ensure optimal system performance.",
      features: ["Technical support", "System monitoring", "Regular updates"],
      category: "Support",
      image: clientSupportImage,
      details: {
        overview:
          "Keep your systems running smoothly with our 24/7 support and proactive maintenance services.",
        benefits: [
          "Minimized downtime",
          "Quick issue resolution",
          "Proactive monitoring",
          "Peace of mind",
        ],
        technologies: [
          "Monitoring tools",
          "Ticketing systems",
          "Remote access tools",
          "Log analysis",
        ],
        process: [
          "Initial assessment",
          "Monitoring setup",
          "Ongoing support",
          "Regular maintenance",
        ],
      },
    },
    {
      icon: Users,
      title: "Team Augmentation",
      description:
        "Scale your development team with our skilled professionals seamlessly integrated into your workflow.",
      features: ["Dedicated teams", "Flexible engagement", "Quick onboarding"],
      category: "Staffing",
      image: teamBrainstormingImage,
      details: {
        overview:
          "Quickly scale your team with experienced professionals who integrate seamlessly into your existing workflows.",
        benefits: [
          "Rapid scaling",
          "Cost-effective",
          "Access to expertise",
          "Flexible contracts",
        ],
        technologies: [
          "All major tech stacks",
          "Agile methodologies",
          "Collaboration tools",
          "Project management",
        ],
        process: [
          "Requirements gathering",
          "Candidate selection",
          "Onboarding",
          "Ongoing management",
        ],
      },
    },
    {
      icon: MessageSquare,
      title: "Consulting Services",
      description:
        "Strategic technology consulting to help you make informed decisions and optimize your IT investments.",
      features: [
        "Technology assessment",
        "Strategic planning",
        "Architecture review",
      ],
      category: "Consulting",
      image: teamMeetingImage,
      details: {
        overview:
          "Make confident technology decisions with expert guidance from our experienced consultants.",
        benefits: [
          "Strategic insights",
          "Risk mitigation",
          "Cost optimization",
          "Best practices",
        ],
        technologies: [
          "Architecture frameworks",
          "Assessment tools",
          "Industry standards",
          "Compliance frameworks",
        ],
        process: [
          "Current state analysis",
          "Gap assessment",
          "Recommendations",
          "Implementation roadmap",
        ],
      },
    },
    {
      icon: Workflow,
      title: "Business Process Automation",
      description:
        "Automate repetitive tasks and workflows to improve efficiency and reduce operational costs.",
      features: [
        "Process optimization",
        "Workflow automation",
        "Integration services",
      ],
      category: "Automation",
      image: businessConsultingImage,
      details: {
        overview:
          "Streamline your business operations by automating repetitive tasks and optimizing workflows.",
        benefits: [
          "Increased efficiency",
          "Reduced errors",
          "Cost savings",
          "Improved productivity",
        ],
        technologies: [
          "RPA tools",
          "Workflow engines",
          "Integration platforms",
          "Business rules engines",
        ],
        process: [
          "Process mapping",
          "Automation design",
          "Implementation",
          "Optimization",
        ],
      },
    },
    {
      icon: Target,
      title: "Quality Assurance",
      description:
        "Comprehensive testing services to ensure your software meets the highest quality standards.",
      features: [
        "Automated testing",
        "Performance testing",
        "Security testing",
      ],
      category: "QA",
      image: teamMeetingImage,
      details: {
        overview:
          "Ensure your software meets the highest quality standards with our comprehensive testing services.",
        benefits: [
          "Bug-free releases",
          "Improved reliability",
          "Enhanced user experience",
          "Reduced maintenance costs",
        ],
        technologies: [
          "Selenium, Cypress",
          "JMeter, LoadRunner",
          "Security testing tools",
          "Test management platforms",
        ],
        process: [
          "Test planning",
          "Test execution",
          "Defect tracking",
          "Quality reporting",
        ],
      },
    },
    {
      icon: FileText,
      title: "Technical Documentation",
      description:
        "Clear, comprehensive documentation for your software projects and technical processes.",
      features: [
        "API documentation",
        "User manuals",
        "Technical specifications",
      ],
      category: "Documentation",
      image: remoteWorkOfficeImage,
      details: {
        overview:
          "Create clear, comprehensive documentation that helps your team and users understand your software.",
        benefits: [
          "Better knowledge transfer",
          "Reduced support costs",
          "Improved onboarding",
          "Compliance",
        ],
        technologies: [
          "Swagger/OpenAPI",
          "Markdown",
          "Documentation generators",
          "Confluence",
        ],
        process: [
          "Content planning",
          "Documentation writing",
          "Review & refinement",
          "Publishing",
        ],
      },
    },
    {
      icon: Briefcase,
      title: "Enterprise Solutions",
      description:
        "Large-scale enterprise software solutions designed for complex business requirements.",
      features: ["ERP systems", "CRM solutions", "Enterprise architecture"],
      category: "Enterprise",
      image: teamBrainstormingImage,
      details: {
        overview:
          "Build enterprise-grade solutions that scale with your business and meet complex requirements.",
        benefits: [
          "Scalability",
          "Integration capabilities",
          "Security",
          "Compliance",
        ],
        technologies: [
          "SAP, Oracle",
          "Salesforce, Microsoft Dynamics",
          "Enterprise frameworks",
          "Integration platforms",
        ],
        process: [
          "Requirements analysis",
          "Solution design",
          "Implementation",
          "Support & maintenance",
        ],
      },
    },
    {
      icon: Monitor,
      title: "System Integration",
      description:
        "Seamlessly integrate disparate systems and applications for improved workflow efficiency.",
      features: [
        "API integration",
        "Data synchronization",
        "Legacy system integration",
      ],
      category: "Integration",
      image: technologyWorkspaceImage,
      details: {
        overview:
          "Connect your systems and applications for seamless data flow and improved operational efficiency.",
        benefits: [
          "Unified data view",
          "Automated workflows",
          "Reduced manual work",
          "Better insights",
        ],
        technologies: [
          "REST APIs",
          "Message queues",
          "ETL tools",
          "Integration platforms",
        ],
        process: [
          "System analysis",
          "Integration design",
          "Development",
          "Testing & deployment",
        ],
      },
    },
    {
      icon: Layers,
      title: "Microservices Architecture",
      description:
        "Design and implement scalable microservices architecture for modern applications.",
      features: [
        "Service decomposition",
        "API gateway",
        "Container orchestration",
      ],
      category: "Architecture",
      image: innovationLabImage,
      details: {
        overview:
          "Build scalable, maintainable applications using modern microservices architecture principles.",
        benefits: [
          "Independent deployment",
          "Technology flexibility",
          "Scalability",
          "Resilience",
        ],
        technologies: [
          "Docker, Kubernetes",
          "Service mesh",
          "API gateways",
          "Message brokers",
        ],
        process: [
          "Architecture design",
          "Service development",
          "Deployment setup",
          "Monitoring",
        ],
      },
    },
    {
      icon: GitBranch,
      title: "Version Control & Collaboration",
      description:
        "Implement robust version control systems and collaborative development workflows.",
      features: ["Git workflows", "Code review processes", "Branch management"],
      category: "Development",
      image: teamBrainstormingImage,
      details: {
        overview:
          "Establish effective version control and collaboration practices for your development teams.",
        benefits: [
          "Code quality",
          "Team collaboration",
          "Change tracking",
          "Rollback capability",
        ],
        technologies: [
          "Git, GitHub, GitLab",
          "Pull request workflows",
          "Code review tools",
          "CI/CD integration",
        ],
        process: [
          "Workflow design",
          "Team training",
          "Process implementation",
          "Continuous improvement",
        ],
      },
    },
    {
      icon: TestTube,
      title: "Performance Optimization",
      description:
        "Optimize application performance for speed, scalability, and resource efficiency.",
      features: ["Code optimization", "Database tuning", "Caching strategies"],
      category: "Performance",
      image: innovationLabImage,
      details: {
        overview:
          "Enhance your application's performance with our comprehensive optimization services.",
        benefits: [
          "Faster load times",
          "Better user experience",
          "Reduced costs",
          "Improved scalability",
        ],
        technologies: [
          "Profiling tools",
          "CDN services",
          "Caching systems",
          "Load testing tools",
        ],
        process: [
          "Performance audit",
          "Bottleneck identification",
          "Optimization",
          "Testing & validation",
        ],
      },
    },
    {
      icon: Rocket,
      title: "Deployment & Delivery",
      description:
        "Reliable deployment strategies and continuous delivery pipelines for seamless releases.",
      features: [
        "Blue-green deployment",
        "Canary releases",
        "Rollback strategies",
      ],
      category: "Deployment",
      image: cloudMigrationImage,
      details: {
        overview:
          "Implement reliable deployment strategies for seamless application releases with minimal risk.",
        benefits: [
          "Zero-downtime deployments",
          "Quick rollbacks",
          "Reduced deployment risks",
          "Faster releases",
        ],
        technologies: [
          "CI/CD tools",
          "Container orchestration",
          "Release automation",
          "Deployment monitoring",
        ],
        process: [
          "Deployment planning",
          "Pipeline setup",
          "Testing",
          "Production deployment",
        ],
      },
    },
    {
      icon: Wrench,
      title: "System Maintenance",
      description:
        "Proactive system maintenance and updates to ensure optimal performance and security.",
      features: [
        "Regular updates",
        "Security patches",
        "Performance monitoring",
      ],
      category: "Maintenance",
      image: itServerRoomImage,
      details: {
        overview:
          "Keep your systems running optimally with proactive maintenance and timely updates.",
        benefits: [
          "System reliability",
          "Security compliance",
          "Reduced downtime",
          "Cost efficiency",
        ],
        technologies: [
          "Monitoring tools",
          "Patch management",
          "Backup solutions",
          "Maintenance automation",
        ],
        process: [
          "System assessment",
          "Scheduled maintenance",
          "Update implementation",
          "Verification",
        ],
      },
    },
    {
      icon: Eye,
      title: "Monitoring & Analytics",
      description:
        "Real-time monitoring and analytics to track system performance and user behavior.",
      features: [
        "Application monitoring",
        "User analytics",
        "Performance metrics",
      ],
      category: "Monitoring",
      image: businessConsultingImage,
      details: {
        overview:
          "Gain deep insights into your systems and users with comprehensive monitoring and analytics.",
        benefits: [
          "Proactive issue detection",
          "Data-driven decisions",
          "User behavior insights",
          "Performance visibility",
        ],
        technologies: [
          "APM tools",
          "Log aggregation",
          "Analytics platforms",
          "Alerting systems",
        ],
        process: [
          "Monitoring setup",
          "Data collection",
          "Analysis",
          "Actionable insights",
        ],
      },
    },
    {
      icon: Lock,
      title: "Data Security & Privacy",
      description:
        "Comprehensive data protection strategies to ensure privacy and regulatory compliance.",
      features: [
        "Data encryption",
        "Privacy compliance",
        "Secure data handling",
      ],
      category: "Security",
      image: technologyWorkspaceImage,
      details: {
        overview:
          "Protect sensitive data with comprehensive security measures and ensure regulatory compliance.",
        benefits: [
          "Data protection",
          "Regulatory compliance",
          "Customer trust",
          "Risk mitigation",
        ],
        technologies: [
          "Encryption tools",
          "DLP solutions",
          "Compliance frameworks",
          "Security protocols",
        ],
        process: [
          "Security assessment",
          "Policy development",
          "Implementation",
          "Compliance monitoring",
        ],
      },
    },
    {
      icon: Server,
      title: "Infrastructure Management",
      description:
        "Complete infrastructure management services for optimal system performance and reliability.",
      features: ["Server management", "Load balancing", "Disaster recovery"],
      category: "Infrastructure",
      image: itServerRoomImage,
      details: {
        overview:
          "Manage your IT infrastructure efficiently with our comprehensive management services.",
        benefits: [
          "High availability",
          "Optimal performance",
          "Disaster recovery",
          "Cost optimization",
        ],
        technologies: [
          "Server technologies",
          "Load balancers",
          "Backup systems",
          "Infrastructure monitoring",
        ],
        process: [
          "Infrastructure assessment",
          "Setup & configuration",
          "Ongoing management",
          "Optimization",
        ],
      },
    },
    {
      icon: Bot,
      title: "Chatbot Development",
      description:
        "Intelligent chatbots and virtual assistants to enhance customer engagement and support.",
      features: [
        "Natural language processing",
        "Multi-platform deployment",
        "Integration capabilities",
      ],
      category: "AI/ML",
      image: salesforceCrmImage,
      details: {
        overview:
          "Build intelligent chatbots that provide 24/7 customer support and enhance user engagement.",
        benefits: [
          "24/7 availability",
          "Reduced support costs",
          "Improved customer satisfaction",
          "Scalability",
        ],
        technologies: [
          "NLP frameworks",
          "Chatbot platforms",
          "Integration APIs",
          "Analytics tools",
        ],
        process: [
          "Requirements analysis",
          "Bot design",
          "Development & training",
          "Deployment",
        ],
      },
    },
    {
      icon: Brain,
      title: "Cognitive Services",
      description:
        "Advanced cognitive services leveraging AI for intelligent decision-making and automation.",
      features: [
        "Machine learning models",
        "Predictive analytics",
        "Intelligent automation",
      ],
      category: "AI/ML",
      image: innovationLabImage,
      details: {
        overview:
          "Leverage advanced AI capabilities for intelligent automation and decision-making.",
        benefits: [
          "Intelligent automation",
          "Predictive insights",
          "Enhanced efficiency",
          "Competitive advantage",
        ],
        technologies: [
          "Azure Cognitive Services",
          "AWS AI Services",
          "Custom ML models",
          "AI platforms",
        ],
        process: [
          "Use case identification",
          "Model selection",
          "Implementation",
          "Continuous learning",
        ],
      },
    },
    {
      icon: Network,
      title: "Network Solutions",
      description:
        "Robust network infrastructure design and management for secure and efficient connectivity.",
      features: [
        "Network design",
        "Security implementation",
        "Performance optimization",
      ],
      category: "Infrastructure",
      image: cloudMigrationImage,
      details: {
        overview:
          "Design and manage secure, high-performance network infrastructure for your organization.",
        benefits: [
          "Reliable connectivity",
          "Enhanced security",
          "Optimized performance",
          "Scalability",
        ],
        technologies: [
          "Network hardware",
          "SD-WAN",
          "Network security tools",
          "Monitoring systems",
        ],
        process: [
          "Network assessment",
          "Design & planning",
          "Implementation",
          "Ongoing management",
        ],
      },
    },
    {
      icon: HardDrive,
      title: "Data Migration",
      description:
        "Secure and efficient data migration services with minimal business disruption.",
      features: [
        "Data assessment",
        "Migration planning",
        "Validation & testing",
      ],
      category: "Data",
      image: itServerRoomImage,
      details: {
        overview:
          "Migrate your data safely and efficiently with minimal downtime and zero data loss.",
        benefits: [
          "Zero data loss",
          "Minimal downtime",
          "Data integrity",
          "Smooth transition",
        ],
        technologies: [
          "ETL tools",
          "Data validation tools",
          "Migration platforms",
          "Backup systems",
        ],
        process: [
          "Data assessment",
          "Migration strategy",
          "Execution",
          "Validation",
        ],
      },
    },
    {
      icon: Wifi,
      title: "IoT Solutions",
      description:
        "End-to-end IoT solutions from device connectivity to data analytics and visualization.",
      features: [
        "Device management",
        "Data collection",
        "Analytics dashboards",
      ],
      category: "IoT",
      image: technologyImage,
      details: {
        overview:
          "Build comprehensive IoT solutions that connect devices and turn data into actionable insights.",
        benefits: [
          "Real-time monitoring",
          "Predictive maintenance",
          "Operational efficiency",
          "Data-driven insights",
        ],
        technologies: [
          "IoT platforms",
          "Device protocols",
          "Cloud integration",
          "Analytics tools",
        ],
        process: [
          "Solution design",
          "Device integration",
          "Platform development",
          "Analytics setup",
        ],
      },
    },
    {
      icon: Mobile,
      title: "Progressive Web Apps",
      description:
        "Modern web applications that provide native app-like experiences across all devices.",
      features: [
        "Offline functionality",
        "Push notifications",
        "App-like interface",
      ],
      category: "Web",
      image: innovationImage,
      details: {
        overview:
          "Create progressive web apps that combine the best of web and mobile applications.",
        benefits: [
          "Cross-platform compatibility",
          "Offline capability",
          "Fast performance",
          "No app store required",
        ],
        technologies: [
          "Service Workers",
          "Web App Manifest",
          "IndexedDB",
          "Push API",
        ],
        process: [
          "Requirements analysis",
          "PWA development",
          "Testing",
          "Deployment",
        ],
      },
    },
    {
      icon: Tablet,
      title: "Cross-Platform Development",
      description:
        "Develop once, deploy everywhere with cross-platform development frameworks.",
      features: ["React Native", "Flutter", "Xamarin"],
      category: "Mobile",
      image: remoteWorkOfficeImage,
      details: {
        overview:
          "Build apps that work seamlessly across iOS, Android, and web with a single codebase.",
        benefits: [
          "Cost efficiency",
          "Faster development",
          "Consistent UX",
          "Easier maintenance",
        ],
        technologies: ["React Native", "Flutter", "Xamarin", "Ionic"],
        process: [
          "Platform selection",
          "Development",
          "Testing",
          "Multi-platform deployment",
        ],
      },
    },
    {
      icon: Watch,
      title: "Wearable App Development",
      description:
        "Specialized applications for smartwatches and wearable devices with optimized user interfaces.",
      features: ["Smartwatch apps", "Fitness tracking", "Health monitoring"],
      category: "Wearable",
      image: innovationLabImage,
      details: {
        overview:
          "Create innovative wearable applications optimized for small screens and on-the-go usage.",
        benefits: [
          "Always accessible",
          "Health insights",
          "Personalized experiences",
          "Seamless integration",
        ],
        technologies: [
          "WatchOS",
          "Wear OS",
          "Health APIs",
          "Sensor integration",
        ],
        process: [
          "UX design for wearables",
          "Development",
          "Testing",
          "App store submission",
        ],
      },
    },
    {
      icon: Zap,
      title: "API Development & Management",
      description:
        "Design, develop, and manage robust APIs for seamless system integration and data exchange.",
      features: ["RESTful APIs", "GraphQL", "API documentation"],
      category: "Development",
      image: teamMeetingImage,
      details: {
        overview:
          "Build and manage secure, scalable APIs that enable seamless integration and data exchange.",
        benefits: [
          "Easy integration",
          "Scalability",
          "Security",
          "Documentation",
        ],
        technologies: [
          "REST, GraphQL",
          "API gateways",
          "Swagger/OpenAPI",
          "API management platforms",
        ],
        process: [
          "API design",
          "Development",
          "Documentation",
          "Deployment & management",
        ],
      },
    },
  ];

  // Only show top 10 services
  const topServices = services.slice(0, 10);

  const categories = [
    ...new Set(topServices.map((service) => service.category)),
  ];

  return (
    <section
      id="services"
      className="py-12 md:py-16 lg:py-20 bg-gradient-to-b from-background via-secondary/10 to-background"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12 md:mb-16">
          <TeamAnimation type="team-formation" className="mb-6">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 md:mb-6 bg-duo-gradient bg-clip-text text-transparent">
              Solutions That Drive Results
            </h2>
            <p className="text-lg md:text-xl text-foreground mx-auto mb-4">
              Stop losing revenue to outdated technology. Our proven solutions
              help businesses like yours achieve measurable growth.
            </p>
            <p className="text-base md:text-lg text-muted-foreground/80">
              25+ specialized services · 180+ successful projects · 40% average
              cost reduction
            </p>
          </TeamAnimation>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
          {topServices.map((service, index) => (
            <TeamAnimation
              key={index}
              type="team-formation"
              delay={index * 100}
            >
              <Card
                className={`group hover:shadow-elegant transition-all duration-300 hover:-translate-y-1 bg-gradient-card border ${index % 2 === 0 ? "border-primary/20" : "border-secondary/20"} h-full overflow-hidden`}
              >
                {/* Service Image */}
                <div className="relative h-48 overflow-hidden">
                  <OptimizedImage
                    src={service.image}
                    alt={`${service.title} professional services`}
                    width={400}
                    height={192}
                    className="w-full h-full object-cover group-hover:scale-105 transition-all duration-500 ease-out"
                    placeholder="blur"
                    lazy={index > 5} // Load first 6 images immediately
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                  <div className="absolute bottom-4 left-4">
                    <div className="text-xs text-white font-semibold px-3 py-1 bg-white/20 backdrop-blur-sm rounded-full">
                      {service.category}
                    </div>
                  </div>
                </div>

                <CardHeader className={service.image ? "pb-4" : ""}>
                  <div className="flex items-center gap-4 mb-4">
                    <TechAnimation
                      type="circuit-glow"
                      className={`${index % 2 === 0 ? "bg-gradient-primary" : "bg-gradient-to-br from-secondary to-primary"} p-3 rounded-lg group-hover:shadow-glow transition-all duration-300`}
                    >
                      <service.icon className="h-6 w-6 text-white" />
                    </TechAnimation>
                    {!service.image && (
                      <div className="text-xs text-accent font-semibold px-2 py-1 bg-accent/10 rounded-full animate-slide-up-fade">
                        {service.category}
                      </div>
                    )}
                  </div>
                  <CardTitle className="text-xl font-semibold text-foreground group-hover:text-primary transition-colors">
                    {service.title}
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-muted-foreground mb-6 leading-relaxed">
                    {service.description}
                  </p>
                  <div className="space-y-2 mb-6">
                    {service.features.map((feature, featureIndex) => (
                      <div
                        key={featureIndex}
                        className="flex items-center gap-2"
                      >
                        <div
                          className={`w-1.5 h-1.5 rounded-full ${featureIndex % 2 === 0 ? "bg-primary shadow-glow" : "bg-secondary shadow-glow-secondary"}`}
                        ></div>
                        <span className="text-sm text-muted-foreground">
                          {feature}
                        </span>
                      </div>
                    ))}
                  </div>
                  <Collapsible>
                    <CollapsibleTrigger asChild>
                      <Button
                        variant="outline"
                        className="w-full group-hover:border-primary group-hover:text-primary transition-all duration-300"
                        onClick={() => toggleService(index)}
                      >
                        {expandedServices.includes(index)
                          ? "Show Less"
                          : "Learn More"}
                        <ChevronDown
                          className={`ml-2 h-4 w-4 transition-transform ${expandedServices.includes(index) ? "rotate-180" : ""}`}
                        />
                      </Button>
                    </CollapsibleTrigger>
                    {service.details && (
                      <CollapsibleContent className="mt-4 space-y-4">
                        <div className="col-span-2">
                          <h5 className="font-semibold text-foreground mb-2">
                            Overview
                          </h5>
                          <p className="text-sm text-muted-foreground">
                            {service.details.overview}
                          </p>
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                          <div>
                            <h5 className="font-semibold text-foreground mb-2">
                              Key Benefits
                            </h5>
                            <ul className="text-sm text-muted-foreground space-y-1">
                              {service.details.benefits.map((benefit, i) => (
                                <li key={i} className="flex items-center gap-2">
                                  <div
                                    className={`w-1.5 h-1.5 ${i % 2 === 0 ? "bg-primary shadow-glow" : "bg-secondary shadow-glow-secondary"} rounded-full`}
                                  ></div>
                                  {benefit}
                                </li>
                              ))}
                            </ul>
                          </div>
                          <div>
                            <h5 className="font-semibold text-foreground mb-2">
                              Technologies
                            </h5>
                            <ul className="text-sm text-muted-foreground space-y-1">
                              {service.details.technologies.map((tech, i) => (
                                <li key={i} className="flex items-center gap-2">
                                  <div
                                    className={`w-1.5 h-1.5 ${i % 2 === 0 ? "bg-secondary shadow-glow-secondary" : "bg-primary shadow-glow"} rounded-full`}
                                  ></div>
                                  {tech}
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>
                        <div>
                          <h5 className="font-semibold text-foreground mb-2">
                            Process
                          </h5>
                          <div className="flex flex-wrap gap-2">
                            {service.details.process.map((step, i) => (
                              <span
                                key={i}
                                className={`text-xs ${i % 2 === 0 ? "bg-primary/10 text-primary border-primary/20" : "bg-secondary/10 text-secondary border-secondary/20"} px-2 py-1 rounded-full border`}
                              >
                                {i + 1}. {step}
                              </span>
                            ))}
                          </div>
                        </div>
                      </CollapsibleContent>
                    )}
                  </Collapsible>
                </CardContent>
              </Card>
            </TeamAnimation>
          ))}
        </div>

        <TeamAnimation type="team-formation">
          <div className="mt-12 md:mt-16 text-center">
            <p className="text-muted-foreground mb-6">
              Explore our complete range of 25+ specialized services
            </p>
            <Link to="/services/all">
              <Button
                size="lg"
                className="shadow-lg hover:shadow-xl transition-shadow"
              >
                View All Services
              </Button>
            </Link>
          </div>
        </TeamAnimation>
      </div>
    </section>
  );
};

export default Services;
