import { motion } from "framer-motion";
import {
  Activity,
  AlertTriangle,
  ArrowRight,
  Brain,
  Camera,
  CheckCircle,
  Clock,
  Cloud,
  CloudCog,
  Code,
  Cpu,
  Eye,
  Factory,
  FileText,
  Heart,
  Image,
  ImageIcon,
  Layers,
  MessageSquare,
  Microscope,
  Network,
  Play,
  Rocket,
  Scan,
  ScanFace,
  ScanLine,
  Settings,
  Shield,
  ShoppingCart,
  Tag,
  Target,
  UserPlus,
  Users,
  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";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";

// Computer Vision Applications Hero Section
const ComputerVisionHeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>
          Computer Vision Applications | Vision AI Development | WDI
        </title>
        <meta
          name="description"
          content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
        />

        {/* Canonical Link */}
        <link
          rel="canonical"
          href="https://www.wdipl.com/services/computer-vision-applications"
        />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Computer Vision Applications | Vision AI Development | WDI"
        />
        <meta
          property="og:description"
          content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
        />
        <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="Computer Vision Applications | Vision AI Development | WDI"
        />
        <meta
          name="twitter:description"
          content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
        />
        <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"
          >
            {/* Computer Vision 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">AI & ML</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">
                Computer Vision Applications
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Empower your business with advanced computer vision that enables
                object detection, facial recognition, quality control, and more.
              </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">
                  <Eye className="w-5 h-5 flex-shrink-0" />
                  <span>See with AI</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">
                  <Play className="w-5 h-5 flex-shrink-0" />
                  <span>Request a Demo</span>
                </div>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with Computer Vision Visualization Scene */}
          <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"
          >
            {/* Computer Vision Camera 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 Camera Lens Visualization */}
                <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"
                >
                  {/* Camera Lens with Data Overlay */}
                  <div className="relative flex items-center justify-center mb-8">
                    {/* Camera Lens */}
                    <motion.div
                      initial={{ opacity: 0, scale: 0 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.8, delay: 1.0 }}
                      className="relative z-10"
                    >
                      <div className="w-32 h-32 bg-gradient-to-br from-blue-500/30 to-cyan-500/30 rounded-full flex items-center justify-center shadow-2xl border border-blue-500/50 backdrop-blur-sm">
                        <div className="w-24 h-24 bg-gradient-to-br from-blue-400/20 to-cyan-400/20 rounded-full flex items-center justify-center border border-blue-400/30">
                          <div className="w-16 h-16 bg-gradient-to-br from-blue-300/20 to-cyan-300/20 rounded-full flex items-center justify-center border border-blue-300/30">
                            <Camera className="w-8 h-8 text-blue-300" />
                          </div>
                        </div>
                      </div>

                      {/* Scanning Animation */}
                      <motion.div
                        animate={{
                          scale: [1, 1.2, 1],
                          opacity: [0.3, 0.7, 0.3],
                        }}
                        transition={{ duration: 3, repeat: Infinity }}
                        className="absolute inset-0 rounded-full border-2 border-cyan-400/50"
                      ></motion.div>
                      <motion.div
                        animate={{
                          scale: [1, 1.4, 1],
                          opacity: [0.2, 0.5, 0.2],
                        }}
                        transition={{ duration: 3, repeat: Infinity, delay: 1 }}
                        className="absolute inset-0 rounded-full border-2 border-blue-400/30"
                      ></motion.div>
                    </motion.div>

                    {/* Data Overlay Points */}
                    <div className="absolute inset-0">
                      {/* Crosshair scanning lines */}
                      <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: [0, 1, 0] }}
                        transition={{
                          duration: 2,
                          repeat: Infinity,
                          delay: 1.2,
                        }}
                        className="absolute top-1/2 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-cyan-400 to-transparent"
                      ></motion.div>
                      <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: [0, 1, 0] }}
                        transition={{
                          duration: 2,
                          repeat: Infinity,
                          delay: 1.7,
                        }}
                        className="absolute left-1/2 top-0 w-0.5 h-full bg-gradient-to-b from-transparent via-cyan-400 to-transparent"
                      ></motion.div>

                      {/* Detection Points */}
                      {[...Array(8)].map((_, i) => {
                        const positions = [
                          { top: "20%", left: "25%" },
                          { top: "25%", right: "20%" },
                          { top: "75%", left: "30%" },
                          { top: "80%", right: "25%" },
                          { top: "35%", left: "15%" },
                          { top: "40%", right: "10%" },
                          { top: "60%", left: "85%" },
                          { top: "65%", right: "85%" },
                        ];

                        return (
                          <motion.div
                            key={i}
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.5, delay: 1.4 + i * 0.1 }}
                            className="absolute"
                            style={positions[i]}
                          >
                            <motion.div
                              animate={{
                                scale: [1, 1.3, 1],
                                opacity: [0.6, 1, 0.6],
                              }}
                              transition={{
                                duration: 2,
                                repeat: Infinity,
                                delay: i * 0.3,
                              }}
                              className="w-3 h-3 border-2 border-green-400 bg-green-400/20 rounded-sm shadow-lg"
                            ></motion.div>
                          </motion.div>
                        );
                      })}
                    </div>
                  </div>

                  {/* Object Detection Interface */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 2.2 }}
                    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">
                        <Eye className="w-4 h-4 text-green-400" />
                        <span className="text-green-400 text-xs font-mono">
                          Object Detection
                        </span>
                      </div>
                      <Badge
                        variant="secondary"
                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                      >
                        Live
                      </Badge>
                    </div>

                    {/* Detection Results */}
                    <div className="space-y-2">
                      <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 2.4 }}
                        className="flex items-center justify-between p-2 bg-blue-500/10 rounded border border-blue-500/30"
                      >
                        <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">Person</span>
                        </div>
                        <span className="text-blue-300 text-xs font-mono">
                          98.5%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 2.6 }}
                        className="flex items-center justify-between p-2 bg-green-500/10 rounded border border-green-500/30"
                      >
                        <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">
                            Vehicle
                          </span>
                        </div>
                        <span className="text-green-300 text-xs font-mono">
                          94.2%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, x: -10 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 2.8 }}
                        className="flex items-center justify-between p-2 bg-purple-500/10 rounded border border-purple-500/30"
                      >
                        <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">
                            Product
                          </span>
                        </div>
                        <span className="text-purple-300 text-xs font-mono">
                          91.7%
                        </span>
                      </motion.div>
                    </div>
                  </motion.div>

                  {/* Processing Metrics */}
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 3.0 }}
                    className="grid grid-cols-2 gap-3"
                  >
                    <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">
                        30fps
                      </div>
                      <div className="text-white text-xs">Processing</div>
                    </div>
                    <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.8%
                      </div>
                      <div className="text-white text-xs">Accuracy</div>
                    </div>
                  </motion.div>
                </motion.div>

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

                {/* Factory Automation Indicator */}
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.8, delay: 3.4 }}
                  className="absolute -top-8 -right-8 space-y-2"
                >
                  <div className="flex items-center gap-2 text-orange-400 text-sm">
                    <Factory className="w-4 h-4" />
                    <span>Automated</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-orange-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-blue-400 rounded-full"
                    ></motion.div>
                  </div>
                </motion.div>

                {/* Recognition Confidence Indicator */}
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 3.6 }}
                  className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
                >
                  <div className="w-16 h-16 bg-green-500/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
                    <div className="text-center">
                      <div className="text-green-400 text-sm font-bold">
                        Real
                      </div>
                      <div className="text-green-300 text-xs">Time</div>
                    </div>
                  </div>
                </motion.div>
              </motion.div>

              {/* Computer Vision Features */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 3.8 }}
                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"
                >
                  <Eye className="w-3 h-3 mr-1" />
                  Detection
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <ScanFace className="w-3 h-3 mr-1" />
                  Recognition
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Scan className="w-3 h-3 mr-1" />
                  Analysis
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Key Benefits of Computer Vision
const ComputerVisionBenefits = () => {
  const benefits = [
    {
      icon: CheckCircle,
      title: "Automated Inspection",
      description: "Enhance quality control, reduce manual errors.",
    },
    {
      icon: Shield,
      title: "Enhanced Security",
      description: "Facial recognition, anomaly detection in surveillance.",
    },
    {
      icon: Zap,
      title: "Improved Efficiency",
      description: "Automate monitoring, counting, and tracking.",
    },
    {
      icon: Heart,
      title: "Personalized Experiences",
      description: "Facial recognition for tailored interactions.",
    },
    {
      icon: FileText,
      title: "Data Extraction",
      description:
        "Automatically recognize and extract information from images/videos.",
    },
  ];

  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">
            Transform Operations with Visual Intelligence
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Harness AI‑powered visual intelligence to turn images and video into
            real‑time insights that automate inspections, improve safety, and
            optimize your workflows.
          </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>
  );
};

