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 { BackendVector } from "../components/vectors/BackendVector";
import { Server, Users, Code, CheckCircle, Star, Award, Clock, TrendingUp } from "lucide-react";

const hireAPIBackendDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire API & Backend Development Developers",
    description: "Build robust, scalable backend systems and APIs that power your applications. Our developers specialize in microservices, RESTful APIs, GraphQL, and cloud-native backend architectures.",
    primaryCTA: {
      text: "Hire API & Backend Developers",
      href: "/contact-us",
      icon: Server
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // API & Backend specific metrics
  metrics: [
    {
      value: "400+",
      label: "APIs Developed",
      description: "Production-ready endpoints"
    },
    {
      value: "99.99%",
      label: "API Uptime",
      description: "Enterprise-grade reliability"
    },
    {
      value: "<100ms",
      label: "Average Response Time",
      description: "Optimized performance"
    },
    {
      value: "1M+",
      label: "Requests Per Minute",
      description: "High-throughput handling"
    }
  ],

  // API & Backend development process
  process: {
    title: "Our API & Backend Development Process",
    subtitle: "From architecture design to production deployment",
    steps: [
      {
        number: "01",
        title: "Architecture & API Design",
        description: "Design scalable backend architecture and define comprehensive API specifications for optimal performance.",
        icon: <Server className="w-8 h-8" />,
        details: [
          "System architecture and technology selection",
          "API design and documentation (OpenAPI/Swagger)",
          "Database schema and optimization planning",
          "Security and authentication strategy"
        ]
      },
      {
        number: "02", 
        title: "Development & Implementation",
        description: "Build robust backend services with clean code, proper error handling, and comprehensive testing.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "RESTful API and GraphQL development",
          "Microservices architecture implementation",
          "Database integration and optimization",
          "Authentication and authorization systems"
        ]
      },
      {
        number: "03",
        title: "Testing & Quality Assurance",
        description: "Comprehensive testing including unit tests, integration tests, and performance optimization.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Automated testing pipelines",
          "Load testing and performance optimization",
          "Security testing and vulnerability assessment",
          "API documentation and validation"
        ]
      },
      {
        number: "04",
        title: "Deployment & Monitoring",
        description: "Deploy to production with CI/CD pipelines, monitoring, and comprehensive logging systems.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "CI/CD pipeline setup and automation",
          "Production deployment and scaling",
          "Monitoring, logging, and alerting",
          "Performance optimization and maintenance"
        ]
      }
    ]
  },

  // API & Backend focused FAQs
  faqs: [
    {
      question: "What backend technologies and frameworks do your developers use?",
      answer: "Our developers are proficient in Node.js, Python (Django/Flask), .NET Core, Java Spring, PHP Laravel, Ruby on Rails, and Go. We also work with both SQL (PostgreSQL, MySQL) and NoSQL (MongoDB, Redis) databases based on your requirements."
    },
    {
      question: "How do you ensure API security and data protection?",
      answer: "We implement comprehensive security measures including OAuth 2.0, JWT tokens, API rate limiting, input validation, SQL injection prevention, encryption at rest and in transit, and regular security audits to protect your data and systems."
    },
    {
      question: "Can you build both RESTful APIs and GraphQL endpoints?",
      answer: "Yes, we develop both RESTful APIs following REST principles and GraphQL APIs for more flexible data querying. We help you choose the best approach based on your frontend requirements, data complexity, and performance needs."
    },
    {
      question: "How do you handle API scalability and performance optimization?",
      answer: "We design APIs with scalability in mind using microservices architecture, caching strategies (Redis, Memcached), database optimization, load balancing, and auto-scaling infrastructure to handle growing traffic and data volumes."
    },
    {
      question: "Do you provide API documentation and integration support?",
      answer: "Yes, we create comprehensive API documentation using tools like Swagger/OpenAPI, provide integration guides, code examples, and offer ongoing support to help your team and third-party developers integrate with your APIs effectively."
    },
    {
      question: "How do you handle database design and optimization?",
      answer: "We design optimized database schemas, implement proper indexing strategies, set up replication and backup systems, and use database optimization techniques like query optimization, connection pooling, and caching to ensure optimal performance."
    }
  ]
};

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

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

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

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

      {/* FAQ Section */}
      <section>
        <FAQSection 
          title="API & Backend Development FAQs"
          subtitle="Everything you need to know about hiring API & backend developers"
          faqs={hireAPIBackendDevelopersData.faqs}
        />
      </section>

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

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

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