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

const hireNativeAppDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire Native App Developers",
    description: "Get access to specialized native app developers for iOS and Android platforms. Build high-performance applications with platform-specific optimizations and native user experiences.",
    primaryCTA: {
      text: "Hire Native Developers",
      href: "/contact-us",
      icon: Smartphone
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // Native development specific metrics
  metrics: [
    {
      value: "200+",
      label: "Native Apps Delivered",
      description: "iOS and Android applications"
    },
    {
      value: "99%",
      label: "Performance Optimization",
      description: "Native speed and efficiency"
    },
    {
      value: "35M+",
      label: "Native Downloads",
      description: "Across both platforms"
    },
    {
      value: "4.9/5",
      label: "User Experience Rating",
      description: "Platform-native feel"
    }
  ],

  // Native development process
  process: {
    title: "Our Native Development Process",
    subtitle: "Platform-specific excellence",
    steps: [
      {
        number: "01",
        title: "Platform-Specific Strategy",
        description: "Define native development approach for iOS and Android with platform-optimized features.",
        icon: <Smartphone className="w-8 h-8" />,
        details: [
          "iOS Swift/SwiftUI strategy",
          "Android Kotlin/Java approach", 
          "Platform-specific feature planning",
          "Native API integration roadmap"
        ]
      },
      {
        number: "02", 
        title: "Native UI/UX Design",
        description: "Create platform-specific designs following iOS Human Interface and Android Material Design guidelines.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "iOS-specific interface patterns",
          "Android Material Design implementation",
          "Platform-native animations",
          "Accessibility compliance"
        ]
      },
      {
        number: "03",
        title: "Native Development & Optimization",
        description: "Build applications using native languages and SDKs with maximum performance optimization.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Swift/Objective-C for iOS",
          "Kotlin/Java for Android",
          "Native SDK utilization",
          "Platform-specific optimizations"
        ]
      },
      {
        number: "04",
        title: "Native Store Optimization",
        description: "Optimize for each platform's app store with native features and compliance requirements.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Platform-specific ASO",
          "Native feature showcasing",
          "Store guideline compliance", 
          "Platform-optimized updates"
        ]
      }
    ]
  },

  // Native development focused FAQs
  faqs: [
    {
      question: "What are the advantages of native app development?",
      answer: "Native apps offer superior performance, full access to platform APIs, better security, optimal user experience following platform guidelines, faster execution, and seamless integration with device features and operating system capabilities."
    },
    {
      question: "Do you develop for both iOS and Android natively?",
      answer: "Yes, we have dedicated iOS developers (Swift, SwiftUI, Objective-C) and Android developers (Kotlin, Java) who specialize in their respective platforms, ensuring optimal native performance and user experience on each platform."
    },
    {
      question: "How do you handle the increased development cost of native apps?",
      answer: "While native development requires separate codebases, we optimize costs through efficient project management, code reuse where possible, parallel development teams, and focusing on platform-specific features that provide maximum value."
    },
    {
      question: "Can native apps integrate with all device features?",
      answer: "Yes, native apps have complete access to all device capabilities including camera, GPS, sensors, biometric authentication, push notifications, background processing, and platform-specific features like iOS Shortcuts or Android widgets."
    },
    {
      question: "How do you ensure consistent functionality across iOS and Android native apps?",
      answer: "We maintain consistent core functionality through detailed specification documents, shared testing protocols, synchronized feature development, and coordinated release cycles while optimizing each platform's unique capabilities."
    },
    {
      question: "What native development tools and frameworks do you use?",
      answer: "For iOS: Xcode, Swift, SwiftUI, UIKit, Core Data. For Android: Android Studio, Kotlin, Jetpack Compose, Android SDK, Room Database. We use the latest native tools and frameworks for optimal development experience."
    }
  ]
};

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

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

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

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

      {/* FAQ Section */}
      <section>
        <FAQSection 
          title="Native Development FAQs"
          subtitle="Everything you need to know about hiring native app developers"
          faqs={hireNativeAppDevelopersData.faqs}
        />
      </section>

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

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

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