// Computer Vision Development Process
const ComputerVisionProcess = () => {
  const steps = [
    {
      title: "Use Case Definition & Data Collection",
      description:
        "Identifying specific computer vision applications and gathering relevant image and video datasets for training.",
      icon: Target,
    },
    {
      title: "Image/Video Annotation & Preprocessing",
      description:
        "Labeling visual data with bounding boxes, classifications, and preparing datasets for optimal model training.",
      icon: ImageIcon,
    },
    {
      title: "Model Selection & Training",
      description:
        "Choosing appropriate computer vision architectures and training models on annotated datasets for accurate recognition.",
      icon: Brain,
    },
    {
      title: "Performance Optimization & Validation",
      description:
        "Fine-tuning models for accuracy and speed, validating performance across diverse test scenarios and edge cases.",
      icon: Settings,
    },
    {
      title: "Deployment & Integration",
      description:
        "Implementing computer vision models in production environments and integrating with existing systems and workflows.",
      icon: Rocket,
    },
    {
      title: "Monitoring & Iteration",
      description:
        "Continuously monitoring model performance and iterating based on real-world usage patterns and feedback.",
      icon: Activity,
    },
  ];

  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 Strategic Approach to Vision AI Development
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            We take a focused, business‑driven approach to vision AI, aligning
            computer‑vision solutions with your core goals and operational
            needs.
          </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>
  );
};

