import { motion } from "framer-motion";
import {
  Bot,
  Brain,
  Calendar,
  Cpu,
  Eye,
  Layers,
  Lightbulb,
  MessageCircle,
  Rocket,
  Settings,
  Sparkles,
  TrendingUp,
  UserPlus,
  Zap,
} from "lucide-react";
import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { ProcessSection } from "../components/ProcessSection";
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 { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";

// Enhanced Hero Section
const HeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Artificial Intelligence | Custom AI Solutions by WDI</title>
        <meta
          name="description"
          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
        />

        {/* Canonical Link */}
        <link
          rel="canonical"
          href="https://www.wdipl.com/artificial-intelligence"
        />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Artificial Intelligence | Custom AI Solutions by WDI"
        />
        <meta
          property="og:description"
          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital 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="Artificial Intelligence | Custom AI Solutions by WDI"
        />
        <meta
          name="twitter:description"
          content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital 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"
          >
            {/* AI Services 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">
                Artificial Intelligence
              </span>
            </motion.div>

            {/* Main Heading - Left aligned, reduced font size */}
            <div className="space-y-6">
              <h1 className="text-4xl sm:text-5xl md:text-6xl font-semibold leading-tight text-left">
                <span className="text-white">AI-Powered </span>
                <span className="text-[#E5195E]">Innovation</span>
                <span className="text-white"> for Modern Business</span>
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Transform your business with cutting‑edge AI mobile app
                development and artificial intelligence solutions that drive
                automation, insights, and competitive advantage.
              </p>
            </div>

            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, x: 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('/contact/schedule-a-discovery-call')}
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <Calendar className="w-4 h-4 flex-shrink-0" />
                  <span>AI Strategy Consultation</span>
                </div>
              </ShimmerButton>
              <Button
                variant="secondary"
                size="lg"
                className="text-lg px-8 py-4 h-auto"
                onClick={() => navigate("/case-studies")}
              >
                <Eye className="w-4 h-4 flex-shrink-0" />
                <span>View AI Case Studies</span>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with stats */}
          <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"
          >
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
              className="grid grid-cols-2 gap-8 text-center"
            >
              <div className="space-y-2 flex flex-col items-center">
                <div className="text-3xl lg:text-4xl font-bold text-white">
                  100+
                </div>
                <div className="text-sm text-gray-400 leading-tight">
                  AI Models Deployed
                </div>
              </div>

              <div className="space-y-2 flex flex-col items-center">
                <div className="text-3xl lg:text-4xl font-bold text-white">
                  85%
                </div>
                <div className="text-sm text-gray-400 leading-tight">
                  Process Automation
                </div>
              </div>

              <div className="space-y-2 flex flex-col items-center">
                <div className="text-3xl lg:text-4xl font-bold text-white">
                  40%
                </div>
                <div className="text-sm text-gray-400 leading-tight">
                  Cost Reduction
                </div>
              </div>

              <div className="space-y-2 flex flex-col items-center">
                <div className="text-3xl lg:text-4xl font-bold text-white">
                  24/7
                </div>
                <div className="text-sm text-gray-400 leading-tight">
                  AI Operations
                </div>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Enhanced Horizontal Tag Scroller with AI Technologies
