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

const hireCrossPlatformDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire Cross-Platform Developers",
    description: "Get access to expert cross-platform developers specialized in React Native, Flutter, and Xamarin. Build once, deploy everywhere with native performance and user experience.",
    primaryCTA: {
      text: "Hire Cross-Platform Developers",
      href: "/contact-us",
      icon: Smartphone
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // Cross-platform specific metrics
  metrics: [
    {
      value: "120+",
      label: "Cross-Platform Apps",
      description: "Successfully deployed on both platforms"
    },
    {
      value: "60%",
      label: "Development Time Saved",
      description: "Compared to native development"
    },
    {
      value: "25M+",
      label: "Multi-Platform Downloads",
      description: "Across iOS and Android"
    },
    {
      value: "92%",
      label: "Code Reusability",
      description: "Shared across platforms"
    }
  ],

  // Cross-platform development process
  process: {
    title: "Our Cross-Platform Development Process",
    subtitle: "Efficient development for multiple platforms",
    steps: [
      {
        number: "01",
        title: "Platform Strategy & Framework Selection",
        description: "Analyze requirements and select the best cross-platform framework for your project needs.",
        icon: <Smartphone className="w-8 h-8" />,
        details: [
          "React Native vs Flutter analysis",
          "Performance requirements assessment", 
          "Platform-specific feature evaluation",
          "Code sharing strategy planning"
        ]
      },
      {
        number: "02", 
        title: "Unified Design System",
        description: "Create consistent designs that work seamlessly across iOS and Android platforms.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "Cross-platform design system",
          "Platform-aware components",
          "Responsive layout design",
          "Accessibility across platforms"
        ]
      },
      {
        number: "03",
        title: "Cross-Platform Development",
        description: "Build applications using modern cross-platform frameworks with native performance optimization.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "React Native/Flutter development",
          "Native module integration",
          "Platform-specific optimizations",
          "Comprehensive testing across platforms"
        ]
      },
      {
        number: "04",
        title: "Dual Store Deployment",
        description: "Deploy to both App Store and Google Play with optimized listings and compliance.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Simultaneous store submissions",
          "Platform-specific optimizations",
          "Dual store ASO strategy", 
          "Synchronized update management"
        ]
      }
    ]
  },

  // Cross-platform focused FAQs
  faqs: [
    {
      question: "Which cross-platform frameworks do your developers specialize in?",
      answer: "Our developers are experts in React Native, Flutter, and Xamarin. We help you choose the best framework based on your project requirements, team expertise, performance needs, and long-term maintenance considerations."
    },
    {
      question: "How do you ensure native-like performance in cross-platform apps?",
      answer: "We optimize performance through efficient state management, native module integration when needed, proper memory management, and platform-specific optimizations. We also conduct extensive testing to ensure smooth performance on both platforms."
    },
    {
      question: "Can cross-platform apps access native device features?",
      answer: "Yes, our developers can integrate native device features like camera, GPS, push notifications, biometric authentication, and platform-specific APIs through native modules and plugins, ensuring full functionality across platforms."
    },
    {
      question: "How much development time and cost can cross-platform save?",
      answer: "Cross-platform development typically saves 40-60% in development time and costs compared to building separate native apps. The exact savings depend on app complexity, required platform-specific features, and customization needs."
    },
    {
      question: "Do you handle platform-specific customizations and requirements?",
      answer: "Absolutely. While maximizing code reuse, we implement platform-specific customizations for optimal user experience, handle different design guidelines, and ensure compliance with both App Store and Google Play requirements."
    },
    {
      question: "How do you maintain and update cross-platform applications?",
      answer: "We provide ongoing maintenance with synchronized updates across platforms, framework version upgrades, performance optimizations, and new feature additions while maintaining code sharing benefits."
    }
  ]
};

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

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

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

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

      {/* FAQ Section */}
      <section>
        <FAQSection 
          title="Cross-Platform Development FAQs"
          subtitle="Everything you need to know about hiring cross-platform developers"
          faqs={hireCrossPlatformDevelopersData.faqs}
        />
      </section>

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

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

      <Footer />
    </div>
  );
}