// Computer Vision Applications List (renamed from ComputerVisionApplications)
const CVApplicationsList = () => {
  const applications = [
    {
      title: "Object Detection & Recognition",
      description: "Identifying and locating objects in images/video.",
      icon: Eye,
      features: [
        "Real-time Detection",
        "Multi-object Tracking",
        "Bounding Boxes",
        "Classification",
      ],
    },
    {
      title: "Facial Recognition & Analysis",
      description: "For security, access control, or personalization.",
      icon: ScanFace,
      features: [
        "Identity Verification",
        "Emotion Detection",
        "Age Estimation",
        "Liveness Detection",
      ],
    },
    {
      title: "Image & Video Classification",
      description: "Categorizing visual content automatically.",
      icon: Image,
      features: [
        "Content Categorization",
        "Quality Assessment",
        "Scene Understanding",
        "Batch Processing",
      ],
    },
    {
      title: "Optical Character Recognition (OCR)",
      description: "Extracting text from images and documents.",
      icon: FileText,
      features: [
        "Text Extraction",
        "Document Parsing",
        "Multi-language Support",
        "Handwriting Recognition",
      ],
    },
    {
      title: "Quality Control & Anomaly Detection",
      description: "Automated inspection in manufacturing.",
      icon: AlertTriangle,
      features: [
        "Defect Detection",
        "Surface Inspection",
        "Dimensional Analysis",
        "Automated Sorting",
      ],
    },
    {
      title: "Pose Estimation & Activity Recognition",
      description: "Analyzing human movement.",
      icon: Users,
      features: [
        "Posture Analysis",
        "Gesture Recognition",
        "Activity Tracking",
        "Sports Analytics",
      ],
    },
    {
      title: "Augmented Reality (AR) Integration",
      description: "Overlaying digital info on real-world views.",
      icon: Scan,
      features: [
        "Marker Tracking",
        "Object Overlay",
        "Real-time Rendering",
        "Interactive Experiences",
      ],
    },
    {
      title: "Retail Analytics",
      description:
        "Tracking foot traffic, shelf compliance, customer behavior.",
      icon: ShoppingCart,
      features: [
        "People Counting",
        "Heat Mapping",
        "Inventory Monitoring",
        "Behavior Analysis",
      ],
    },
  ];

  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">
            Our Specialized Computer Vision Solutions
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            We deliver tailored computer‑vision solutions for object detection,
            facial recognition, quality control, and visual analytics across
            industries.
          </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-4 gap-8"
        >
          {applications.map((application, index) => {
            const IconComponent = application.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-6">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    <h3 className="text-lg font-semibold text-foreground mb-4">
                      {application.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed mb-6 text-sm">
                      {application.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-xs font-medium text-foreground">
                        Key Features:
                      </h4>
                      <div className="flex flex-wrap gap-1">
                        {application.features.map((feature) => (
                          <Badge
                            key={feature}
                            variant="secondary"
                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
                          >
                            {feature}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Computer Vision Tech Stack
const ComputerVisionTechStack = () => {
  const technologies = [
    { name: "Python", icon: Code, category: "Programming", color: "blue" },
    {
      name: "TensorFlow",
      icon: Brain,
      category: "Deep Learning",
      color: "orange",
    },
    {
      name: "PyTorch",
      icon: Brain,
      category: "Deep Learning",
      color: "orange",
    },
    { name: "OpenCV", icon: Eye, category: "Computer Vision", color: "green" },
    { name: "CUDA", icon: Cpu, category: "GPU Computing", color: "green" },
    { name: "YOLO", icon: Target, category: "Object Detection", color: "red" },
    {
      name: "ResNet",
      icon: Network,
      category: "CNN Architecture",
      color: "blue",
    },
    { name: "VGG", icon: Layers, category: "CNN Architecture", color: "blue" },
    {
      name: "AWS Rekognition",
      icon: CloudCog,
      category: "Cloud Vision API",
      color: "orange",
    },
    {
      name: "Google Vision AI",
      icon: Cloud,
      category: "Cloud Vision API",
      color: "green",
    },
    {
      name: "Azure Computer Vision",
      icon: CloudCog,
      category: "Cloud Vision API",
      color: "blue",
    },
    {
      name: "Edge AI Devices",
      icon: Cpu,
      category: "Edge Computing",
      color: "purple",
    },
  ];

  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">
            Computer Vision Tech Stack
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Build powerful vision AI solutions using a modern computer‑vision
            stack that combines leading frameworks and high‑performance
            hardware.
          </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 grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
        >
          {technologies.map((tech, index) => {
            const IconComponent = tech.icon;
            const colorClasses = {
              blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
              orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
              green: "bg-green-500/20 text-green-400 border-green-500/30",
              red: "bg-red-500/20 text-red-400 border-red-500/30",
              purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
            };

            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, scale: 1.05 }}
                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 p-4 text-center">
                  <div
                    className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
                      colorClasses[tech.color as keyof typeof colorClasses] ||
                      "bg-accent/20 text-accent border-accent/30"
                    }`}
                  >
                    <IconComponent className="w-6 h-6" />
                  </div>
                  <h4 className="font-semibold text-white text-sm mb-1">
                    {tech.name}
                  </h4>
                  <p className="text-xs text-gray-400">{tech.category}</p>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Computer Vision Case Studies
const ComputerVisionCaseStudies = () => {
  const caseStudies = [
    {
      title: "Automated Quality Control System",
      client: "Manufacturing Corporation",
      description:
        "Implemented computer vision for product defect detection, achieving 99.2% accuracy in identifying manufacturing defects and reducing manual inspection time by 85% while improving product quality.",
      image:
        "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=400&h=300&fit=crop&auto=format",
      results: "99.2% defect detection, 85% time reduction",
      engagement: "5-month quality control project",
      gradient: "from-blue-500/20 to-cyan-500/20",
    },
    {
      title: "Facial Recognition Security System",
      client: "Corporate Campus",
      description:
        "Deployed advanced facial recognition for access control across multiple buildings, processing 10,000+ daily entries with 98.7% accuracy and reducing security incidents by 60%.",
      image:
        "https://images.unsplash.com/photo-1557804506-669a67965ba0?w=400&h=300&fit=crop&auto=format",
      results: "98.7% recognition accuracy, 60% incident reduction",
      engagement: "4-month security implementation",
      gradient: "from-green-500/20 to-emerald-500/20",
    },
    {
      title: "Retail Analytics Platform",
      client: "Retail Chain Network",
      description:
        "Built computer vision system for customer behavior analysis and inventory monitoring across 200+ stores, increasing sales by 25% through optimized product placement and reducing stockouts by 40%.",
      image:
        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
      results: "25% sales increase, 40% stockout reduction",
      engagement: "6-month retail analytics project",
      gradient: "from-purple-500/20 to-pink-500/20",
    },
  ];

  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-8">
            Computer Vision Solutions Driving Innovation
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Computer‑vision solutions transform images and video into actionable
            insights, enabling smarter automation, security, and quality control
            across industries.
          </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-card/20 backdrop-blur-md border-white/10 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">
                        <Eye className="w-6 h-6 text-accent" />
                      </div>
                      <div className="flex-1">
                        <div className="text-xs text-muted-foreground 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-foreground 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-muted-foreground text-sm leading-relaxed mb-4">
                      {study.description}
                    </p>
                    <div className="flex gap-4 text-xs text-muted-foreground">
                      <div className="flex items-center gap-1">
                        <Clock 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 CTA
const ComputerVisionInlineCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="py-20 bg-black">
      <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-black rounded-full px-6 py-3 flex items-center gap-2">
                <Eye className="w-5 h-5 text-white" />
                <span className="text-white text-base font-medium">
                  Computer Vision
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
              Ready to See Your Business{" "}
              <span className="text-accent">Through a New Lens?</span>
            </h2>

            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
              Discover how vision AI can transform operations and products with
              intelligent, image‑driven insights.
            </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">
                <MessageSquare className="w-6 h-6 flex-shrink-0" />
                <span>Get a Free Computer Vision Consultation</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Hire Computer Vision Engineers
const HireComputerVisionEngineers = () => {
  const specialistTypes = [
    {
      title: "Computer Vision Engineers",
      description:
        "Specialists in image processing, deep learning for vision, and real-time video analysis",
      icon: Eye,
      skills: [
        "Image Processing",
        "Object Detection",
        "Neural Networks",
        "OpenCV",
      ],
    },
    {
      title: "Machine Learning Engineers (CV Focus)",
      description: "Experts in training and optimizing computer vision models",
      icon: Brain,
      skills: [
        "Deep Learning",
        "Model Training",
        "TensorFlow/PyTorch",
        "Performance Optimization",
      ],
    },
    {
      title: "Computer Vision Researchers",
      description:
        "Advanced specialists in cutting-edge vision AI research and development",
      icon: Microscope,
      skills: [
        "Research & Development",
        "Algorithm Innovation",
        "Academic Publications",
        "Novel Architectures",
      ],
    },
    {
      title: "Edge AI Engineers",
      description:
        "Specialists in deploying computer vision on edge devices and embedded systems",
      icon: Cpu,
      skills: [
        "Edge Computing",
        "Model Optimization",
        "Embedded Systems",
        "Real-time Processing",
      ],
    },
    {
      title: "AR/VR Vision Engineers",
      description:
        "Experts in computer vision for augmented and virtual reality applications",
      icon: Scan,
      skills: [
        "AR/VR Development",
        "3D Reconstruction",
        "Tracking Systems",
        "Real-time Rendering",
      ],
    },
    {
      title: "Data Annotation Specialists",
      description:
        "Experts in creating high-quality labeled datasets for computer vision training",
      icon: Tag,
      skills: [
        "Data Annotation",
        "Quality Control",
        "Annotation Tools",
        "Dataset Curation",
      ],
    },
  ];

  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">
            Access Expert Computer Vision Talent
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Hire specialized engineers proficient in image processing, deep
            learning for vision, and real‑time video analysis.
          </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 mb-12"
        >
          {specialistTypes.map((type, index) => {
            const IconComponent = type.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">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {type.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed mb-6">
                      {type.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-sm font-medium text-foreground">
                        Core Skills:
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {type.skills.map((skill) => (
                          <Badge
                            key={skill}
                            variant="secondary"
                            className="text-xs bg-muted/50 text-muted-foreground border-muted"
                          >
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="text-center space-y-6"
        >
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <ShimmerButton className="text-lg px-8 py-4">
              <div className="inline-flex items-center gap-2">
                <UserPlus className="w-5 h-5 flex-shrink-0" />
                <span>Hire CV Engineers</span>
              </div>
            </ShimmerButton>
            <Button
              variant="outline"
              size="lg"
              className="text-lg px-8 py-4 h-auto border-white/20 text-muted-foreground hover:bg-muted hover:text-foreground"
            >
              <div className="inline-flex items-center gap-2">
                <FileText className="w-5 h-5 flex-shrink-0" />
                <span>Request Profiles</span>
              </div>
            </Button>
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Computer Vision FAQs
const ComputerVisionFAQs = () => {
  const faqs = [
    {
      question: "What kind of data is needed for computer vision models?",
      answer:
        "Computer vision models require labeled visual datasets, including images or videos with annotations such as bounding boxes, classification labels, or segmentation masks. The quantity needed varies by complexity: simple classification may need thousands of images per class, while complex object detection requires tens of thousands.\n\nData quality is crucial. Images should reflect real-world conditions like varied lighting, angles, backgrounds, and scenarios. When building AI mobile app development features or vision AI-powered functionality, transfer learning and data augmentation help reduce data requirements while maximizing dataset value.",
    },
    {
      question: "How do you address bias in facial recognition?",
      answer:
        "Bias in facial recognition is addressed through diverse, representative training data across age, gender, ethnicity, and other demographic factors. We implement bias testing protocols throughout development, measuring performance across groups and using fairness-aware machine learning techniques.\n\nRegular audits, transparency reports, and client-defined fairness thresholds help ensure responsible outcomes. For AI mobile applications and iOS mobile app development, these safeguards are especially important when rolling out AI-powered features in consumer-facing products.",
    },
    {
      question: "Can computer vision work on edge devices?",
      answer:
        "Yes. Computer vision can run on edge devices for real-time, low-latency applications. We use model optimization techniques such as quantization, pruning, and knowledge distillation to reduce size and computational needs.\n\nWe support edge platforms such as NVIDIA Jetson, Intel NCS, mobile devices, and custom embedded systems. For AI iOS development and AI iOS development software, edge-based vision AI helps maintain responsiveness and privacy while keeping data local. This approach pairs well with AI mobile app and web development backends that handle higher-level coordination.",
    },
    {
      question: "What are the ethical implications of computer vision?",
      answer:
        "Computer vision raises important ethical questions around privacy, bias, and transparency. Privacy concerns—especially in surveillance or AI-powered design scenarios—require clear consent, data-minimization practices, and anonymization where possible.\n\nWe implement privacy-by-design principles, monitor for bias (especially in facial-recognition-based AI-powered features), and recommend ethical AI policies and regular audits. Aligning computer vision deployments with fairness and regulation is essential to building trustworthy, user-centric products.",
    },
  ];

  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 ComputerVisionFinalCTA = () => {
  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">
                <Eye className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Vision AI
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Empower Your Business with{" "}
            <span className="text-accent">Intelligent Sight</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"
          >
            WDI develops cutting‑edge computer‑vision applications that
            automate, analyze, and innovate across industries.
          </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">
                <Scan className="w-6 h-6 flex-shrink-0" />
                <span>Explore Vision AI Possibilities</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Object Detection • Facial Recognition • Quality Control • Retail
              Analytics
            </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 Computer Vision Applications Page
export const ComputerVisionApplications = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

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

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

      {/* Tech Stack */}
      <section className="bg-card">
        <ComputerVisionTechStack />
      </section>

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

      {/* Applications */}
      <section className="bg-background">
        <CVApplicationsList />
      </section>

      {/* Target Audience */}
      <section className="bg-card">
        <AIStrategyTargetAudience />
      </section>

      {/* Case Studies */}
      <section className="bg-background">
        <ComputerVisionCaseStudies />
      </section>

      {/* Mid-Page CTA */}
      <section className="bg-card">
        <ComputerVisionInlineCTA />
      </section>

      {/* Hire Engineers */}
      <section className="bg-background">
        <HireComputerVisionEngineers />
      </section>

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

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

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