const HorizontalTagScroller = () => {
  const technologies = [
    { name: "Machine Learning", icon: Brain, color: "text-blue-400" },
    {
      name: "Natural Language Processing",
      icon: MessageCircle,
      color: "text-green-400",
    },
    { name: "Computer Vision", icon: Eye, color: "text-purple-400" },
    { name: "Deep Learning", icon: Layers, color: "text-cyan-400" },
    {
      name: "Predictive Analytics",
      icon: TrendingUp,
      color: "text-orange-400",
    },
    { name: "AI Automation", icon: Bot, color: "text-yellow-400" },
  ];

  return (
    <section className="py-32 bg-background">
      <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-left mb-20"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold mb-8">
            <span className="text-white">Advanced </span>
            <span className="text-[#E5195E]">AI Technologies</span>
            <span className="text-white"> We Master</span>
          </h2>
          <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
            Cutting‑edge artificial intelligence technologies that power
            next‑generation business solutions and AI‑powered features for
            modern mobile and web applications.
          </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="relative overflow-hidden"
        >
          <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
          <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>

          <div className="flex animate-marquee hover:animate-marquee-paused">
            {/* First set */}
            {technologies.map((tech, index) => {
              const IconComponent = tech.icon;
              return (
                <motion.div
                  key={`first-${tech.name}-${index}`}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.5, delay: index * 0.01 }}
                  viewport={{ once: true }}
                  className="group flex-shrink-0 mx-3"
                >
                  <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                    <div className="flex items-center gap-4">
                      <div
                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
                      >
                        <IconComponent className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
                        {tech.name}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}

            {/* Second and third sets for seamless loop */}
            {[...technologies, ...technologies].map((tech, index) => {
              const IconComponent = tech.icon;
              return (
                <motion.div
                  key={`loop-${tech.name}-${index}`}
                  initial={{ opacity: 0, scale: 0.8 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  transition={{
                    duration: 0.5,
                    delay: (index + technologies.length) * 0.1,
                  }}
                  viewport={{ once: true }}
                  className="group flex-shrink-0 mx-3"
                >
                  <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                    <div className="flex items-center gap-4">
                      <div
                        className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
                      >
                        <IconComponent className="w-6 h-6" />
                      </div>
                      <span className="text-xl font-medium text-foreground whitespace-nowrap">
                        {tech.name}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Why Choose WDI Section
const SideBySideContentWithIcons = () => {
  const advantages = [
    {
      id: "expertise",
      title: "AI Expertise",
      icon: Brain,
    },
    {
      id: "automation",
      title: "Process Automation",
      icon: Bot,
    },
    {
      id: "insights",
      title: "Data-Driven Insights",
      icon: TrendingUp,
    },
    {
      id: "scalable",
      title: "Scalable Solutions",
      icon: Zap,
    },
    {
      id: "innovation",
      title: "Continuous Innovation",
      icon: Lightbulb,
    },
  ];

  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-left mb-16"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold leading-tight mb-6">
            <span className="text-white">Why Choose </span>
            <span className="text-[#E5195E]">WDI</span>
            <span className="text-white"> for AI Solutions</span>
          </h2>

          <p className="text-xl text-gray-300 leading-relaxed">
            Leading AI innovation with proven results and expertise in
            AI‑powered mobile and web development for modern businesses.
          </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-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto"
        >
          {advantages.map((advantage, index) => {
            const IconComponent = advantage.icon;

            return (
              <motion.div
                key={advantage.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                whileHover={{ y: -8, scale: 1.02 }}
                className="group cursor-pointer"
              >
                <Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
                  <CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
                    <div className="mb-6">
                      <IconComponent className="w-10 h-10 text-accent mx-auto" />
                    </div>

                    <h3 className="text-lg font-semibold text-white leading-tight">
                      {advantage.title}
                    </h3>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Service Categories Grid
const TabbedServiceDisplay = () => {
  const navigate = useNavigate();
  const services = [
    {
      title: "AI Strategy & Consulting",
      icon: Lightbulb,
      description:
        "Strategic AI roadmaps and implementation guidance for business transformation.",
      link: "/services/ai-strategy-consulting",
    },
    {
      title: "AI-Powered Automation & Workflows",
      icon: Bot,
      description:
        "Intelligent automation solutions that streamline business processes.",
      link: "/services/ai-automation-workflows",
    },
    {
      title: "AI Integration into Digital Products",
      icon: Zap,
      description:
        "Seamlessly integrate AI capabilities into existing digital products.",
      link: "/services/ai-integration-digital-products",
    },
    {
      title: "Gen AI Integration",
      icon: Sparkles,
      description:
        "Leverage generative AI for content creation and enhanced user experiences.",
      link: "/services/gen-ai-integration-digital-products",
    },
    {
      title: "AI Chatbots & Virtual Assistants",
      icon: MessageCircle,
      description:
        "Intelligent conversational AI solutions for customer engagement.",
      link: "/services/ai-chatbots-virtual-assistants",
    },
    {
      title: "AI Model Deployment & MLOps",
      icon: Settings,
      description: "End-to-end ML operations for scalable AI model deployment.",
      link: "/services/ai-model-deployment-mlops",
    },
  ];

  return (
    <section className="py-32 bg-background">
      <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-left mb-20"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold text-white mb-6">
            AI Services & Solutions
          </h2>
          <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
            Comprehensive artificial intelligence services, including AI mobile
            app development and AI‑powered features, designed to transform your
            business operations and drive innovation.
          </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"
        >
          {services.map((service, index) => {
            const IconComponent = service.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 cursor-pointer"
                onClick={() => navigate(service.link)}
              >
                <div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
                  <div className="flex flex-col items-start space-y-6">
                    <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                      <IconComponent className="w-6 h-6 text-accent" />
                    </div>

                    <div>
                      <h3 className="text-xl font-semibold text-white mb-4">
                        {service.title}
                      </h3>
                      <p className="text-gray-400 leading-relaxed">
                        {service.description}
                      </p>
                    </div>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Updated CTA Section with new design
const InlineCTA = () => {
  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-left 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"
          >
            {/* Ready to Launch Badge */}
            <div className="inline-block">
              <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                <div className="flex items-center gap-2">
                  <Rocket className="w-4 h-4 text-[#E5195E]" />
                  <span className="text-[#E5195E] text-sm font-medium">
                    Ready to Launch?
                  </span>
                </div>
              </div>
            </div>

            {/* Main Heading */}
            <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
              <span className="text-white">Transform Your Business with </span>
              <span className="text-[#E5195E]">AI Innovation</span>
            </h2>

            {/* Subtitle */}
            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
              Unlock the power of artificial intelligence to automate processes,
              gain insights, and drive competitive advantage with AI‑powered
              mobile and web solutions.
            </p>

            {/* CTA Button */}
            <div className="flex flex-col items-start gap-4">
              <ShimmerButton
                className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
                // onClick={() => navigate("/contact/schedule-a-discovery-call")}
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-3">
                  <Bot className="w-6 h-6 flex-shrink-0" />
                  <span>Start Your AI Journey</span>
                </div>
              </ShimmerButton>

              {/* Small benefit text */}
              <p className="text-sm text-gray-400">
                Strategy consultation • AI readiness assessment • Custom
                solution design
              </p>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// AI Specialists Section
const HireDevelopersSection = () => {
  const specialists = [
    {
      title: "AI Engineers",
      icon: Brain,
      skills: ["TensorFlow", "PyTorch", "Scikit-learn", "Keras"],
      iconBg: "bg-blue-500",
      iconColor: "text-white",
      link: "/hire-talent/full-stack-developers",
    },
    {
      title: "ML Engineers",
      icon: Cpu,
      skills: ["Python", "R", "MLOps", "Data Pipeline"],
      iconBg: "bg-green-500",
      iconColor: "text-white",
      link: "/hire-talent/full-stack-developers",
    },
    {
      title: "Data Scientists",
      icon: TrendingUp,
      skills: ["Statistics", "Analytics", "Visualization", "Research"],
      iconBg: "bg-purple-500",
      iconColor: "text-white",
      link: "/hire-talent/full-stack-developers",
    },
    {
      title: "AI Consultants",
      icon: Lightbulb,
      skills: ["Strategy", "Implementation", "Training", "Support"],
      iconBg: "bg-orange-500",
      iconColor: "text-white",
      link: "/hire-talent/full-stack-developers",
    },
  ];

  return (
    <section className="py-32 bg-background">
      <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-left mb-20"
        >
          <h2 className="text-3xl lg:text-4xl font-semibold mb-8">
            <span className="text-white">Hire Our </span>
            <span className="text-[#E5195E]">AI Specialists</span>
          </h2>
          <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
            Get access to expert AI professionals and AI mobile application developers who build intelligent solutions that drive business transformation.
          </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 xl:grid-cols-4 gap-8"
        >
          {specialists.map((specialist, index) => {
            const IconComponent = specialist.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: -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">
                    {/* Header */}
                    <div className="p-8 pb-6">
                      <div className="flex items-start gap-4 mb-6">
                        <div
                          className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
                        >
                          <IconComponent
                            className={`w-6 h-6 ${specialist.iconColor}`}
                          />
                        </div>
                        <div className="flex-1">
                          <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
                            Artificial Intelligence
                          </div>
                        </div>
                      </div>

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

                    {/* Skills */}
                    <div className="px-8 pb-6 flex-1">
                      <div className="flex flex-wrap gap-2">
                        {specialist.skills.map((skill) => (
                          <Badge
                            key={skill}
                            variant="secondary"
                            className="text-xs bg-white/10 text-foreground"
                          >
                            {skill}
                          </Badge>
                        ))}
                      </div>
                    </div>

                    {/* CTA */}
                    <div className="p-8 pt-0 mt-auto space-y-3">
                      <ShimmerButton
                        className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
                        // onClick={() => navigate(specialist.link)}
                      >
                        <div className="inline-flex items-center justify-center gap-2">
                          <UserPlus className="w-4 h-4 flex-shrink-0" />
                          <span className="font-medium">Hire Now</span>
                        </div>
                      </ShimmerButton>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// FAQ data for AI Services
const aiServicesFAQs = [
  {
    question: "What types of AI solutions can WDI develop?",
    answer:
      "We develop a wide range of AI solutions, including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs and AI mobile app development requirements.",
  },
  {
    question: "How do you ensure AI models are accurate and reliable?",
    answer:
      "We follow rigorous testing methodologies, use cross‑validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results for your AI‑powered applications.",
  },
  {
    question: "Can you integrate AI into our existing software systems?",
    answer:
      "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack and support AI‑powered design.",
  },
  {
    question: "What is your approach to data privacy and AI ethics?",
    answer:
      "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks for responsible AI solutions.",
  },
  {
    question: "How long does it take to develop and deploy an AI solution?",
    answer:
      "Development timelines vary based on complexity, but typically range from 3–6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery of AI‑powered features.",
  },
];

export function ArtificialIntelligenceServices() {
  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      <HeroWithCTA />
      <HorizontalTagScroller />
      <SideBySideContentWithIcons />
      <TabbedServiceDisplay />
      <ProcessSection />
      <InlineCTA />
      <HireDevelopersSection />
      <FAQSection
        title="AI Services Questions"
        subtitle="Get answers to common questions about our artificial intelligence services and AI‑powered features."
        faqs={aiServicesFAQs}
      />
      {/* <Footer /> */}
    </div>
  );
}