import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { HireTalentHeroBanner } from "../components/HireTalentHeroBanner";
import { FAQSection } from "../components/FAQSection";
import { AppSuccessMetrics } from "../components/AppSuccessMetrics";
import { StepsIllustrated } from "../components/StepsIllustrated";
import { CarouselTestimonials } from "../components/CarouselTestimonials";
import { ResourceCards } from "../components/ResourceCards";
import { SplitCallToAction } from "../components/SplitCallToAction";
import { ProjectTimelineVector } from "../components/vectors/ProjectTimelineVector";
import { RefreshCw, Users, Code, CheckCircle, Star, Award, Clock, TrendingUp } from "lucide-react";

const hireProductModernizationDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire Product Modernization Developers",
    description: "Transform legacy systems into modern, scalable applications with expert modernization developers. Upgrade technology stacks, improve performance, and enhance user experience while maintaining business continuity.",
    primaryCTA: {
      text: "Hire Modernization Experts",
      href: "/contact-us",
      icon: RefreshCw
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // Product Modernization specific metrics
  metrics: [
    {
      value: "100+",
      label: "Modernization Projects",
      description: "Legacy systems transformed"
    },
    {
      value: "75%",
      label: "Performance Improvement",
      description: "Average speed increase"
    },
    {
      value: "60%",
      label: "Cost Reduction",
      description: "Operational cost savings"
    },
    {
      value: "Zero",
      label: "Downtime Migrations",
      description: "Seamless system transitions"
    }
  ],

  // Product Modernization development process
  process: {
    title: "Our Product Modernization Process",
    subtitle: "From legacy assessment to modern deployment",
    steps: [
      {
        number: "01",
        title: "Legacy System Assessment",
        description: "Comprehensive analysis of existing systems, identifying modernization opportunities and creating detailed transformation roadmaps.",
        icon: <RefreshCw className="w-8 h-8" />,
        details: [
          "Legacy code and architecture assessment",
          "Technology stack evaluation and analysis",
          "Business impact and risk assessment",
          "Modernization strategy and roadmap planning"
        ]
      },
      {
        number: "02", 
        title: "Modern Architecture Design",
        description: "Design new system architecture using modern technologies, ensuring scalability, maintainability, and performance improvements.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "Modern architecture design and planning",
          "Technology stack selection and migration",
          "Microservices and cloud-native design",
          "API design and integration strategy"
        ]
      },
      {
        number: "03",
        title: "Incremental Migration & Development",
        description: "Execute phased migration approach minimizing business disruption while building and testing new modernized components.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Phased migration strategy execution",
          "Data migration and validation processes",
          "Feature parity testing and validation",
          "User acceptance testing and feedback"
        ]
      },
      {
        number: "04",
        title: "Deployment & Optimization",
        description: "Deploy modernized systems with comprehensive monitoring, training, and ongoing optimization for maximum business value.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Production deployment and cutover",
          "Performance monitoring and optimization",
          "User training and change management",
          "Ongoing support and enhancement"
        ]
      }
    ]
  },

  // Product Modernization focused FAQs
  faqs: [
    {
      question: "What types of legacy systems can you modernize?",
      answer: "We modernize various legacy systems including mainframe applications, desktop software, outdated web applications, monolithic architectures, and systems built on obsolete technologies like COBOL, Visual Basic, legacy Java, and outdated .NET frameworks."
    },
    {
      question: "How do you ensure zero downtime during modernization?",
      answer: "We use strategies like blue-green deployments, canary releases, feature flags, gradual data migration, parallel system operation, and comprehensive rollback plans to ensure business continuity throughout the modernization process."
    },
    {
      question: "What modern technologies do you migrate legacy systems to?",
      answer: "We migrate to modern technologies including cloud-native architectures (AWS, Azure, GCP), microservices, containerization (Docker, Kubernetes), modern frameworks (React, Angular, Node.js), and databases optimized for performance and scalability."
    },
    {
      question: "How do you handle data migration and integrity?",
      answer: "We implement comprehensive data migration strategies including data mapping, transformation scripts, validation processes, backup systems, and gradual migration approaches to ensure data integrity and minimize loss during modernization."
    },
    {
      question: "What is your approach to maintaining business functionality during modernization?",
      answer: "We prioritize business continuity through incremental modernization, maintaining parallel systems during transition, comprehensive testing, user training, and ensuring feature parity before decommissioning legacy systems."
    },
    {
      question: "How do you measure the success of modernization projects?",
      answer: "We measure success through performance improvements, cost reduction, user satisfaction, system reliability, maintainability metrics, security enhancements, and business value delivery against predefined modernization goals."
    }
  ]
};

export function HireProductModernizationDevelopers() {
  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      
      {/* Hero Section with ProjectTimelineVector */}
      <HireTalentHeroBanner
        vectorComponent={ProjectTimelineVector}
        category={hireProductModernizationDevelopersData.heroBanner.category}
        title={hireProductModernizationDevelopersData.heroBanner.title}
        description={hireProductModernizationDevelopersData.heroBanner.description}
        primaryCTA={hireProductModernizationDevelopersData.heroBanner.primaryCTA}
        secondaryCTA={hireProductModernizationDevelopersData.heroBanner.secondaryCTA}
      />

      {/* Success Metrics */}
      {/* <section>
        <AppSuccessMetrics metrics={hireProductModernizationDevelopersData.metrics} />
      </section> */}

      {/* Development Process */}
      <section>
        <StepsIllustrated 
          title={hireProductModernizationDevelopersData.process.title}
          subtitle={hireProductModernizationDevelopersData.process.subtitle}
          steps={hireProductModernizationDevelopersData.process.steps}
        />
      </section>

      {/* Client Testimonials */}
      <section>
        <CarouselTestimonials />
      </section>

      {/* FAQ Section */}
      <section>
        <FAQSection 
          title="Product Modernization FAQs"
          subtitle="Everything you need to know about hiring product modernization developers"
          faqs={hireProductModernizationDevelopersData.faqs}
        />
      </section>

      {/* Resources */}
      <section>
        <ResourceCards />
      </section>

      {/* Call to Action */}
      <section>
        <SplitCallToAction />
      </section>

      {/* <Footer /> */}
    </div>
  );
}