import { motion } from "framer-motion";
import {
  AlertTriangle,
  ArrowRight,
  Building,
  Calendar,
  CheckCircle,
  CloudCog,
  Code,
  Eye,
  Lightbulb,
  MessageSquare,
  Monitor,
  Palette,
  RefreshCw,
  Rocket,
  Search,
  Shield,
  Star,
  Target,
  Users,
  X,
  Zap,
} 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";

// Digital Product Development Hero Section
const DigitalProductDevelopmentHero = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>
          Digital Product Development Services | WDI – Innovate & Grow
        </title>
        <meta
          name="description"
          content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
        />

        {/* Canonical Link */}
        <link
          rel="canonical"
          href="https://www.wdipl.com/solutions/digital-product-development"
        />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Digital Product Development Services | WDI – Innovate & Grow"
        />
        <meta
          property="og:description"
          content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
        />
        <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="Digital Product Development Services | WDI – Innovate & Grow"
        />
        <meta
          name="twitter:description"
          content="WDI offers expert digital product development services to turn your ideas into powerful digital solutions. Build, scale, and innovate with WDI today."
        />
        <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">
                Digital Product Development
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Transform your vision into market‑ready digital products that
                captivate users and drive business growth with AI‑driven app
                development.
              </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">
                  <Eye className="w-5 h-5 flex-shrink-0" />
                  <span>View Our Product Portfolio</span>
                </div>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with Digital Product Development 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"
          >
            {/* Digital Product Blueprint 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 Product Development 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"
                >
                  {/* Digital Interface Preview */}
                  <div className="relative mb-8">
                    {/* App/Web Interface Mockup */}
                    <motion.div
                      initial={{ opacity: 0, scale: 0 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.8, delay: 1.0 }}
                      className="relative bg-black/50 rounded-lg p-4 border border-gray-600"
                    >
                      <div className="space-y-4">
                        {/* Header Bar */}
                        <div className="flex items-center justify-between">
                          <div className="flex gap-2">
                            <div className="w-3 h-3 bg-red-400 rounded-full"></div>
                            <div className="w-3 h-3 bg-yellow-400 rounded-full"></div>
                            <div className="w-3 h-3 bg-green-400 rounded-full"></div>
                          </div>
                          <div className="text-gray-400 text-xs">
                            Product Blueprint
                          </div>
                        </div>

                        {/* Interface Elements */}
                        <motion.div
                          initial={{ opacity: 0, y: 20 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ duration: 0.8, delay: 1.2 }}
                          className="space-y-3"
                        >
                          {/* Navigation */}
                          <div className="flex gap-2">
                            <div className="w-16 h-2 bg-blue-400/50 rounded"></div>
                            <div className="w-12 h-2 bg-purple-400/50 rounded"></div>
                            <div className="w-14 h-2 bg-green-400/50 rounded"></div>
                          </div>

                          {/* Hero Section */}
                          <div className="w-full h-8 bg-gradient-to-r from-blue-400/30 to-purple-400/30 rounded"></div>

                          {/* Content Cards */}
                          <div className="grid grid-cols-2 gap-2">
                            <div className="w-full h-6 bg-gray-600/50 rounded"></div>
                            <div className="w-full h-6 bg-gray-600/50 rounded"></div>
                          </div>

                          {/* Interactive Elements */}
                          <div className="flex justify-between items-center">
                            <div className="w-20 h-3 bg-accent/50 rounded"></div>
                            <div className="w-8 h-3 bg-green-400/50 rounded-full"></div>
                          </div>
                        </motion.div>
                      </div>
                    </motion.div>
                  </div>

                  {/* Development Team Collaboration */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 1.4 }}
                    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">
                        <Users className="w-4 h-4 text-blue-400" />
                        <span className="text-blue-400 text-xs font-mono">
                          Team Collaboration
                        </span>
                      </div>
                      <Badge
                        variant="secondary"
                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                      >
                        Active
                      </Badge>
                    </div>

                    {/* Team Members */}
                    <div className="flex items-center gap-2 mb-3">
                      {[
                        { role: "Designer", color: "bg-purple-400" },
                        { role: "Developer", color: "bg-blue-400" },
                        { role: "PM", color: "bg-green-400" },
                        { role: "QA", color: "bg-orange-400" },
                      ].map((member, index) => (
                        <motion.div
                          key={index}
                          initial={{ opacity: 0, scale: 0 }}
                          animate={{ opacity: 1, scale: 1 }}
                          transition={{
                            duration: 0.3,
                            delay: 1.6 + index * 0.1,
                          }}
                          className={`w-6 h-6 ${member.color} rounded-full flex items-center justify-center`}
                        >
                          <span className="text-white text-xs font-bold">
                            {member.role.charAt(0)}
                          </span>
                        </motion.div>
                      ))}
                    </div>

                    {/* Progress Indicators */}
                    <div className="space-y-2">
                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "85%" }}
                        transition={{ duration: 1, delay: 2.0 }}
                        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">
                            Design Phase
                          </span>
                        </div>
                        <span className="text-blue-300 text-xs font-mono">
                          85%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "60%" }}
                        transition={{ duration: 1, delay: 2.2 }}
                        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">
                            Development
                          </span>
                        </div>
                        <span className="text-green-300 text-xs font-mono">
                          60%
                        </span>
                      </motion.div>

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

                  {/* Success Metrics */}
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 2.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">
                        95%
                      </div>
                      <div className="text-white text-xs">Success Rate</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">3x</div>
                      <div className="text-white text-xs">Faster Launch</div>
                    </div>
                  </motion.div>
                </motion.div>

                {/* Floating Development Elements */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 2.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">
                    <Code className="w-6 h-6 text-purple-400" />
                  </div>
                </motion.div>

                {/* Digital Screens Connection */}
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.8, delay: 3.0 }}
                  className="absolute -top-8 -right-8 space-y-2"
                >
                  <div className="flex items-center gap-2 text-cyan-400 text-sm">
                    <Monitor className="w-4 h-4" />
                    <span>Multi-Platform</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-cyan-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-purple-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-green-400 rounded-full"
                    ></motion.div>
                  </div>
                </motion.div>

                {/* Innovation Badge */}
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 3.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">End</div>
                      <div className="text-white text-xs">to End</div>
                    </div>
                  </div>
                </motion.div>
              </motion.div>

              {/* Product Development Features */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 3.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"
                >
                  <Palette className="w-3 h-3 mr-1" />
                  Design
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <Code className="w-3 h-3 mr-1" />
                  Development
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Rocket className="w-3 h-3 mr-1" />
                  Launch
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// The Challenge We Solve
const DigitalProductChallenge = () => {
  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">
              From Idea to Impact: Navigating the Product Journey
            </h2>
            <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
              A structured end‑to‑end process that turns your vision into
              market‑ready digital product development outcomes, from concept
              and validation through design, development, and launch.
            </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 bridge the gap between
                      innovative ideas and a successful, user-friendly digital
                      product. This involves complex challenges in:
                    </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>
                          Design complexity and user experience challenges
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>
                          Technology selection and scalability concerns
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>Market fit validation and user adoption</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
                        <span>Resource management and timeline pressures</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 offers end-to-end digital product development, guiding
                      you through every phase from ideation and strategy to
                      design, development, and launch, ensuring your product
                      stands out and delivers real value.
                    </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>Comprehensive strategy and market research</span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          User-centered design and development approach
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Scalable architecture and future-proof technology
                        </span>
                      </li>
                      <li className="flex items-start gap-2">
                        <CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
                        <span>
                          Agile methodology with transparent communication
                        </span>
                      </li>
                    </ul>
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
  );
};

