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

const hirePWADevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire PWA Developers",
    description: "Get access to Progressive Web App specialists who build app-like experiences that work across all devices. Combine web accessibility with native app functionality.",
    primaryCTA: {
      text: "Hire PWA Developers",
      href: "/contact-us",
      icon: Smartphone
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // PWA-specific metrics
  metrics: [
    {
      value: "80+",
      label: "PWAs Delivered",
      description: "Progressive web applications"
    },
    {
      value: "70%",
      label: "Development Cost Savings",
      description: "Compared to native apps"
    },
    {
      value: "15M+",
      label: "PWA Installations",
      description: "Across all platforms"
    },
    {
      value: "98%",
      label: "Cross-Platform Compatibility",
      description: "Works on all modern browsers"
    }
  ],

  // PWA development process
  process: {
    title: "Our PWA Development Process",
    subtitle: "Modern web apps with native capabilities",
    steps: [
      {
        number: "01",
        title: "PWA Strategy & Planning",
        description: "Define Progressive Web App features, offline capabilities, and cross-platform compatibility requirements.",
        icon: <Smartphone className="w-8 h-8" />,
        details: [
          "PWA capability assessment",
          "Offline-first strategy planning", 
          "Service worker architecture",
          "Progressive enhancement roadmap"
        ]
      },
      {
        number: "02", 
        title: "Responsive Design & UX",
        description: "Create responsive, app-like interfaces that work seamlessly across desktop, tablet, and mobile devices.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "Mobile-first responsive design",
          "App-like interface patterns",
          "Touch-friendly interactions",
          "Adaptive layout systems"
        ]
      },
      {
        number: "03",
        title: "PWA Development & Optimization",
        description: "Build Progressive Web Apps with modern web technologies, service workers, and performance optimization.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Service worker implementation",
          "Offline functionality",
          "Push notification support",
          "Performance optimization"
        ]
      },
      {
        number: "04",
        title: "Installation & Distribution",
        description: "Enable app-like installation experience and optimize for discoverability across platforms.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Web App Manifest configuration",
          "Install prompts optimization",
          "App store submission (if applicable)", 
          "SEO and discovery optimization"
        ]
      }
    ]
  },

  // PWA-focused FAQs
  faqs: [
    {
      question: "What technologies do your PWA developers use?",
      answer: "Our PWA developers are experts in modern web technologies including React, Vue.js, Angular, TypeScript, Service Workers, Web App Manifest, IndexedDB, and progressive enhancement techniques to create app-like web experiences."
    },
    {
      question: "How do PWAs compare to native mobile apps?",
      answer: "PWAs offer 70-80% of native app functionality with significant advantages: no app store approval needed, automatic updates, smaller size, better SEO, and cross-platform compatibility. They're ideal for content-driven apps and e-commerce."
    },
    {
      question: "Can PWAs work offline and send push notifications?",
      answer: "Yes, PWAs can work offline through Service Workers for caching strategies, background sync for data updates, and support push notifications across platforms. They provide native-like features without requiring app store installation."
    },
    {
      question: "How do you optimize PWA performance and loading speed?",
      answer: "We implement performance best practices including lazy loading, code splitting, efficient caching strategies, image optimization, critical CSS inlining, and progressive loading to ensure fast, smooth user experiences."
    },
    {
      question: "Can PWAs be submitted to app stores?",
      answer: "Yes, PWAs can be submitted to Google Play Store directly, and to Apple App Store and Microsoft Store with some additional packaging. This provides the best of both worlds - web accessibility and app store presence."
    },
    {
      question: "How do you handle PWA installation and user engagement?",
      answer: "We implement smart install prompts, create engaging onboarding experiences, use web push notifications strategically, and optimize the add-to-home-screen experience to maximize user adoption and retention."
    }
  ]
};

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

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

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

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

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

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

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

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