import { motion } from "framer-motion";
import {
  AlertTriangle,
  ArrowRight,
  BarChart3,
  Building,
  Building2,
  Calendar,
  CheckCircle,
  Code,
  Cog,
  DollarSign,
  Gauge,
  Globe,
  Handshake,
  Headphones,
  Lightbulb,
  MessageSquare,
  PersonStanding,
  Rocket,
  Search,
  Settings,
  Shield,
  Target,
  TrendingUp,
  UserPlus,
  Users,
  Users2,
  Wand2,
  X,
} from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "../components/ui/accordion";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";

// Dedicated Offshore Development Centers Hero Section
const DedicatedOffshoreODCHero = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
              {/* Page Title and Meta Description */}
              <title>Offshore Development Centers (ODC) Services | WDI</title>
              <meta
                name="description"
                content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
              />
      
              {/* Canonical Link */}
              <link rel="canonical" href="https://www.wdipl.com/solutions/dedicated-offshore-odc" />
      
              {/* Open Graph Tags (for Facebook, LinkedIn) */}
              <meta property="og:title" content="Offshore Development Centers (ODC) Services | WDI" />
              <meta
                property="og:description"
                content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
              />
              <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="Offshore Development Centers (ODC) Services | WDI" />
              <meta
                name="twitter:description"
                content="Set up cost-effective Dedicated Offshore Development Centers (ODC) with WDI. Get expert teams, faster delivery, and full control over your project."
              />
              <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">
        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className="space-y-8"
          >
            {/* Solutions Label */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <span className="text-white/70 text-sm font-medium">
                Solutions
              </span>
            </motion.div>

            {/* Main Heading */}
            <div className="space-y-6">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                Dedicated Offshore Development Centers (ODC)
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Scale your development capabilities rapidly and cost-effectively
                with your own dedicated team of expert offshore developers.
              </p>
            </div>

            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <ShimmerButton
                className="text-lg px-8 py-4"
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <MessageSquare className="w-5 h-5 flex-shrink-0" />
                  <span>Get a Free Consultation</span>
                </div>
              </ShimmerButton>
              <Button
                variant="outline"
                size="lg"
                className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
              >
                <div className="inline-flex items-center gap-2">
                  <Lightbulb className="w-5 h-5 flex-shrink-0" />
                  <span>Learn About Our ODC Model</span>
                </div>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with Global Team Collaboration Visualization */}
          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative flex flex-col items-center"
          >
            {/* Global Team Collaboration Scene */}
            <div className="relative w-full max-w-2xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="relative"
              >
                {/* Main ODC Global Dashboard */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 0.6 }}
                  className="relative bg-gray-900 rounded-2xl p-8 mx-auto max-w-lg shadow-2xl border border-gray-700"
                >
                  {/* Global Team Network */}
                  <div className="relative mb-8">
                    {/* Network Header */}
                    <motion.div
                      initial={{ opacity: 0, y: 20 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ duration: 0.8, delay: 1.0 }}
                      className="text-center mb-6"
                    >
                      <h3 className="text-xl font-semibold text-white mb-2">
                        Global ODC Network
                      </h3>
                      <div className="flex items-center justify-center gap-4">
                        <Badge
                          variant="secondary"
                          className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
                        >
                          <Globe className="w-3 h-3 mr-1" />
                          24/7 Coverage
                        </Badge>
                        <Badge
                          variant="secondary"
                          className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                        >
                          <Users className="w-3 h-3 mr-1" />
                          Dedicated Teams
                        </Badge>
                      </div>
                    </motion.div>

                    {/* Global Network Visualization */}
                    <motion.div
                      initial={{ opacity: 0, scale: 0.8 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.8, delay: 1.2 }}
                      className="relative"
                    >
                      {/* Central Hub */}
                      <div className="flex justify-center mb-6">
                        <motion.div
                          initial={{ opacity: 0, scale: 0 }}
                          animate={{ opacity: 1, scale: 1 }}
                          transition={{ duration: 0.6, delay: 1.4 }}
                          className="relative"
                        >
                          <div className="w-16 h-16 bg-accent/20 rounded-full flex items-center justify-center border-2 border-accent/30">
                            <Building2 className="w-8 h-8 text-accent" />
                          </div>
                          <div className="absolute -bottom-6 left-1/2 transform -translate-x-1/2 text-center">
                            <span className="text-white text-xs font-medium">
                              Your ODC
                            </span>
                          </div>
                        </motion.div>
                      </div>

                      {/* Global Connections */}
                      <div className="grid grid-cols-3 gap-4 mb-4">
                        {[
                          {
                            location: "US",
                            role: "PM",
                            active: true,
                            delay: 1.6,
                          },
                          {
                            location: "UK",
                            role: "Design",
                            active: true,
                            delay: 1.8,
                          },
                          {
                            location: "AU",
                            role: "QA",
                            active: false,
                            delay: 2.0,
                          },
                          {
                            location: "IN",
                            role: "Dev",
                            active: true,
                            delay: 2.2,
                          },
                          {
                            location: "PH",
                            role: "Dev",
                            active: true,
                            delay: 2.4,
                          },
                          {
                            location: "UA",
                            role: "Dev",
                            active: false,
                            delay: 2.6,
                          },
                        ].map((team, i) => (
                          <motion.div
                            key={i}
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.5, delay: team.delay }}
                            className="text-center"
                          >
                            <div
                              className={`w-10 h-10 rounded-full flex items-center justify-center border mb-2 mx-auto relative ${
                                team.active
                                  ? "bg-green-500/20 border-green-500/30"
                                  : "bg-gray-500/20 border-gray-500/30"
                              }`}
                            >
                              <PersonStanding
                                className={`w-5 h-5 ${
                                  team.active
                                    ? "text-green-400"
                                    : "text-gray-400"
                                }`}
                              />
                              {team.active && (
                                <motion.div
                                  animate={{
                                    scale: [1, 1.2, 1],
                                    opacity: [0.5, 1, 0.5],
                                  }}
                                  transition={{ duration: 2, repeat: Infinity }}
                                  className="absolute -inset-1 bg-green-400/20 rounded-full"
                                ></motion.div>
                              )}
                            </div>
                            <div className="text-xs">
                              <div
                                className={`font-medium ${
                                  team.active ? "text-white" : "text-gray-400"
                                }`}
                              >
                                {team.location}
                              </div>
                              <div
                                className={`text-xs ${
                                  team.active
                                    ? "text-green-300"
                                    : "text-gray-500"
                                }`}
                              >
                                {team.role}
                              </div>
                            </div>
                          </motion.div>
                        ))}
                      </div>
                    </motion.div>
                  </div>

                  {/* ODC Performance Metrics */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 2.8 }}
                    className="bg-black/50 rounded-lg p-4 border border-gray-700 mb-6"
                  >
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center gap-2">
                        <BarChart3 className="w-4 h-4 text-blue-400" />
                        <span className="text-blue-400 text-xs font-mono">
                          Team Performance
                        </span>
                      </div>
                      <Badge
                        variant="secondary"
                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                      >
                        Optimal
                      </Badge>
                    </div>

                    {/* Performance Metrics */}
                    <div className="space-y-2">
                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "95%" }}
                        transition={{ duration: 1, delay: 3.0 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                          <span className="text-green-300 text-xs">
                            Productivity
                          </span>
                        </div>
                        <span className="text-green-300 text-xs font-mono">
                          95%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "88%" }}
                        transition={{ duration: 1, delay: 3.2 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-blue-400 rounded-full"></div>
                          <span className="text-blue-300 text-xs">
                            Code Quality
                          </span>
                        </div>
                        <span className="text-blue-300 text-xs font-mono">
                          88%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "92%" }}
                        transition={{ duration: 1, delay: 3.4 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-purple-400 rounded-full"></div>
                          <span className="text-purple-300 text-xs">
                            Team Retention
                          </span>
                        </div>
                        <span className="text-purple-300 text-xs font-mono">
                          92%
                        </span>
                      </motion.div>
                    </div>
                  </motion.div>

                  {/* Cost & Scale Benefits */}
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 3.6 }}
                    className="grid grid-cols-2 gap-3"
                  >
                    <div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
                      <div className="text-green-400 text-lg font-bold">
                        60%
                      </div>
                      <div className="text-white text-xs">Cost Savings</div>
                    </div>
                    <div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
                      <div className="text-blue-400 text-lg font-bold">
                        200%
                      </div>
                      <div className="text-white text-xs">Faster Scale</div>
                    </div>
                  </motion.div>
                </motion.div>

                {/* Floating ODC Elements */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 3.8 }}
                  className="absolute -bottom-6 -left-6 transform -rotate-12"
                >
                  <div className="w-14 h-14 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full flex items-center justify-center border border-purple-500/30">
                    <Users2 className="w-6 h-6 text-purple-400" />
                  </div>
                </motion.div>

                {/* Global Coverage Indicator */}
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.8, delay: 4.0 }}
                  className="absolute -top-8 -right-8 space-y-2"
                >
                  <div className="flex items-center gap-2 text-blue-400 text-sm">
                    <Globe className="w-4 h-4" />
                    <span>Global</span>
                  </div>
                  <div className="flex gap-1">
                    <motion.div
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 2, repeat: Infinity }}
                      className="w-2 h-2 bg-blue-400 rounded-full"
                    ></motion.div>
                    <motion.div
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
                      className="w-2 h-2 bg-green-400 rounded-full"
                    ></motion.div>
                    <motion.div
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 2, repeat: Infinity, delay: 1 }}
                      className="w-2 h-2 bg-purple-400 rounded-full"
                    ></motion.div>
                  </div>
                </motion.div>

                {/* ODC Status Badge */}
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 4.2 }}
                  className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
                >
                  <div className="w-16 h-16 bg-accent/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
                    <div className="text-center">
                      <div className="text-accent text-sm font-bold">ODC</div>
                      <div className="text-white text-xs">Ready</div>
                    </div>
                  </div>
                </motion.div>
              </motion.div>

              {/* ODC Features */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 4.4 }}
                className="flex justify-center gap-4 flex-wrap mt-8"
              >
                <Badge
                  variant="secondary"
                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
                >
                  <Building2 className="w-3 h-3 mr-1" />
                  Dedicated Center
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <DollarSign className="w-3 h-3 mr-1" />
                  Cost Effective
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <TrendingUp className="w-3 h-3 mr-1" />
                  Rapid Scale
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// The Challenge We Solve
const DedicatedOffshoreODCChallenge = () => {
  return (
    <section className="py-32">
      <div className="container mx-auto px-6 lg:px-8">
        <div className="max-w-6xl mx-auto">
          <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-4xl lg:text-5xl font-semibold text-foreground mb-8">
              Scaling Your Team: The Talent & Cost Challenge
            </h2>
          </motion.div>

          <div className="grid md:grid-cols-2 gap-12 items-center">
            {/* Problem */}
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              viewport={{ once: true }}
            >
              <Card className="bg-red-500/5 border-red-500/20 p-8 rounded-2xl">
                <CardContent className="p-0">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
                      <AlertTriangle className="w-6 h-6 text-red-400" />
                    </div>
                    <h3 className="text-2xl font-semibold text-foreground">
                      The Problem
                    </h3>
                  </div>
                  <div className="space-y-4 text-muted-foreground">
                    <p>
                      Businesses often struggle to quickly scale their
                      development teams with high-quality talent, facing
                      challenges like talent shortages, high recruitment costs,
                      and managing international teams.
                    </p>
                    <ul className="space-y-2">
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>Local talent scarcity and high costs</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>
                          Long recruitment cycles and onboarding delays
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>Complex international team management</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>Difficulty scaling teams up or down quickly</span>
                      </li>
                    </ul>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            {/* Solution */}
            <motion.div
              initial={{ opacity: 0, x: 30 }}
              whileInView={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
            >
              <Card className="bg-green-500/5 border-green-500/20 p-8 rounded-2xl">
                <CardContent className="p-0">
                  <div className="flex items-center gap-4 mb-6">
                    <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
                      <CheckCircle className="w-6 h-6 text-green-400" />
                    </div>
                    <h3 className="text-2xl font-semibold text-foreground">
                      Our Solution
                    </h3>
                  </div>
                  <div className="space-y-4 text-muted-foreground">
                    <p>
                      WDI provides a seamless solution for establishing your
                      Dedicated Offshore Development Center (ODC). We help you
                      build and manage a skilled, stable, and cost-efficient
                      team that integrates fully with your in-house operations.
                    </p>
                    <ul className="space-y-2">
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Access to global talent pool with proven expertise
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>Rapid team setup and seamless integration</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>End-to-end management and support</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Flexible scaling with significant cost savings
                        </span>
                      </li>
                    </ul>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

// What's Included in This Solution
const DedicatedOffshoreODCIncludes = () => {
  const includes = [
    {
      icon: UserPlus,
      title: "Talent Acquisition & Vetting",
      description:
        "Sourcing and recruiting top-tier developers, QA, and project managers tailored to your needs.",
    },
    {
      icon: Building,
      title: "Infrastructure & Facilities",
      description:
        "Providing modern office space, IT infrastructure, and secure environments.",
    },
    {
      icon: Users,
      title: "HR & Administration",
      description:
        "Handling payroll, benefits, compliance, and all HR functions.",
    },
    {
      icon: Handshake,
      title: "Team Integration & Onboarding",
      description:
        "Facilitating smooth integration with your existing workflows and culture.",
    },
    {
      icon: Headphones,
      title: "Ongoing Management & Support",
      description:
        "Dedicated account management, performance monitoring, and team retention strategies.",
    },
    {
      icon: Shield,
      title: "Security & IP Protection",
      description:
        "Implementing robust security measures and strict intellectual property protocols.",
    },
  ];

  return (
    <section className="py-32 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-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
            Components of Your Dedicated ODC with WDI
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {includes.map((item, index) => {
            const IconComponent = item.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 }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-white mb-4">
                      {item.title}
                    </h3>
                    <p className="text-gray-300 leading-relaxed">
                      {item.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Key Benefits & Outcomes
const DedicatedOffshoreODCBenefits = () => {
  const benefits = [
    {
      icon: DollarSign,
      title: "Significant Cost Savings",
      description: "Reduce operational overheads compared to in-house teams.",
    },
    {
      icon: Globe,
      title: "Access to Global Talent",
      description:
        "Tap into a vast pool of highly skilled and specialized developers.",
    },
    {
      icon: TrendingUp,
      title: "Rapid Scalability",
      description:
        "Quickly expand or contract your team based on project demands.",
    },
    {
      icon: Target,
      title: "Enhanced Focus",
      description:
        "Free up your internal resources to focus on core business activities.",
    },
    {
      icon: Gauge,
      title: "Increased Efficiency",
      description:
        "Dedicated teams mean consistent output and deep project knowledge.",
    },
  ];

  return (
    <section className="py-32">
      <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-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            The Strategic Advantages of a WDI ODC
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {benefits.slice(0, 3).map((benefit, index) => {
            const IconComponent = benefit.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 }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Second row with remaining benefits */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
        >
          {benefits.slice(3).map((benefit, index) => {
            const IconComponent = benefit.icon;
            return (
              <motion.div
                key={index + 3}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Our Process for Establishing Your ODC
const DedicatedOffshoreODCProcess = () => {
  const steps = [
    {
      title: "Requirements Analysis",
      description:
        "Define your project needs, required skill sets, and team size.",
      icon: Search,
    },
    {
      title: "Talent Sourcing & Selection",
      description:
        "Identify, vet, and interview top candidates matched to your criteria.",
      icon: UserPlus,
    },
    {
      title: "Setup & Onboarding",
      description:
        "Establish infrastructure, integrate tools, and onboard your dedicated team.",
      icon: Settings,
    },
    {
      title: "Operational Management",
      description:
        "Continuous HR, IT, and administrative support for your ODC.",
      icon: Cog,
    },
    {
      title: "Performance Monitoring",
      description:
        "Regular reviews and optimization to ensure team productivity and alignment.",
      icon: BarChart3,
    },
    {
      title: "Continuous Improvement",
      description:
        "Proactive measures for team growth, training, and retention.",
      icon: TrendingUp,
    },
  ];

  return (
    <section className="py-32 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-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
            Building Your Seamless Offshore Team
          </h2>
        </motion.div>

        <div className="relative">
          {/* Timeline line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>

          <div className="space-y-16">
            {steps.map((step, index) => {
              const IconComponent = step.icon;
              const isEven = index % 2 === 0;

              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: isEven ? -50 : 50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.8, delay: index * 0.2 }}
                  viewport={{ once: true }}
                  className={`flex items-center ${
                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                  } flex-col lg:gap-16 gap-8`}
                >
                  <div
                    className={`flex-1 ${
                      isEven ? "lg:text-right" : "lg:text-left"
                    } text-center lg:text-left`}
                  >
                    <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                      <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                        <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                        <div className="text-2xl font-bold text-accent">
                          0{index + 1}
                        </div>
                      </div>
                      <h3 className="text-2xl font-semibold text-white mb-4">
                        {step.title}
                      </h3>
                      <p className="text-gray-300 leading-relaxed">
                        {step.description}
                      </p>
                    </div>
                  </div>

                  {/* Timeline dot */}
                  <div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>

                  <div className="flex-1 hidden lg:block"></div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

// Who Benefits from This Solution
const DedicatedOffshoreODCAudience = () => {
  const audiences = [
    {
      icon: Code,
      title: "Software Companies",
      description: "Needing to quickly scale development capacity.",
    },
    {
      icon: Rocket,
      title: "Startups",
      description: "Seeking cost-effective access to skilled technical talent.",
    },
    {
      icon: Building,
      title: "Enterprises",
      description:
        "Looking to optimize their IT spending without compromising quality.",
    },
    {
      icon: Target,
      title: "Specialized Expertise Seekers",
      description:
        "Requiring specialized expertise that is hard to find locally.",
    },
    {
      icon: Users,
      title: "Project Managers",
      description:
        "Aiming for a stable, long-term outsourced development partnership.",
    },
  ];

  return (
    <section className="py-32">
      <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-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
            Ideal For...
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {audiences.slice(0, 3).map((audience, index) => {
            const IconComponent = audience.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 }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {audience.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {audience.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Second row with remaining audiences */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
        >
          {audiences.slice(3).map((audience, index) => {
            const IconComponent = audience.icon;
            return (
              <motion.div
                key={index + 3}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {audience.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {audience.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Case Studies
const DedicatedOffshoreODCCaseStudies = () => {
  const caseStudies = [
    {
      title: "Scaling a SaaS Product Team",
      client: "Software Company",
      description:
        "Built a dedicated ODC that increased development capacity by 200% within 6 months, enabling faster feature delivery and improved product quality while maintaining seamless collaboration across time zones.",
      image:
        "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=400&h=300&fit=crop&auto=format",
      results: "200% increased capacity in 6 months",
      engagement: "SaaS scaling success",
      gradient: "from-blue-500/20 to-cyan-500/20",
    },
    {
      title: "Cost Reduction for E-commerce Giant",
      client: "E-commerce Platform",
      description:
        "Established an ODC that reduced annual development costs by 35% while maintaining quality standards, allowing the client to invest savings into product innovation and market expansion initiatives.",
      image:
        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
      results: "35% cost reduction annually",
      engagement: "E-commerce optimization",
      gradient: "from-green-500/20 to-emerald-500/20",
    },
    {
      title: "FinTech Platform Acceleration",
      client: "Financial Technology Startup",
      description:
        "Deployed a specialized ODC with fintech expertise, accelerating time-to-market by 40% and ensuring regulatory compliance while building a scalable, secure platform for financial services.",
      image:
        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
      results: "40% faster time-to-market",
      engagement: "FinTech development acceleration",
      gradient: "from-purple-500/20 to-pink-500/20",
    },
  ];

  return (
    <section className="py-32 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-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
            Client Success Through Dedicated Offshore Teams
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 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.01 }}
              viewport={{ once: true }}
              whileHover={{ y: -8, scale: 1.02 }}
              className="group cursor-pointer"
            >
              <Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
                <CardContent className="p-0 flex flex-col h-full">
                  <div className="p-8 pb-6">
                    <div className="flex items-start gap-4 mb-6">
                      <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                        <Building2 className="w-6 h-6 text-accent" />
                      </div>
                      <div className="flex-1">
                        <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                          {study.client}
                        </div>
                        <Badge
                          variant="secondary"
                          className="text-xs bg-accent/20 text-accent border-accent/30"
                        >
                          {study.results}
                        </Badge>
                      </div>
                    </div>

                    <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
                      {study.title}
                    </h3>
                  </div>

                  <div className="px-8 pb-6 flex-1">
                    <div
                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
                    >
                      <ImageWithFallback
                        src={study.image}
                        alt={study.title}
                        className="w-full h-48 object-cover rounded-lg shadow-lg"
                      />
                    </div>
                  </div>

                  <div className="px-8 pb-6">
                    <p className="text-gray-300 text-sm leading-relaxed mb-4">
                      {study.description}
                    </p>
                    <div className="flex gap-4 text-xs text-gray-400">
                      <div className="flex items-center gap-1">
                        <CheckCircle className="w-3 h-3" />
                        {study.engagement}
                      </div>
                    </div>
                  </div>

                  <div className="p-8 pt-0 mt-auto">
                    <Button
                      variant="ghost"
                      size="sm"
                      className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
                    >
                      <span className="text-sm font-medium">
                        VIEW FULL CASE STUDY
                      </span>
                      <ArrowRight className="w-4 h-4" />
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

// Mid-Page Lead Capture CTA
const DedicatedOffshoreODCInlineCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20">
      <div className="container mx-auto px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
              <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                <Building2 className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  ODC Solutions
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
              Ready to Scale Your Development Team{" "}
              <span className="text-accent">Effortlessly?</span>
            </h2>

            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Build a high-performing, cost-effective team tailored to your
              needs.
            </p>

            <ShimmerButton
              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
              onClick={() => navigate("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Wand2 className="w-6 h-6 flex-shrink-0" />
                <span>Design Your Custom ODC</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// FAQs
const DedicatedOffshoreODCFAQs = () => {
  const faqs = [
    {
      question: "How does an ODC differ from traditional outsourcing?",
      answer:
        "An ODC (Offshore Development Center) is fundamentally different from traditional outsourcing: ODCs provide dedicated teams that work exclusively for your company, operate as an extension of your internal team, follow your processes and culture, and offer long-term partnership focused on your business goals. Traditional outsourcing typically involves project-based engagements, shared resources across multiple clients, limited control over team composition, and short-term transactional relationships. With an ODC, you get the benefits of an in-house team - dedicated focus, deep product knowledge, cultural alignment - combined with the cost advantages and scalability of offshore development.",
    },
    {
      question: "How do you ensure data security and IP protection?",
      answer:
        "We implement comprehensive security measures: Multi-layered physical security at our facilities with biometric access controls, secure IT infrastructure with encrypted data transmission and storage, strict confidentiality agreements and IP protection protocols for all team members, regular security audits and compliance assessments, and segregated work environments ensuring your data remains isolated. We maintain certifications like ISO 27001 and follow industry best practices for data protection. Additionally, we provide detailed security reports, conduct background checks on all personnel, and can accommodate specific security requirements or compliance standards your organization requires.",
    },
    {
      question: "What level of control do we have over the ODC team?",
      answer:
        "You maintain full operational control over your ODC team: Direct management of daily tasks, priorities, and deliverables, participation in hiring decisions and team composition, implementation of your development processes, tools, and methodologies, access to real-time performance metrics and project tracking, and direct communication channels with team members. While we handle administrative functions like payroll, benefits, and HR compliance, you retain complete control over the technical direction, project management, and day-to-day operations. The team reports directly to you and operates as a seamless extension of your internal development organization.",
    },
    {
      question: "How long does it take to set up an ODC?",
      answer:
        "The ODC setup timeline typically ranges from 4-8 weeks depending on your requirements: Week 1-2: Requirements gathering, team planning, and candidate sourcing, Week 2-4: Candidate interviews, selection, and offer processes, Week 3-5: Infrastructure setup, security clearances, and legal documentation, Week 4-6: Team onboarding, tool integration, and process alignment, Week 5-8: Full operational readiness and project kickoff. For specialized skills or larger teams, the timeline may extend to 10-12 weeks. We can expedite the process with our pre-vetted talent pool for standard technology stacks. Throughout the setup, we provide regular updates and ensure smooth coordination between your team and the new ODC members.",
    },
    {
      question: "What are the typical cost savings compared to in-house teams?",
      answer:
        "ODC cost savings typically range from 40-70% compared to equivalent in-house teams: Direct salary savings of 50-60% for similar skill levels, elimination of recruitment costs, training expenses, and employee benefits overhead, reduced infrastructure and facilities costs, and no long-term employment commitments or severance obligations. Additional indirect savings include faster scaling capabilities, reduced management overhead, and access to specialized skills without premium local market rates. For example, a senior developer costing $120,000 annually in the US might cost $40,000-50,000 through an ODC, while maintaining equivalent quality and productivity. The exact savings depend on your location, required skill sets, team size, and engagement model.",
    },
  ];

  return (
    <section className="py-32 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-20"
        >
          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
            Frequently Asked Questions
          </h2>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto"
        >
          <Accordion type="single" collapsible className="space-y-8">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
              >
                <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
                  <span className="font-semibold text-white">
                    {faq.question}
                  </span>
                </AccordionTrigger>
                <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </motion.div>
      </div>
    </section>
  );
};

// Final CTA Section
const DedicatedOffshoreODCFinalCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20 relative overflow-hidden">
      <div className="container mx-auto px-6 lg:px-8 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="text-center max-w-4xl mx-auto"
        >
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="mb-8"
          >
            <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
              <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                <Building2 className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Global Tech Powerhouse
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Build Your Global Tech Powerhouse{" "}
            <span className="text-accent">with WDI</span>
          </h2>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            Leverage WDI's expertise to establish and manage your dedicated
            offshore development center, ensuring seamless integration and
            superior results.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 40 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            viewport={{ once: true }}
            className="space-y-8"
          >
            <ShimmerButton
              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
              onClick={() => navigate("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Calendar className="w-6 h-6 flex-shrink-0" />
                <span>Schedule a Consultation</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Talent Acquisition • Infrastructure • Management • Security •
              Support • Scale
            </p>
          </motion.div>
        </motion.div>
      </div>

      {/* Background Decorative Elements */}
      <div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
        <div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-green-500/3 rounded-full blur-3xl"></div>
      </div>
    </section>
  );
};

// Main Dedicated Offshore Development Centers Page
export const DedicatedOffshoreODC = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

      {/* Hero Section */}
      <section className="bg-black">
        <DedicatedOffshoreODCHero />
      </section>

      {/* Challenge */}
      <section className="bg-background">
        <DedicatedOffshoreODCChallenge />
      </section>

      {/* What's Included */}
      <section className="bg-card">
        <DedicatedOffshoreODCIncludes />
      </section>

      {/* Benefits */}
      <section className="bg-background">
        <DedicatedOffshoreODCBenefits />
      </section>

      {/* Process */}
      <section className="bg-card">
        <DedicatedOffshoreODCProcess />
      </section>

      {/* Target Audience */}
      <section className="bg-background">
        <DedicatedOffshoreODCAudience />
      </section>

      {/* Case Studies */}
      <section className="bg-card">
        <DedicatedOffshoreODCCaseStudies />
      </section>

      {/* Mid-Page CTA */}
      <section className="bg-background">
        <DedicatedOffshoreODCInlineCTA />
      </section>

      {/* FAQs */}
      <section className="bg-card">
        <DedicatedOffshoreODCFAQs />
      </section>

      {/* Final CTA */}
      <section className="bg-background">
        <DedicatedOffshoreODCFinalCTA />
      </section>

      {/* Footer */}
      <section className="bg-card">
        {/* <Footer /> */}
      </section>
    </div>
  );
};