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">
                Empowering your business with AI-driven image and video
                analysis, enabling 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>
        </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>
        </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>
        </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">
            Building powerful vision AI solutions with leading frameworks and
            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>
        </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">
              Explore how vision AI can transform your operations and products.
            </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 our 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. Data quality is crucial - images should represent real-world conditions including varied lighting, angles, backgrounds, and scenarios. We work with clients to assess existing data, identify gaps, and develop data collection strategies. We can also leverage transfer learning to reduce data requirements and use techniques like data augmentation to maximize dataset value.",
    },
    {
      question: "How do you address bias in facial recognition?",
      answer:
        "We take a comprehensive approach to bias mitigation in facial recognition systems: First, we ensure diverse and representative training datasets across age, gender, ethnicity, and other demographic factors. We implement bias testing protocols throughout development, measuring performance across different demographic groups. We use fairness-aware machine learning techniques and regularly audit models for discriminatory patterns. We provide transparency through bias reporting and allow clients to set fairness thresholds. Additionally, we recommend ethical guidelines for deployment, including consent mechanisms, opt-out options, and clear usage policies. We stay current with regulations like GDPR and emerging AI ethics standards.",
    },
    {
      question: "Can computer vision work on edge devices?",
      answer:
        "Yes, we specialize in edge computer vision deployment for real-time, low-latency applications. We use model optimization techniques including quantization, pruning, and knowledge distillation to reduce model size and computational requirements. We support various edge platforms including NVIDIA Jetson, Intel NCS, mobile devices, and custom embedded systems. Edge deployment offers benefits like reduced latency, improved privacy (data stays local), lower bandwidth usage, and offline operation. We balance accuracy with performance constraints and can implement hybrid architectures where edge devices handle simple tasks while cloud handles complex processing. Our edge solutions maintain high accuracy while meeting strict resource constraints.",
    },
    {
      question: "What are the ethical implications of computer vision?",
      answer:
        "Computer vision raises important ethical considerations we actively address: Privacy concerns around surveillance and data collection require transparent policies and user consent. Bias and fairness issues, especially in facial recognition, need diverse datasets and ongoing monitoring. We implement privacy-by-design principles, including data minimization and anonymization techniques. We provide clear guidelines on appropriate use cases and help clients develop ethical AI policies. Security considerations include protecting against adversarial attacks and ensuring data integrity. We recommend regular ethical audits, stakeholder involvement in development, and compliance with emerging AI regulations. Our goal is building beneficial technology that respects human rights and promotes fairness.",
    },
  ];

  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>
  );
};