// What's Included in This Solution
const DigitalProductIncludes = () => {
  const includes = [
    {
      icon: Search,
      title: "Discovery & Strategy",
      description:
        "Market research, user personas, competitive analysis, feature prioritization.",
    },
    {
      icon: Palette,
      title: "UI/UX Design",
      description:
        "Wireframing, prototyping, user testing, visual design, interaction design.",
    },
    {
      icon: Code,
      title: "Full-Stack Development",
      description:
        "Front-end, back-end, database architecture, API integrations.",
    },
    {
      icon: Shield,
      title: "Quality Assurance",
      description: "Rigorous testing, bug fixing, performance optimization.",
    },
    {
      icon: CloudCog,
      title: "Deployment & Support",
      description:
        "Cloud deployment, maintenance, updates, analytics integration.",
    },
    {
      icon: Users,
      title: "Project Management",
      description:
        "Agile methodologies, transparent communication, roadmap planning.",
    },
  ];

  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">
            Comprehensive Digital Product Development Services
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            End‑to‑end digital product development services that turn your
            vision into market‑ready applications, from strategy and design
            through development, testing, and launch.
          </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 DigitalProductBenefits = () => {
  const benefits = [
    {
      icon: Target,
      title: "Market-Driven Innovation",
      description:
        "Develop products precisely tailored to user needs and market demands.",
    },
    {
      icon: Users,
      title: "Seamless User Experiences",
      description:
        "Create intuitive and engaging interfaces that foster user loyalty.",
    },
    {
      icon: Building,
      title: "Scalable & Robust Architecture",
      description:
        "Future-proof your product with high-performance, maintainable code.",
    },
    {
      icon: Zap,
      title: "Accelerated Time-to-Market",
      description:
        "Efficient processes ensure your product launches on schedule.",
    },
    {
      icon: Shield,
      title: "Reduced Development Risk",
      description:
        "Expert guidance and rigorous testing minimize post-launch issues.",
    },
  ];

  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">
            Build Products That Succeed with WDI
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            End‑to‑end digital product development partner that helps you build
            and launch products customers love, from idea validation and
            UX‑driven design to scalable engineering and data‑informed growth.
          </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 Digital Product Development
const DigitalProductProcess = () => {
  const steps = [
    {
      title: "Discovery & Planning",
      description:
        "Deep dive into your vision, market, and user needs to define product strategy.",
      icon: Search,
    },
    {
      title: "Design & Prototyping",
      description:
        "Craft compelling UI/UX, create interactive prototypes for validation.",
      icon: Palette,
    },
    {
      title: "Development & Iteration",
      description:
        "Build features in agile sprints, with continuous feedback cycles.",
      icon: Code,
    },
    {
      title: "Testing & Quality Assurance",
      description:
        "Comprehensive testing to ensure functionality, performance, and security.",
      icon: Shield,
    },
    {
      title: "Deployment & Launch",
      description:
        "Strategic rollout and monitoring to ensure a smooth market entry.",
      icon: Rocket,
    },
    {
      title: "Post-Launch Support & Evolution",
      description: "Ongoing maintenance, updates, and feature enhancements.",
      icon: RefreshCw,
    },
  ];

  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">
            Our Collaborative Product Journey
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            A transparent, team‑driven process that takes your product from
            vision to value, with close collaboration between you, designers,
            and engineers at every stage.
          </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 DigitalProductAudience = () => {
  const audiences = [
    {
      icon: Rocket,
      title: "Startups",
      description:
        "Looking to build their first flagship product and establish market presence.",
    },
    {
      icon: Building,
      title: "Established Businesses",
      description:
        "Aiming to launch new digital services or enhance existing ones.",
    },
    {
      icon: RefreshCw,
      title: "Companies Digitalizing",
      description:
        "Seeking to digitalize internal processes or customer interactions.",
    },
    {
      icon: Lightbulb,
      title: "Entrepreneurs",
      description:
        "With innovative ideas needing expert execution and market validation.",
    },
  ];

  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-4 gap-8"
        >
          {audiences.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>
      </div>
    </section>
  );
};

// Case Studies
const DigitalProductCaseStudies = () => {
  const caseStudies = [
    {
      title: "FinTech Mobile App Redesign",
      client: "Banking Institution",
      description:
        "Helped a banking client launch a new mobile app with enhanced user experience and security features, resulting in 40% increase in daily active users and 50% improvement in customer satisfaction scores.",
      image:
        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
      results: "40% DAU increase, 50% satisfaction improvement",
      engagement: "FinTech transformation success",
      gradient: "from-blue-500/20 to-cyan-500/20",
    },
    {
      title: "E-learning Platform Development",
      client: "Education Technology Company",
      description:
        "Built a comprehensive e-learning system from scratch, supporting 10,000+ simultaneous users with interactive features, video streaming, and progress tracking, achieving 95% user retention rate.",
      image:
        "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
      results: "10K+ concurrent users, 95% retention",
      engagement: "Educational platform innovation",
      gradient: "from-green-500/20 to-emerald-500/20",
    },
    {
      title: "Healthcare Management System",
      client: "Healthcare Provider",
      description:
        "Developed an integrated healthcare management platform that streamlined patient care workflows, reduced administrative overhead by 60%, and improved patient engagement through digital touchpoints.",
      image:
        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
      results: "60% admin reduction, enhanced patient care",
      engagement: "Healthcare digital transformation",
      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">
            Digital Products We've Helped Bring to Life
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            A showcase of the apps, platforms, and SaaS products we’ve co‑built
            with clients from concept to successful launch and growth.
          </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">
                        <Rocket 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">
                        <Star 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 DigitalProductInlineCTA = () => {
  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">
                <Rocket className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Product Development
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
              Ready to Build Your Next{" "}
              <span className="text-accent">Breakthrough Product?</span>
            </h2>

            <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
              Let’s discuss your vision and create a clear roadmap for your
              digital product development journey.
            </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">
                <Calendar className="w-6 h-6 flex-shrink-0" />
                <span>Start Your Product Journey</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// FAQs
const DigitalProductFAQs = () => {
  const faqs = [
    {
      question:
        "What is your typical timeline for digital product development?",
      answer:
        "Our typical timeline varies by project complexity but generally ranges from 3–9 months for most digital product development projects. A simple MVP can be ready in 6–12 weeks, while complex enterprise applications may take 6–12 months.\n\nOur process includes: Discovery & Planning (2–3 weeks), Design & Prototyping (3–4 weeks), Development (8–20 weeks depending on features), Testing & QA (2–3 weeks), and Deployment (1 week). We work in agile sprints, delivering working features every two weeks, so you can see progress and provide feedback throughout the digital product development lifecycle. We’ll provide a detailed, customized timeline during the initial consultation based on your requirements.",
    },
    {
      question:
        "How do you ensure user feedback is incorporated into the design?",
      answer:
        "User feedback is central to our digital product development approach. We integrate it through: user research and persona development at the start, interactive prototypes for early validation, usability testing with real users, A/B testing for key decisions, and continuous feedback loops throughout development.\n\nWe conduct user interviews, surveys, and testing at key milestones and create clickable prototypes you and your users can experience before full build-out. Once live, we embed analytics and feedback mechanisms to capture ongoing behavior and insights. Regular design and product reviews ensure user input directly shapes iterations and refinements.",
    },
    {
      question:
        "What technologies do you specialize in for product development?",
      answer:
        "We specialize in modern, scalable stacks for digital product development, including:\n\nFrontend: React, Next.js, Vue.js, Angular (web); React Native, Flutter (mobile).\n\nBackend: Node.js, Python (Django/Flask), .NET, Java, PHP.\n\nDatabases: PostgreSQL, MongoDB, MySQL, Redis.\n\nCloud & DevOps: AWS, Google Cloud, Azure, Docker, Kubernetes.\n\nWe also work with headless CMS, API integrations, payment gateways, and AI/ML features. Our strategy is to choose the right stack based on your product goals, scalability, and long-term maintenance—not just what’s trending.",
    },
    {
      question: "Do you offer post-launch maintenance and support?",
      answer:
        "Yes, we offer comprehensive post-launch support as part of our digital product development service. This includes: technical maintenance (bug fixes, security patches, performance tuning), feature enhancements, 24/7 monitoring, regular backups and security audits, and analytics and performance reporting.\n\nWe provide flexible support packages from basic maintenance to ongoing development partnerships, plus emergency response, scheduled maintenance windows, and proactive monitoring. We also deliver training, documentation, and knowledge transfer so your team can manage parts of the product internally. Our goal is to keep your digital product secure, fast, and aligned with your evolving business needs.",
    },
  ];

  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">
            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-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-10 shadow-lg"
              >
                <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
                  <span className="font-semibold text-foreground">
                    {faq.question}
                  </span>
                </AccordionTrigger>
                <AccordionContent className="text-muted-foreground pb-10 text-lg leading-relaxed">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </motion.div>
      </div>
    </section>
  );
};

// Final CTA Section
const DigitalProductFinalCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20 relative overflow-hidden bg-black">
      <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-black rounded-full px-6 py-3 flex items-center gap-2">
                <Rocket className="w-5 h-5 text-white" />
                <span className="text-white text-base font-medium">
                  Digital Product Excellence
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6 leading-tight">
            Innovate, Design, Develop:{" "}
            <span className="text-accent">Partner 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-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            From groundbreaking concepts to polished, high‑performing products,
            WDI is your trusted partner for digital product development
            excellence.
          </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>Book Your Discovery Call</span>
              </div>
            </ShimmerButton>

            <p className="text-gray-400 text-sm">
              Strategy • Design • Development • Launch • Support
            </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 Digital Product Development Page
export const DigitalProductDevelopment = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

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

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

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

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

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

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

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

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

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

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

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