Wdipl-react/pages/CustomMLModelDevelopment.tsx

import { motion } from "framer-motion";
import {
  Activity,
  AlertTriangle,
  ArrowRight,
  BarChart3,
  Brain,
  Calculator,
  Clock,
  Cloud,
  CloudCog,
  Code,
  Cog,
  Cpu,
  Database,
  Eye,
  FileText,
  Layers,
  LineChart,
  MessageSquare,
  Rocket,
  Scale,
  Search,
  Settings,
  Table,
  Target,
  TrendingUp,
  UserPlus,
  Wrench,
  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 { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";

// Custom ML Model Development Hero Section
const CustomMLHeroWithCTA = () => {
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Custom ML Model Development | Machine Learning by WDI</title>
        <meta
          name="description"
          content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Custom ML Model Development | Machine Learning by WDI" />
        <meta
          property="og:description"
          content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
        />
        <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="Custom ML Model Development | Machine Learning by WDI" />
        <meta
          name="twitter:description"
          content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
        />
        <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"
          >
            {/* Custom ML 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">
                Custom Machine Learning Model Development
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Building bespoke ML models tailored to your unique data and
                business challenges, extracting valuable insights and automating
                complex decisions.
              </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={() => navigateTo("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <Brain className="w-5 h-5 flex-shrink-0" />
                  <span>Develop Your Custom ML Model</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">
                  <Search className="w-5 h-5 flex-shrink-0" />
                  <span>Explore ML Use Cases</span>
                </div>
              </Button>
            </motion.div>
          </motion.div>

          {/* Right side with ML Data 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"
          >
            {/* ML Data Visualization 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 ML Brain 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"
                >
                  {/* Central Brain Icon with Data Streams */}
                  <div className="relative flex items-center justify-center">
                    {/* Central Brain */}
                    <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-24 h-24 bg-gradient-to-br from-accent to-blue-500 rounded-full flex items-center justify-center shadow-2xl">
                        <Brain className="w-12 h-12 text-white" />
                      </div>

                      {/* Pulsing Ring */}
                      <motion.div
                        animate={{
                          scale: [1, 1.2, 1],
                          opacity: [0.5, 0.2, 0.5],
                        }}
                        transition={{ duration: 3, repeat: Infinity }}
                        className="absolute inset-0 rounded-full bg-accent/20 border-2 border-accent/30"
                      ></motion.div>
                    </motion.div>

                    {/* Data Streams */}
                    <div className="absolute inset-0">
                      {/* Data Stream 1 */}
                      <motion.div
                        initial={{ opacity: 0, pathLength: 0 }}
                        animate={{ opacity: 1, pathLength: 1 }}
                        transition={{ duration: 2, delay: 1.2 }}
                        className="absolute top-2 left-2"
                      >
                        <svg
                          width="100"
                          height="100"
                          viewBox="0 0 100 100"
                          className="overflow-visible"
                        >
                          <motion.path
                            d="M10,10 Q30,30 50,10 T90,30"
                            stroke="#3B82F6"
                            strokeWidth="2"
                            fill="none"
                            strokeDasharray="5,5"
                            animate={{ strokeDashoffset: [0, -10] }}
                            transition={{
                              duration: 2,
                              repeat: Infinity,
                              ease: "linear",
                            }}
                          />
                        </svg>
                      </motion.div>

                      {/* Data Stream 2 */}
                      <motion.div
                        initial={{ opacity: 0, pathLength: 0 }}
                        animate={{ opacity: 1, pathLength: 1 }}
                        transition={{ duration: 2, delay: 1.4 }}
                        className="absolute bottom-2 right-2"
                      >
                        <svg
                          width="100"
                          height="100"
                          viewBox="0 0 100 100"
                          className="overflow-visible"
                        >
                          <motion.path
                            d="M90,90 Q70,70 50,90 T10,70"
                            stroke="#10B981"
                            strokeWidth="2"
                            fill="none"
                            strokeDasharray="5,5"
                            animate={{ strokeDashoffset: [0, -10] }}
                            transition={{
                              duration: 2,
                              repeat: Infinity,
                              ease: "linear",
                              delay: 0.5,
                            }}
                          />
                        </svg>
                      </motion.div>
                    </div>
                  </div>

                  {/* Floating Data Points */}
                  <div className="absolute inset-0">
                    {[...Array(12)].map((_, i) => {
                      const positions = [
                        { top: "10%", left: "20%" },
                        { top: "15%", right: "25%" },
                        { top: "30%", left: "10%" },
                        { top: "35%", right: "15%" },
                        { top: "60%", left: "15%" },
                        { top: "65%", right: "20%" },
                        { top: "80%", left: "25%" },
                        { top: "85%", right: "30%" },
                        { top: "20%", left: "70%" },
                        { top: "40%", right: "70%" },
                        { top: "70%", left: "75%" },
                        { top: "90%", right: "75%" },
                      ];

                      const colors = [
                        "bg-blue-400",
                        "bg-green-400",
                        "bg-purple-400",
                        "bg-orange-400",
                        "bg-cyan-400",
                      ];
                      const randomColor = colors[i % colors.length];

                      return (
                        <motion.div
                          key={i}
                          initial={{ opacity: 0, scale: 0 }}
                          animate={{ opacity: 1, scale: 1 }}
                          transition={{ duration: 0.5, delay: 1.6 + i * 0.1 }}
                          className="absolute"
                          style={positions[i]}
                        >
                          <motion.div
                            animate={{
                              y: [0, -10, 0],
                              opacity: [0.3, 1, 0.3],
                            }}
                            transition={{
                              duration: 3,
                              repeat: Infinity,
                              delay: i * 0.3,
                            }}
                            className={`w-2 h-2 ${randomColor} rounded-full shadow-lg`}
                          ></motion.div>
                        </motion.div>
                      );
                    })}
                  </div>

                  {/* Code Snippets */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 2.8 }}
                    className="mt-8 bg-black/50 rounded-lg p-4 border border-gray-700"
                  >
                    <div className="flex items-center gap-2 mb-3">
                      <Code className="w-4 h-4 text-green-400" />
                      <span className="text-green-400 text-xs font-mono">
                        ML Model Training
                      </span>
                    </div>
                    <div className="space-y-1 text-xs font-mono">
                      <div className="text-blue-400">
                        <span className="text-purple-400">from</span>{" "}
                        sklearn.ensemble{" "}
                        <span className="text-purple-400">import</span>{" "}
                        RandomForestClassifier
                      </div>
                      <div className="text-gray-300">
                        model = RandomForestClassifier()
                      </div>
                      <div className="text-yellow-400">
                        model.fit(X_train, y_train)
                      </div>
                      <div className="text-green-400">
                        accuracy = model.score(X_test, y_test)
                      </div>
                    </div>
                  </motion.div>
                </motion.div>

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

                {/* Algorithm Indicators */}
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ duration: 0.8, delay: 3.2 }}
                  className="absolute -top-8 -right-8 space-y-2"
                >
                  <div className="flex items-center gap-2 text-purple-400 text-sm">
                    <Cpu className="w-4 h-4" />
                    <span>Neural Networks</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-purple-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-blue-400 rounded-full"
                    ></motion.div>
                    <motion.div
                      animate={{ opacity: [0.3, 1, 0.3] }}
                      transition={{ duration: 2, repeat: Infinity, delay: 1 }}
                      className="w-2 h-2 bg-green-400 rounded-full"
                    ></motion.div>
                  </div>
                </motion.div>

                {/* Accuracy Indicator */}
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 3.4 }}
                  className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
                >
                  <div className="w-20 h-20 bg-blue-500/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
                    <div className="text-center">
                      <div className="text-blue-400 text-lg font-bold">
                        94.2%
                      </div>
                      <div className="text-blue-300 text-xs">Accuracy</div>
                    </div>
                  </div>
                </motion.div>
              </motion.div>

              {/* ML Features */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 3.6 }}
                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"
                >
                  <Brain className="w-3 h-3 mr-1" />
                  Custom ML
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <TrendingUp className="w-3 h-3 mr-1" />
                  Predictive
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Target className="w-3 h-3 mr-1" />
                  Tailored
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Key Benefits of Custom ML Models
const CustomMLBenefits = () => {
  const benefits = [
    {
      icon: Target,
      title: "Tailored Accuracy",
      description:
        "Optimized for your specific dataset and problem, delivering superior results.",
    },
    {
      icon: Zap,
      title: "Competitive Edge",
      description:
        "Unique models provide proprietary insights and capabilities.",
    },
    {
      icon: Cog,
      title: "Automation of Complex Tasks",
      description:
        "Solving problems that are difficult for traditional programming.",
    },
    {
      icon: TrendingUp,
      title: "Predictive Power",
      description: "Anticipate trends, behaviors, and outcomes.",
    },
    {
      icon: Scale,
      title: "Scalability",
      description:
        "Models designed to handle growing data volumes and prediction demands.",
    },
  ];

  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">
            Why Invest in a Custom ML Solution?
          </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.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>

        {/* 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>
  );
};

// Custom ML Development Process
const CustomMLDevelopmentProcess = () => {
  const steps = [
    {
      title: "Problem Definition & Data Assessment",
      description:
        "Analyzing your business problem and evaluating data quality, quantity, and relevance for ML model development.",
      icon: Search,
    },
    {
      title: "Feature Engineering & Data Preprocessing",
      description:
        "Cleaning, transforming, and engineering features from raw data to optimize model performance and accuracy.",
      icon: Wrench,
    },
    {
      title: "Model Selection & Training",
      description:
        "Selecting appropriate algorithms and training multiple models to find the best fit for your specific problem.",
      icon: Brain,
    },
    {
      title: "Evaluation & Hyperparameter Tuning",
      description:
        "Rigorously testing model performance and fine-tuning parameters to achieve optimal accuracy and reliability.",
      icon: Settings,
    },
    {
      title: "Model Deployment & Integration",
      description:
        "Deploying trained models into production environments and integrating with existing systems and workflows.",
      icon: Rocket,
    },
    {
      title: "Monitoring & Retraining",
      description:
        "Continuously monitoring model performance and implementing retraining procedures to maintain accuracy over time.",
      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 Process for Building Your ML Model
          </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>
  );
};

// Custom ML Services
const CustomMLServices = () => {
  const services = [
    {
      title: "Predictive Analytics Models",
      description: "Forecasting sales, churn, demand, fraud.",
      icon: TrendingUp,
      features: [
        "Sales Forecasting",
        "Churn Prediction",
        "Demand Planning",
        "Fraud Detection",
      ],
    },
    {
      title: "Natural Language Processing (NLP) Models",
      description:
        "Sentiment analysis, text classification, entity recognition.",
      icon: FileText,
      features: [
        "Sentiment Analysis",
        "Text Classification",
        "Entity Recognition",
        "Language Understanding",
      ],
    },
    {
      title: "Computer Vision Models",
      description:
        "Object detection, image classification, facial recognition.",
      icon: Eye,
      features: [
        "Object Detection",
        "Image Classification",
        "Facial Recognition",
        "Image Segmentation",
      ],
    },
    {
      title: "Recommendation Engines",
      description: "Personalizing product or content suggestions.",
      icon: Target,
      features: [
        "Product Recommendations",
        "Content Personalization",
        "Collaborative Filtering",
        "Hybrid Systems",
      ],
    },
    {
      title: "Anomaly Detection Models",
      description: "Identifying unusual patterns in data.",
      icon: AlertTriangle,
      features: [
        "Fraud Detection",
        "System Monitoring",
        "Quality Control",
        "Security Analysis",
      ],
    },
    {
      title: "Reinforcement Learning",
      description: "Developing intelligent agents for decision-making.",
      icon: Brain,
      features: [
        "Decision Optimization",
        "Game AI",
        "Resource Allocation",
        "Process Automation",
      ],
    },
    {
      title: "Time Series Forecasting",
      description: "Predicting future values based on historical data.",
      icon: LineChart,
      features: [
        "Trend Analysis",
        "Seasonal Forecasting",
        "Stock Prediction",
        "Demand Planning",
      ],
    },
    {
      title: "Model Optimization & Fine-tuning",
      description: "Improving performance of existing models.",
      icon: Settings,
      features: [
        "Hyperparameter Tuning",
        "Performance Optimization",
        "Model Compression",
        "Transfer Learning",
      ],
    },
  ];

  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 Custom ML Model Capabilities
          </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"
        >
          {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.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-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">
                      {service.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed mb-6 text-sm">
                      {service.description}
                    </p>
                    <div className="space-y-2">
                      <h4 className="text-xs font-medium text-foreground">
                        Key Applications:
                      </h4>
                      <div className="flex flex-wrap gap-1">
                        {service.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>
  );
};

// Custom ML Tech Stack
const CustomMLTechStack = () => {
  const technologies = [
    { name: "Python", icon: Code, category: "Programming", color: "blue" },
    {
      name: "R",
      icon: BarChart3,
      category: "Statistical Computing",
      color: "blue",
    },
    {
      name: "TensorFlow",
      icon: Brain,
      category: "Deep Learning",
      color: "orange",
    },
    {
      name: "PyTorch",
      icon: Brain,
      category: "Deep Learning",
      color: "orange",
    },
    { name: "Keras", icon: Layers, category: "Neural Networks", color: "red" },
    {
      name: "Scikit-learn",
      icon: Cog,
      category: "Machine Learning",
      color: "orange",
    },
    {
      name: "Pandas",
      icon: Table,
      category: "Data Manipulation",
      color: "blue",
    },
    {
      name: "NumPy",
      icon: Calculator,
      category: "Numerical Computing",
      color: "blue",
    },
    {
      name: "AWS SageMaker",
      icon: CloudCog,
      category: "ML Platform",
      color: "orange",
    },
    {
      name: "Azure Machine Learning",
      icon: Cloud,
      category: "ML Platform",
      color: "blue",
    },
    {
      name: "Google AI Platform",
      icon: Brain,
      category: "ML Platform",
      color: "green",
    },
    { name: "SQL", icon: Database, category: "Databases", color: "blue" },
    { name: "NoSQL", icon: Database, category: "Databases", color: "green" },
  ];

  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">
            Custom ML Tech Stack
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Leveraging powerful libraries and platforms for cutting-edge ML
            solutions.
          </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",
            };

            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                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>
  );
};

// Custom ML Case Studies
const CustomMLCaseStudies = () => {
  const caseStudies = [
    {
      title: "Predictive Sales Forecasting Model",
      client: "E-commerce Retail Chain",
      description:
        "Developed custom ML model for sales forecasting, improving prediction accuracy by 85% and reducing inventory costs by 30% while optimizing stock levels across 200+ locations.",
      image:
        "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
      results: "85% prediction accuracy, 30% cost reduction",
      engagement: "3-month ML project",
      gradient: "from-blue-500/20 to-cyan-500/20",
    },
    {
      title: "Medical Image Classification System",
      client: "Healthcare Technology Company",
      description:
        "Built computer vision ML model for medical imaging diagnosis, achieving 96% accuracy in disease detection and reducing analysis time by 75% for radiologists.",
      image:
        "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
      results: "96% diagnostic accuracy, 75% time reduction",
      engagement: "5-month computer vision project",
      gradient: "from-green-500/20 to-emerald-500/20",
    },
    {
      title: "Customer Churn Prediction Engine",
      client: "SaaS Technology Platform",
      description:
        "Implemented advanced ML model for customer churn prediction, identifying at-risk customers with 92% accuracy and enabling proactive retention strategies that reduced churn by 40%.",
      image:
        "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
      results: "92% churn prediction, 40% retention improvement",
      engagement: "4-month predictive 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">
            Custom ML Models Driving Real Business Value
          </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.1 }}
              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">
                        <Brain 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 CustomMLInlineCTA = () => {
  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">
                <Brain className="w-5 h-5 text-white" />
                <span className="text-white text-base font-medium">
                  Custom ML Models
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
              Have a Unique Problem Only{" "}
              <span className="text-accent">ML Can Solve?</span>
            </h2>

            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
              Let's explore how a custom machine learning model can give you a
              decisive edge.
            </p>

            <ShimmerButton
              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
              onClick={() => navigateTo("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <MessageSquare className="w-6 h-6 flex-shrink-0" />
                <span>Get a Free ML Model Consultation</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Hire ML Model Developers
const HireMLDevelopers = () => {
  const specialistTypes = [
    {
      title: "Machine Learning Engineers",
      description:
        "Specialists in developing, training, and deploying custom ML models",
      icon: Brain,
      skills: [
        "Model Development",
        "Algorithm Design",
        "Feature Engineering",
        "Performance Optimization",
      ],
    },
    {
      title: "Data Scientists",
      description:
        "Experts in extracting insights and building predictive models from complex datasets",
      icon: BarChart3,
      skills: [
        "Statistical Analysis",
        "Predictive Modeling",
        "Data Mining",
        "Hypothesis Testing",
      ],
    },
    {
      title: "Deep Learning Specialists",
      description:
        "Specialists in neural networks and advanced deep learning architectures",
      icon: Layers,
      skills: [
        "Neural Networks",
        "Deep Learning",
        "Computer Vision",
        "NLP Models",
      ],
    },
    {
      title: "MLOps Engineers",
      description:
        "Experts in deploying and managing ML models in production environments",
      icon: Settings,
      skills: [
        "Model Deployment",
        "Pipeline Automation",
        "Performance Monitoring",
        "Version Control",
      ],
    },
    {
      title: "Computer Vision Engineers",
      description:
        "Specialists in developing image and video analysis ML models",
      icon: Eye,
      skills: [
        "Image Processing",
        "Object Detection",
        "Facial Recognition",
        "Video Analysis",
      ],
    },
    {
      title: "NLP Engineers",
      description:
        "Experts in natural language processing and text analysis models",
      icon: FileText,
      skills: [
        "Text Processing",
        "Sentiment Analysis",
        "Language Models",
        "Speech Recognition",
      ],
    },
  ];

  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 Machine Learning Scientists & Engineers
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Hire our specialized data scientists and ML engineers proficient in
            developing, training, and deploying custom ML models.
          </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.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">
                    <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 ML Developers</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>
  );
};

// Custom ML FAQs
const CustomMLFAQs = () => {
  const faqs = [
    {
      question: "What kind of data do I need for ML model development?",
      answer:
        "The data requirements depend on your specific problem, but generally you need: sufficient quantity (typically thousands to millions of records), relevant features that correlate with your target outcome, clean and consistent data formatting, and historical examples of the outcomes you want to predict. For supervised learning, you need labeled data showing correct answers. We can work with structured data (databases, spreadsheets), unstructured data (text, images, audio), or time-series data. During our initial assessment, we'll evaluate your data quality, identify gaps, and recommend data collection or preprocessing strategies to ensure optimal model performance.",
    },
    {
      question: "How long does it take to build a custom ML model?",
      answer:
        "The timeline varies significantly based on complexity and scope. Simple models (like basic classification or regression) can take 4-8 weeks, while complex models (deep learning, computer vision, or NLP) may require 3-6 months. Factors affecting timeline include: data complexity and volume, model sophistication required, integration requirements, performance targets, and regulatory compliance needs. Our typical process includes 1-2 weeks for data assessment, 2-4 weeks for preprocessing and feature engineering, 2-6 weeks for model development and training, 1-2 weeks for testing and validation, and 1-2 weeks for deployment preparation. We provide detailed timelines during project planning.",
    },
    {
      question: 'What is "model bias" and how do you address it?',
      answer:
        "Model bias occurs when ML models make systematically unfair or inaccurate predictions for certain groups or scenarios, often reflecting biases present in training data or model design. Common types include historical bias (past discrimination in data), representation bias (underrepresented groups in training data), and measurement bias (inconsistent data collection). We address bias through: comprehensive bias auditing and fairness metrics evaluation, diverse and representative training datasets, bias detection algorithms and statistical tests, fair ML techniques like adversarial debiasing, regular model monitoring for bias drift, and transparent documentation of model limitations and recommendations for responsible use.",
    },
    {
      question: "Do you provide ongoing support for the deployed model?",
      answer:
        "Yes, we offer comprehensive post-deployment support and maintenance services. This includes: performance monitoring and alerting systems to track model accuracy and detect drift, regular model retraining with new data to maintain performance, technical support for integration issues and troubleshooting, model updates and improvements based on new requirements, documentation and knowledge transfer to your team, compliance monitoring and audit support, and emergency response for critical model failures. We provide different support tiers ranging from basic monitoring to full managed ML services, allowing you to choose the level of ongoing support that best fits your needs and internal capabilities.",
    },
  ];

  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 CustomMLFinalCTA = () => {
  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">
                <Brain className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Custom ML Excellence
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Unlock Unprecedented Insights with{" "}
            <span className="text-accent">WDI's Custom ML Expertise</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"
          >
            Transform your data into a strategic asset with bespoke Machine
            Learning models designed for your unique challenges.
          </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={() => navigateTo("/start-a-project")}
            >
              <div className="inline-flex items-center gap-3">
                <Brain className="w-6 h-6 flex-shrink-0" />
                <span>Start Your ML Project</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Predictive Analytics • Computer Vision • NLP • Recommendation
              Systems
            </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 Custom ML Model Development Page
export const CustomMLModelDevelopment = () => {
  return (
    <div className="dark min-h-screen">
      <Navigation />

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

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

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

      {/* Services */}
      <section className="bg-background">
        <CustomMLServices />
      </section>

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

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

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

      {/* Hire Developers */}
      <section className="bg-background">
        <HireMLDevelopers />
      </section>

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

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

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