import React from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { HeroBanner } from "../components/HeroBanner";
import { ProcessSection } from "../components/ProcessSection";
import { WhyChooseWDI } from "../components/WhyChooseWDI";
import { FAQSection } from "../components/FAQSection";
import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
  ShoppingCart,
  CreditCard,
  Package,
  Search,
  Heart,
  Users,
  BarChart3,
  Target,
  CheckCircle,
  Star,
  Zap,
  Shield,
  Globe,
  Award,
  Clock,
} from "lucide-react";
import { Helmet } from "react-helmet-async";

// Problem Solution Block Component
const ProblemSolutionBlock = () => {
  return (
    <section className="py-20 bg-[#0E0E0E]">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>eCommerce & Marketplace Development Services | WDI</title>
        <meta
          name="description"
          content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
        />

        {/* Canonical Link */}
        <link rel="canonical" href="https://www.wdipl.com/industries/commerce/ecommerce-marketplaces" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="eCommerce & Marketplace Development Services | WDI" />
        <meta
          property="og:description"
          content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
        />
        <meta property="og:url" content="https://www.wdipl.com/services" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Twitter Card Tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="eCommerce & Marketplace Development Services | WDI" />
        <meta
          name="twitter:description"
          content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
        />
        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Social Profiles (using JSON-LD Schema) */}
        <script type="application/ld+json">
          {`
                              {
                                "@context": "https://schema.org",
                                "@type": "Organization",
                                "name": "WDI",
                                "url": "https://www.wdipl.com",
                                "sameAs": [
                                  "https://www.facebook.com/wdideas",
                                  "https://www.linkedin.com/in/website-developers-india/",
                                  "https://www.instagram.com/wdipl/"
                                ]
                              }
                            `}
        </script>
      </Helmet>
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="max-w-6xl mx-auto"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-center mb-16">
            <span className="text-white">
              Addressing the Core Challenges of{" "}
            </span>
            <span className="text-[#E5195E]">eCommerce & Marketplaces</span>
          </h2>

          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              viewport={{ once: true }}
              className="space-y-6"
            >
              <div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-8">
                <h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
                  <div className="w-8 h-8 bg-red-500/20 rounded-lg flex items-center justify-center">
                    <Target className="w-4 h-4 text-red-400" />
                  </div>
                  The Challenge
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  In a highly competitive digital retail landscape, businesses
                  need more than just an online store; they require platforms
                  that offer seamless user experiences, handle high traffic
                  volumes, integrate complex logistics, and provide robust
                  security for transactions (PCI DSS). Building and scaling
                  multi-vendor marketplaces adds further complexity in managing
                  diverse sellers and customer expectations.
                </p>
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
              className="space-y-6"
            >
              <div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-8">
                <h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-3">
                  <div className="w-8 h-8 bg-green-500/20 rounded-lg flex items-center justify-center">
                    <CheckCircle className="w-4 h-4 text-green-400" />
                  </div>
                  Our eCommerce & Marketplace Solution
                </h3>
                <p className="text-gray-300 leading-relaxed">
                  WDI specializes in developing custom eCommerce platforms and
                  dynamic online marketplaces. We create solutions that
                  prioritize user experience, robust backend operations, secure
                  payment processing, and scalable architecture, designed to
                  maximize sales, enhance customer loyalty, and efficiently
                  manage diverse product catalogs and vendors.
                </p>
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Features Grid Component
const IconWithDescriptionGrid = () => {
  const features = [
    {
      icon: ShoppingCart,
      title: "Custom Online Storefronts",
      description:
        "Tailored design and functionality for unique brand experiences, optimizing product discovery and conversion.",
    },
    {
      icon: Users,
      title: "Multi-Vendor Marketplace Functionality",
      description:
        "Comprehensive features for vendor onboarding, individual storefronts, commission management, and order splitting.",
    },
    {
      icon: CreditCard,
      title: "Secure Payment Gateways",
      description:
        "Integration with leading payment providers (e.g., Stripe, PayPal, Razorpay) ensuring PCI DSS compliance and diverse payment options.",
    },
    {
      icon: Package,
      title: "Inventory & Order Management",
      description:
        "Real-time stock tracking, automated order processing, fulfillment, and returns management.",
    },
    {
      icon: Heart,
      title: "Customer Personalization & Recommendations",
      description:
        "AI-driven product recommendations, personalized content, and dynamic pricing based on user behavior.",
    },
    {
      icon: Search,
      title: "Search & Filtering Capabilities",
      description:
        "Advanced search, faceted navigation, and intelligent filtering to help users find products quickly.",
    },
    {
      icon: BarChart3,
      title: "CRM & Loyalty Program Integration",
      description:
        "Seamless connectivity with customer relationship management systems and tools for loyalty programs to boost retention.",
    },
  ];

  return (
    <section className="py-20 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            Powerful Features for Your eCommerce & Marketplaces
          </h2>
          <p className="text-lg text-gray-400 max-w-3xl mx-auto">
            Comprehensive tools to create compelling online shopping experiences
            that drive sales and customer loyalty.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {features.map((feature, index) => {
            const IconComponent = feature.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                className="group"
              >
                <Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
                  <CardContent className="p-8">
                    <div className="w-12 h-12 bg-[#E5195E]/20 rounded-lg flex items-center justify-center mb-6">
                      <IconComponent className="w-6 h-6 text-[#E5195E]" />
                    </div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      {feature.title}
                    </h3>
                    <p className="text-gray-400 leading-relaxed">
                      {feature.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Three Column Feature Block Component
const ThreeColumnFeatureBlock = () => {
  const advantages = [
    {
      icon: Target,
      title: "Conversion-Driven Design",
      description:
        "Our focus is on optimizing user journeys to maximize sales and minimize abandoned carts.",
    },
    {
      icon: Zap,
      title: "Scalable Architecture",
      description:
        "Building platforms ready for massive traffic spikes (e.g., festive sales) and limitless product catalogs.",
    },
    {
      icon: Shield,
      title: "PCI DSS & Security Expertise",
      description:
        "Ensuring all payment processing and customer data handling adhere to the highest security standards.",
    },
    {
      icon: Globe,
      title: "Complex Integrations",
      description:
        "Seamlessly connecting with ERP, CRM, inventory, shipping, and marketing automation systems.",
    },
  ];

  return (
    <section className="py-20 bg-[#0E0E0E]">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            Why Partner with WDI for eCommerce & Marketplace Development?
          </h2>
          <p className="text-lg text-gray-400 max-w-3xl mx-auto">
            Leverage our expertise to create online commerce platforms that
            truly drive business success.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {advantages.map((advantage, index) => {
            const IconComponent = advantage.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                className="text-center"
              >
                <div className="w-16 h-16 bg-[#E5195E]/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                  <IconComponent className="w-8 h-8 text-[#E5195E]" />
                </div>
                <h3 className="text-xl font-semibold text-white mb-4">
                  {advantage.title}
                </h3>
                <p className="text-gray-400 leading-relaxed">
                  {advantage.description}
                </p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// Case Study Component
const CaseStudyHighlightGrid = () => {
  const caseStudies = [
    {
      title: "Custom Fashion eCommerce Platform with Virtual Try-On",
      problem:
        "A fashion brand needed a unique online store that offered advanced product visualization and personalization.",
      solution:
        "WDI built a bespoke eCommerce platform integrated with AR virtual try-on features and an AI-powered styling assistant.",
      results:
        "Increased online sales by 50% within six months and reduced product returns by 15%.",
      metrics: ["50% ↑ Sales", "15% ↓ Returns", "AR Integration"],
    },
    {
      title: "B2B Construction Materials Marketplace",
      problem:
        "A client sought to create a specialized online marketplace connecting construction material suppliers with contractors.",
      solution:
        "Developed a multi-vendor B2B marketplace with advanced search, bulk ordering, quoting features, and integrated logistics.",
      results:
        "Facilitated transactions totaling $5M+ in its first year, significantly streamlining procurement for contractors.",
      metrics: ["$5M+ Volume", "B2B Focused", "Multi-Vendor"],
    },
  ];

  return (
    <section className="py-20 bg-black">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            eCommerce & Marketplace Success Stories
          </h2>
          <p className="text-lg text-gray-400 max-w-3xl mx-auto">
            Real results from our eCommerce platform implementations that
            transformed businesses.
          </p>
        </motion.div>

        <div className="grid lg:grid-cols-2 gap-8">
          {caseStudies.map((study, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.2 }}
              viewport={{ once: true }}
            >
              <Card className="bg-gray-900/50 border-gray-800 hover:border-[#E5195E]/30 transition-all duration-300 h-full">
                <CardContent className="p-8">
                  <div className="flex gap-2 mb-4">
                    {study.metrics.map((metric, i) => (
                      <Badge
                        key={i}
                        variant="secondary"
                        className="bg-[#E5195E]/20 text-[#E5195E] border-[#E5195E]/30"
                      >
                        {metric}
                      </Badge>
                    ))}
                  </div>
                  <h3 className="text-xl font-semibold text-white mb-4">
                    {study.title}
                  </h3>
                  <div className="space-y-4">
                    <div>
                      <h4 className="font-medium text-gray-300 mb-2">
                        Problem:
                      </h4>
                      <p className="text-gray-400 text-sm">{study.problem}</p>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-300 mb-2">
                        Solution:
                      </h4>
                      <p className="text-gray-400 text-sm">{study.solution}</p>
                    </div>
                    <div>
                      <h4 className="font-medium text-gray-300 mb-2">
                        Results:
                      </h4>
                      <p className="text-gray-400 text-sm">{study.results}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

// FAQ Data
const ecommerceFAQs = [
  {
    question:
      "What eCommerce platforms (e.g., Shopify, Magento, custom builds) do you specialize in?",
    answer:
      "We work with all major platforms including Shopify, Magento, WooCommerce, and BigCommerce, but we specialize in custom-built solutions using modern technologies like React, Node.js, and cloud-native architectures for maximum flexibility and performance.",
  },
  {
    question:
      "How do you ensure scalability for high traffic volumes and large product catalogs?",
    answer:
      "We implement cloud-native architectures with auto-scaling, CDN integration, database optimization, caching strategies, and microservices architecture. Our platforms are designed to handle millions of products and thousands of concurrent users without performance degradation.",
  },
  {
    question:
      "What security measures do you implement for payment processing (PCI DSS) and customer data?",
    answer:
      "We ensure full PCI DSS compliance with tokenization, encryption at rest and in transit, secure payment gateway integrations, regular security audits, and implementation of security best practices throughout the development lifecycle.",
  },
  {
    question:
      "Can you integrate with third-party logistics (3PL) providers and ERP systems?",
    answer:
      "Yes, we have extensive experience integrating with major 3PL providers (FedEx, UPS, DHL), warehouse management systems, and ERP platforms (SAP, Oracle, NetSuite) to create seamless order fulfillment workflows.",
  },
  {
    question:
      "Do you offer solutions for customer personalization and loyalty programs?",
    answer:
      "Absolutely! We implement AI-driven recommendation engines, personalized shopping experiences, dynamic pricing, and comprehensive loyalty program features including points systems, tier-based rewards, and targeted promotions.",
  },
];

export const EcommerceMarketplaces = () => {
  return (
    <div className="min-h-screen bg-[#0E0E0E]">
      {/* <Navigation /> */}

      <HeroBanner
        category="Commerce & Consumer"
        title="eCommerce & Marketplaces"
        description="Build high-performing, scalable, and conversion-optimized eCommerce websites and multi-vendor marketplaces that drive sales and foster growth."
        primaryCTA={{
          text: "Get a Free Consultation",
          // href: "/contact/schedule-a-discovery-call"
          href: "/start-a-project",
        }}
        secondaryCTA={{
          text: "View eCommerce Case Studies",
          href: "/case-studies",
        }}
      />

      <ProblemSolutionBlock />

      <IconWithDescriptionGrid />

      <ThreeColumnFeatureBlock />

      <div className="bg-[#0E0E0E]">
        <ProcessSection />
      </div>

      <CaseStudyHighlightGrid />

      <div className="bg-[#0E0E0E]">
        <FAQSection
          title="eCommerce & Marketplace FAQs"
          subtitle="Get answers to common questions about our eCommerce and marketplace development services."
          faqs={ecommerceFAQs}
        />
      </div>

      <div className="bg-black">
        <SplitCallToAction />
      </div>

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