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

const hireEcommercePlatformDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire eCommerce Platform Developers",
    description: "Build powerful, scalable eCommerce platforms that drive sales and enhance customer experience. Our developers specialize in custom online stores, marketplaces, and B2B commerce solutions.",
    primaryCTA: {
      text: "Hire eCommerce Developers",
      href: "/contact-us",
      icon: ShoppingCart
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // eCommerce Platform specific metrics
  metrics: [
    {
      value: "180+",
      label: "eCommerce Stores Built",
      description: "Successfully launched platforms"
    },
    {
      value: "$50M+",
      label: "Revenue Generated",
      description: "Across all eCommerce platforms"
    },
    {
      value: "99.8%",
      label: "Payment Success Rate",
      description: "Secure transaction processing"
    },
    {
      value: "3.2s",
      label: "Average Load Time",
      description: "Optimized for conversions"
    }
  ],

  // eCommerce Platform development process
  process: {
    title: "Our eCommerce Development Process",
    subtitle: "From concept to profitable online store",
    steps: [
      {
        number: "01",
        title: "eCommerce Strategy & Planning",
        description: "Define your eCommerce goals, target audience, and platform requirements for optimal conversion.",
        icon: <ShoppingCart className="w-8 h-8" />,
        details: [
          "Business model and target market analysis",
          "Platform architecture and technology selection",
          "Payment gateway and shipping integration planning",
          "SEO and marketing strategy development"
        ]
      },
      {
        number: "02", 
        title: "Design & User Experience",
        description: "Create conversion-optimized designs with intuitive shopping experiences and mobile-first approach.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "Conversion-focused UI/UX design",
          "Mobile-responsive design system",
          "Product catalog and checkout optimization",
          "Brand integration and visual identity"
        ]
      },
      {
        number: "03",
        title: "Development & Integration",
        description: "Build secure, scalable eCommerce platform with payment processing and inventory management.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Custom eCommerce development",
          "Payment gateway integration",
          "Inventory and order management",
          "Third-party service integrations"
        ]
      },
      {
        number: "04",
        title: "Launch & Optimization",
        description: "Deploy your eCommerce platform with analytics, SEO optimization, and continuous performance monitoring.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Performance optimization and testing",
          "SEO and conversion rate optimization",
          "Analytics and reporting setup",
          "Ongoing maintenance and updates"
        ]
      }
    ]
  },

  // eCommerce Platform focused FAQs
  faqs: [
    {
      question: "What eCommerce platforms and technologies do you work with?",
      answer: "We develop custom eCommerce solutions using modern frameworks like React, Vue.js, and Next.js, as well as platforms like Shopify Plus, WooCommerce, Magento, and headless commerce solutions. We choose the best technology based on your specific requirements."
    },
    {
      question: "How do you ensure secure payment processing and PCI compliance?",
      answer: "We integrate with trusted payment gateways like Stripe, PayPal, and others that handle PCI compliance. We implement secure payment flows, SSL encryption, fraud detection, and follow industry best practices for handling sensitive customer data."
    },
    {
      question: "Can you integrate with existing inventory and ERP systems?",
      answer: "Yes, we specialize in system integration and can connect your eCommerce platform with existing inventory management, ERP, CRM, and accounting systems through APIs and custom integration solutions to streamline your operations."
    },
    {
      question: "How do you optimize eCommerce sites for mobile and conversions?",
      answer: "We implement mobile-first responsive design, optimize page loading speeds, streamline checkout processes, implement progressive web app features, and use A/B testing to continuously improve conversion rates and user experience."
    },
    {
      question: "What ongoing support do you provide for eCommerce platforms?",
      answer: "We provide comprehensive ongoing support including security updates, performance monitoring, inventory management, payment processing support, feature enhancements, and 24/7 technical support to ensure your store runs smoothly."
    },
    {
      question: "How do you handle scalability for growing eCommerce businesses?",
      answer: "We build eCommerce platforms with scalable architecture using cloud infrastructure, CDNs, caching strategies, and microservices that can handle traffic spikes, growing product catalogs, and increasing transaction volumes as your business grows."
    }
  ]
};

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

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

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

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

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

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

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

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