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 AI mobile and web 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>
            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
              Access AI mobile application developers and AI‑driven app
              development services without bloating your budget or compromising
              speed.
            </p>
          </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>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            AI mobile and web development solutions, expert AI mobile
            application developers, and AI‑driven app development services under
            one dedicated offshore team.
          </p>
        </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>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Access AI‑driven app development services, AI mobile and web
            development solutions, and dedicated AI mobile application
            developers with faster scaling, lower cost, and higher delivery
            velocity.
          </p>
        </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>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Integrate AI mobile application developers and AI‑driven app
            development services into a dedicated offshore team that works as an
            extension of your product vision.
          </p>
        </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>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Drive growth with AI mobile and web development solutions, AI mobile
            application developers, and AI‑driven app development services
            working as your dedicated offshore delivery engine.
          </p>
        </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 of AI mobile
              application developers and AI‑driven app development services
              tailored to your product 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) differs from traditional outsourcing in that it provides dedicated teams working exclusively for your company, operating as an extension of your internal team, following your processes and culture, and focused on long-term partnership aligned to your business goals.\n\nTraditional 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 gain the benefits of an in-house team—dedicated focus, deep product knowledge, cultural alignment—combined with cost advantages and scalability.",
    },
    {
      question: "How do you ensure data security and IP protection?",
      answer:
        "We implement comprehensive security measures, including multi-layered physical security with biometric access controls, secure IT infrastructure with encrypted data transmission and storage, strict confidentiality agreements and IP protection protocols, regular security audits, and segregated work environments to ensure data isolation.\n\nWe maintain certifications like ISO 27001, follow industry-standard data protection practices, conduct background checks, provide detailed security reports, and can align with specific compliance requirements to protect your systems and data.",
    },
    {
      question: "What level of control do we have over the ODC team?",
      answer:
        "You retain full operational control over your ODC team, including direct management of daily tasks, priorities, and deliverables, participation in hiring decisions, implementation of your development processes and tools, access to real-time performance tracking, and direct communication with team members.\n\nWhile we handle administrative functions such as payroll and HR, you maintain complete control over technical direction and day-to-day operations. The team works as a seamless extension of your internal 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:\n\nWeeks 1–2: Requirements gathering, team planning, and sourcing\nWeeks 2–4: Candidate interviews and selection\nWeeks 3–5: Infrastructure setup and security/legal processes\nWeeks 4–6: Onboarding and tool/process alignment\nWeeks 5–8: Full operational readiness and project kickoff\n\nFor specialized roles or larger teams, the timeline may extend to 10–12 weeks. We can accelerate setup using pre-vetted talent pools for common tech stacks.",
    },
    {
      question: "What are the typical cost savings compared to in-house teams?",
      answer:
        "ODC cost savings typically range from 40–70% compared to in-house teams. This includes salary savings of 50–60%, elimination of recruitment and training costs, reduced infrastructure expenses, and no long-term employment liabilities.\n\nAdditional benefits include faster scaling, lower management overhead, and access to specialized talent at competitive rates. Actual savings depend on location, team size, skill requirements, 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 AI mobile and web development solutions and AI‑driven
            app development services 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>
  );
};