import { motion } from "framer-motion";
import {
  Activity,
  AlertTriangle,
  ArrowRight,
  ArrowUpRight,
  BarChart3,
  Brain,
  Calculator,
  CheckCircle,
  Clock,
  Cloud,
  CloudCog,
  Code,
  Cog,
  Database,
  DollarSign,
  FileText,
  Heart,
  Lightbulb,
  LineChart,
  MessageSquare,
  Monitor,
  PieChart,
  Play,
  Scale,
  Shield,
  Table,
  Target,
  Telescope,
  TrendingUp,
  UserPlus,
  Users,
  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 { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";

// Predictive Analytics & Forecasting Hero Section
const PredictiveAnalyticsHeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Predictive Analytics | Forecasting & AI Insights | WDI</title>
        <meta
          name="description"
          content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting systems."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="Predictive Analytics | Forecasting & AI Insights | WDI"
        />
        <meta
          property="og:description"
          content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting 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="Predictive Analytics | Forecasting & AI Insights | WDI"
        />
        <meta
          name="twitter:description"
          content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting 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"
          >
            {/* Predictive Analytics 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">
                Predictive Analytics & Forecasting Solutions
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Harnessing the power of your data to anticipate future trends,
                predict outcomes, and make proactive, data‑driven business
                decisions with AI‑driven predictive analytics and demand
                forecasting.
              </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">
                  <TrendingUp className="w-5 h-5 flex-shrink-0" />
                  <span>Predict Your Future</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 Predictive Analytics 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"
          >
            {/* Predictive Analytics Dashboard 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 Prediction Dashboard */}
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 0.6 }}
                  className="relative bg-gray-900 rounded-2xl p-6 mx-auto max-w-lg shadow-2xl border border-gray-700"
                >
                  {/* Crystal Ball with Data Points */}
                  <div className="relative flex items-center justify-center mb-8">
                    {/* Crystal Ball */}
                    <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-purple-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-purple-400/20 rounded-full flex items-center justify-center border border-blue-400/30">
                          <TrendingUp className="w-12 h-12 text-blue-300" />
                        </div>
                      </div>

                      {/* Pulsing Rings */}
                      <motion.div
                        animate={{
                          scale: [1, 1.3, 1],
                          opacity: [0.5, 0.1, 0.5],
                        }}
                        transition={{ duration: 4, repeat: Infinity }}
                        className="absolute inset-0 rounded-full bg-blue-400/10 border border-blue-400/20"
                      ></motion.div>
                      <motion.div
                        animate={{
                          scale: [1, 1.5, 1],
                          opacity: [0.3, 0.05, 0.3],
                        }}
                        transition={{ duration: 4, repeat: Infinity, delay: 1 }}
                        className="absolute inset-0 rounded-full bg-purple-400/10 border border-purple-400/20"
                      ></motion.div>
                    </motion.div>

                    {/* Floating Data Points around Crystal Ball */}
                    <div className="absolute inset-0">
                      {[...Array(8)].map((_, i) => {
                        const angle = i * 45 * (Math.PI / 180);
                        const radius = 80;
                        const x = Math.cos(angle) * radius;
                        const y = Math.sin(angle) * radius;

                        const colors = [
                          "bg-blue-400",
                          "bg-green-400",
                          "bg-purple-400",
                          "bg-orange-400",
                          "bg-cyan-400",
                          "bg-pink-400",
                          "bg-yellow-400",
                          "bg-red-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.2 + i * 0.1 }}
                            className="absolute top-1/2 left-1/2"
                            style={{
                              transform: `translate(${x}px, ${y}px)`,
                            }}
                          >
                            <motion.div
                              animate={{
                                y: [0, -15, 0],
                                opacity: [0.3, 1, 0.3],
                                scale: [0.8, 1.2, 0.8],
                              }}
                              transition={{
                                duration: 3,
                                repeat: Infinity,
                                delay: i * 0.4,
                              }}
                              className={`w-3 h-3 ${randomColor} rounded-full shadow-lg`}
                            ></motion.div>
                          </motion.div>
                        );
                      })}
                    </div>
                  </div>

                  {/* Growth Chart extending into future */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 2.0 }}
                    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">
                        <BarChart3 className="w-4 h-4 text-green-400" />
                        <span className="text-green-400 text-xs font-mono">
                          Revenue Forecast
                        </span>
                      </div>
                      <Badge
                        variant="secondary"
                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                      >
                        +34% Growth
                      </Badge>
                    </div>

                    {/* Chart visualization */}
                    <div className="relative h-24 flex items-end justify-between">
                      {/* Historical data bars */}
                      {[40, 55, 48, 72, 68, 85].map((height, i) => (
                        <motion.div
                          key={i}
                          initial={{ height: 0 }}
                          animate={{ height: `${height}%` }}
                          transition={{ duration: 1, delay: 2.2 + i * 0.1 }}
                          className="w-4 bg-blue-500 rounded-t"
                        ></motion.div>
                      ))}

                      {/* Future prediction bars */}
                      {[92, 105, 118, 125].map((height, i) => (
                        <motion.div
                          key={i + 6}
                          initial={{ height: 0 }}
                          animate={{
                            height: `${height > 100 ? 100 : height}%`,
                          }}
                          transition={{ duration: 1, delay: 2.8 + i * 0.1 }}
                          className="w-4 bg-gradient-to-t from-green-500 to-green-300 rounded-t opacity-80 border-2 border-dashed border-green-400"
                        ></motion.div>
                      ))}

                      {/* Prediction line */}
                      <motion.div
                        initial={{ pathLength: 0 }}
                        animate={{ pathLength: 1 }}
                        transition={{ duration: 2, delay: 3.2 }}
                        className="absolute top-0 left-0 w-full h-full"
                      >
                        <svg
                          className="w-full h-full"
                          viewBox="0 0 100 100"
                          preserveAspectRatio="none"
                        >
                          <motion.path
                            d="M5,60 L15,45 L25,52 L35,28 L45,32 L55,15 L65,8 L75,5 L85,2 L95,0"
                            stroke="#10B981"
                            strokeWidth="2"
                            fill="none"
                            strokeDasharray="5,5"
                            animate={{ strokeDashoffset: [0, -10] }}
                            transition={{
                              duration: 2,
                              repeat: Infinity,
                              ease: "linear",
                            }}
                          />
                        </svg>
                      </motion.div>
                    </div>

                    <div className="flex justify-between text-xs text-gray-400 mt-2">
                      <span>Historical</span>
                      <span className="text-green-400">Predicted</span>
                    </div>
                  </motion.div>

                  {/* Prediction Metrics */}
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 3.4 }}
                    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">
                        89.2%
                      </div>
                      <div className="text-white text-xs">Accuracy</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">
                        +34%
                      </div>
                      <div className="text-white text-xs">Growth</div>
                    </div>
                  </motion.div>
                </motion.div>

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

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

                {/* Prediction Confidence Indicator */}
                <motion.div
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.6, delay: 4.0 }}
                  className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
                >
                  <div className="w-16 h-16 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-sm font-bold">
                        High
                      </div>
                      <div className="text-blue-300 text-xs">Confidence</div>
                    </div>
                  </div>
                </motion.div>
              </motion.div>

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

// Key Benefits of Predictive Analytics
const PredictiveAnalyticsBenefits = () => {
  const benefits = [
    {
      icon: Target,
      title: "Proactive Decision Making",
      description: "Act before trends fully materialize.",
    },
    {
      icon: Shield,
      title: "Risk Mitigation",
      description: "Identify potential issues like churn or fraud early.",
    },
    {
      icon: Scale,
      title: "Optimized Resource Allocation",
      description: "Forecast demand, inventory, staffing needs accurately.",
    },
    {
      icon: Heart,
      title: "Personalized Customer Experiences",
      description: "Predict preferences and offer tailored solutions.",
    },
    {
      icon: Zap,
      title: "Increased Efficiency",
      description: "Automate forecasting and reduce guesswork.",
    },
  ];

  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">
            Gain a Competitive Edge with Future Insights
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Leverage AI‑driven predictive analytics and demand forecasting to
            anticipate market shifts, optimize decisions, and stay ahead of the
            competition.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {benefits.slice(0, 3).map((benefit, index) => {
            const IconComponent = benefit.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Second row with remaining benefits */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
        >
          {benefits.slice(3).map((benefit, index) => {
            const IconComponent = benefit.icon;
            return (
              <motion.div
                key={index + 3}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
                  <CardContent className="p-8 text-center">
                    <div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
                      <IconComponent className="w-8 h-8 text-accent" />
                    </div>
                    <h3 className="text-xl font-semibold text-foreground mb-4">
                      {benefit.title}
                    </h3>
                    <p className="text-muted-foreground leading-relaxed">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            );
          })}
        </motion.div>
      </div>
    </section>
  );
};

// Predictive Analytics Process
const PredictiveAnalyticsProcess = () => {
  const steps = [
    {
      title: "Business Goal Definition",
      description:
        "Identifying specific business objectives and defining what outcomes need to be predicted to drive strategic decisions.",
      icon: Target,
    },
    {
      title: "Data Collection & Preparation",
      description:
        "Gathering relevant historical data from multiple sources and ensuring data quality, completeness, and consistency.",
      icon: Database,
    },
    {
      title: "Feature Engineering",
      description:
        "Creating meaningful variables and transforming raw data into features that enhance model predictive performance.",
      icon: Wrench,
    },
    {
      title: "Model Selection & Training",
      description:
        "Selecting appropriate algorithms and training multiple models to identify the best approach for your specific use case.",
      icon: Brain,
    },
    {
      title: "Validation & Evaluation",
      description:
        "Rigorously testing model accuracy, reliability, and performance using statistical validation and cross-validation techniques.",
      icon: CheckCircle,
    },
    {
      title: "Deployment & Visualization",
      description:
        "Implementing models in production environments and creating intuitive dashboards for stakeholder consumption.",
      icon: Monitor,
    },
    {
      title: "Monitoring & Refinement",
      description:
        "Continuously tracking model performance and updating predictions based on new data and changing business conditions.",
      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 Forecasting Future Outcomes
          </h2>

          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            A structured, data‑driven strategy that uses predictive analytics
            and advanced forecasting models to anticipate future trends and
            guide proactive, high‑impact business decisions.
          </p>
        </motion.div>

        <div className="relative">
          {/* Timeline line */}
          <div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>

          <div className="space-y-16">
            {steps.map((step, index) => {
              const IconComponent = step.icon;
              const isEven = index % 2 === 0;

              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, x: isEven ? -50 : 50 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  transition={{ duration: 0.8, delay: index * 0.2 }}
                  viewport={{ once: true }}
                  className={`flex items-center ${
                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
                  } flex-col lg:gap-16 gap-8`}
                >
                  <div
                    className={`flex-1 ${
                      isEven ? "lg:text-right" : "lg:text-left"
                    } text-center lg:text-left`}
                  >
                    <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                      <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                        <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                          <IconComponent className="w-6 h-6 text-accent" />
                        </div>
                        <div className="text-2xl font-bold text-accent">
                          0{index + 1}
                        </div>
                      </div>
                      <h3 className="text-2xl font-semibold text-white mb-4">
                        {step.title}
                      </h3>
                      <p className="text-gray-300 leading-relaxed">
                        {step.description}
                      </p>
                    </div>
                  </div>

                  {/* Timeline dot */}
                  <div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>

                  <div className="flex-1 hidden lg:block"></div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

// Predictive Analytics Services
const PredictiveAnalyticsServices = () => {
  const services = [
    {
      title: "Customer Churn Prediction",
      description: "Identifying at-risk customers to improve retention.",
      icon: Users,
      features: [
        "Churn Risk Scoring",
        "Retention Strategies",
        "Customer Segmentation",
        "Lifecycle Analysis",
      ],
    },
    {
      title: "Demand & Sales Forecasting",
      description: "Optimizing inventory, production, and marketing.",
      icon: TrendingUp,
      features: [
        "Sales Forecasting",
        "Inventory Optimization",
        "Demand Planning",
        "Market Trends",
      ],
    },
    {
      title: "Fraud Detection",
      description:
        "Identifying suspicious patterns in transactions or behavior.",
      icon: Shield,
      features: [
        "Anomaly Detection",
        "Real-time Monitoring",
        "Risk Assessment",
        "Pattern Recognition",
      ],
    },
    {
      title: "Risk Assessment Models",
      description:
        "Evaluating credit risk, loan defaults, investment potential.",
      icon: AlertTriangle,
      features: [
        "Credit Scoring",
        "Default Prediction",
        "Investment Risk",
        "Portfolio Analysis",
      ],
    },
    {
      title: "Predictive Maintenance",
      description: "Forecasting equipment failures to prevent downtime.",
      icon: Wrench,
      features: [
        "Failure Prediction",
        "Maintenance Scheduling",
        "Asset Optimization",
        "Downtime Prevention",
      ],
    },
    {
      title: "Customer Lifetime Value (CLTV) Prediction",
      description: "Estimating future revenue from customers.",
      icon: DollarSign,
      features: [
        "Revenue Forecasting",
        "Customer Segmentation",
        "Value Optimization",
        "Growth Prediction",
      ],
    },
    {
      title: "Personalized Recommendation Systems",
      description: "Suggesting products/content based on past behavior.",
      icon: Target,
      features: [
        "Product Recommendations",
        "Content Personalization",
        "Behavioral Analysis",
        "Cross-selling",
      ],
    },
    {
      title: "Resource Optimization",
      description: "Predicting staffing, energy, or resource needs.",
      icon: Scale,
      features: [
        "Capacity Planning",
        "Resource Allocation",
        "Cost Optimization",
        "Efficiency 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 Predictive Analytics Capabilities
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Tailored predictive analytics services that use advanced forecasting
            models and data‑driven insights to anticipate trends, optimize
            decisions, and create measurable business impact.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"
        >
          {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"
              >
                <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 Features:
                      </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>
  );
};

// Predictive Analytics Tech Stack
const PredictiveAnalyticsTechStack = () => {
  const technologies = [
    { name: "Python", icon: Code, category: "Programming", color: "blue" },
    {
      name: "R",
      icon: BarChart3,
      category: "Statistical Computing",
      color: "blue",
    },
    {
      name: "TensorFlow",
      icon: Brain,
      category: "Machine Learning",
      color: "orange",
    },
    {
      name: "PyTorch",
      icon: Brain,
      category: "Deep Learning",
      color: "orange",
    },
    {
      name: "Scikit-learn",
      icon: Cog,
      category: "ML Library",
      color: "orange",
    },
    {
      name: "Prophet",
      icon: TrendingUp,
      category: "Forecasting",
      color: "blue",
    },
    { name: "ARIMA", icon: LineChart, category: "Time Series", color: "green" },
    {
      name: "XGBoost",
      icon: Zap,
      category: "Gradient Boosting",
      color: "green",
    },
    {
      name: "Pandas",
      icon: Table,
      category: "Data Manipulation",
      color: "blue",
    },
    {
      name: "NumPy",
      icon: Calculator,
      category: "Numerical Computing",
      color: "blue",
    },
    {
      name: "Tableau",
      icon: BarChart3,
      category: "Visualization",
      color: "orange",
    },
    {
      name: "Power BI",
      icon: PieChart,
      category: "Business Intelligence",
      color: "yellow",
    },
    {
      name: "AWS Redshift",
      icon: CloudCog,
      category: "Data Warehouse",
      color: "orange",
    },
    {
      name: "Google BigQuery",
      icon: Database,
      category: "Analytics Database",
      color: "green",
    },
    {
      name: "Azure Synapse",
      icon: Cloud,
      category: "Analytics Platform",
      color: "blue",
    },
  ];

  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">
            Predictive Analytics Tech Stack
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Utilizing powerful tools and modern predictive analytics platforms
            for accurate data analysis, modeling, and demand forecasting at
            scale.
          </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-5 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",
              yellow: "bg-yellow-500/20 text-yellow-400 border-yellow-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>
  );
};

// Predictive Analytics Case Studies
const PredictiveAnalyticsCaseStudies = () => {
  const caseStudies = [
    {
      title: "Customer Churn Prediction Model",
      client: "Telecommunications Company",
      description:
        "Implemented predictive churn model identifying at-risk customers with 92% accuracy, enabling proactive retention campaigns that reduced churn by 35% and increased customer lifetime value by $2.4M annually.",
      image:
        "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
      results: "92% prediction accuracy, 35% churn reduction",
      engagement: "4-month predictive analytics project",
      gradient: "from-blue-500/20 to-cyan-500/20",
    },
    {
      title: "Sales Forecasting System",
      client: "Retail Chain Enterprise",
      description:
        "Built comprehensive sales forecasting system across 500+ locations, improving forecast accuracy by 78% and optimizing inventory management, resulting in 25% reduction in stockouts and 20% inventory cost savings.",
      image:
        "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
      results: "78% forecast improvement, 25% stockout reduction",
      engagement: "6-month forecasting implementation",
      gradient: "from-green-500/20 to-emerald-500/20",
    },
    {
      title: "Predictive Maintenance Platform",
      client: "Manufacturing Corporation",
      description:
        "Developed IoT-based predictive maintenance system for industrial equipment, achieving 88% accuracy in failure prediction and reducing unplanned downtime by 60%, saving $5.2M in maintenance costs.",
      image:
        "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=400&h=300&fit=crop&auto=format",
      results: "88% failure prediction, 60% downtime reduction",
      engagement: "8-month predictive maintenance 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">
            Predictive Insights Driving Business Success
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Actionable predictive insights that anticipate trends, optimize
            decisions, and power AI‑driven forecasting to accelerate growth and
            business success.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {caseStudies.map((study, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.01 }}
              viewport={{ once: true }}
              whileHover={{ y: -8, scale: 1.02 }}
              className="group cursor-pointer"
            >
              <Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
                <CardContent className="p-0 flex flex-col h-full">
                  <div className="p-8 pb-6">
                    <div className="flex items-start gap-4 mb-6">
                      <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                        <TrendingUp 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 PredictiveAnalyticsInlineCTA = () => {
  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">
                <TrendingUp className="w-5 h-5 text-white" />
                <span className="text-white text-base font-medium">
                  Predictive Analytics
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
              Ready to Make Smarter,{" "}
              <span className="text-accent">Future-Oriented Decisions?</span>
            </h2>

            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
              Unlock the power of your data to anticipate trends and drive
              proactive, AI‑driven decision‑making strategies that create
              measurable business value.
            </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 Predictive Analytics Consultation</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Hire Predictive Analytics Specialists
const HirePredictiveAnalyticsSpecialists = () => {
  const specialistTypes = [
    {
      title: "Data Scientists",
      description:
        "Experts in statistical modeling, machine learning, and business intelligence for advanced forecasting",
      icon: BarChart3,
      skills: [
        "Statistical Modeling",
        "Predictive Modeling",
        "Data Mining",
        "Forecasting Algorithms",
      ],
    },
    {
      title: "Machine Learning Engineers",
      description:
        "Specialists in building and deploying predictive models at scale",
      icon: Brain,
      skills: [
        "ML Model Development",
        "Feature Engineering",
        "Model Optimization",
        "Production Deployment",
      ],
    },
    {
      title: "Business Intelligence Analysts",
      description:
        "Experts in translating data insights into actionable business strategies",
      icon: Lightbulb,
      skills: [
        "Business Analysis",
        "Data Visualization",
        "KPI Development",
        "Strategic Planning",
      ],
    },
    {
      title: "Time Series Analysts",
      description: "Specialists in forecasting and temporal data analysis",
      icon: LineChart,
      skills: [
        "Time Series Modeling",
        "Trend Analysis",
        "Seasonal Forecasting",
        "ARIMA/Prophet",
      ],
    },
    {
      title: "Risk Analytics Specialists",
      description: "Experts in risk assessment and predictive risk modeling",
      icon: Shield,
      skills: [
        "Risk Modeling",
        "Credit Scoring",
        "Fraud Detection",
        "Compliance Analytics",
      ],
    },
    {
      title: "Visualization Engineers",
      description:
        "Specialists in creating interactive dashboards and data visualizations",
      icon: Monitor,
      skills: [
        "Dashboard Development",
        "Data Visualization",
        "Interactive Reports",
        "BI Tools",
      ],
    },
  ];

  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 Predictive Analytics & Data Scientists
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Hire our specialists in statistical modeling, machine learning, and
            business intelligence to build advanced predictive analytics models
            and drive accurate, data‑driven forecasting.
          </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 Data Scientists</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>
  );
};

// Predictive Analytics FAQs
const PredictiveAnalyticsFAQs = () => {
  const faqs = [
    {
      question: "What data is needed for accurate predictive models?",
      answer:
        "Accurate predictive models require enough historical data typically 2–5 years to capture meaningful patterns, along with relevant features that influence the outcome and clean, consistent data quality. You also need adequate volume (thousands to millions of records depending on complexity).\n\nKey data types include transactional data, customer behavior data, external factors like seasonality and economic indicators, and clear outcome variables. We work with structured data (databases, spreadsheets), semi-structured data (logs, JSON), and unstructured data (text, images). During our initial data audit, we check completeness, accuracy, consistency, and relevance because data quality matters more than quantity in predictive analytics.",
    },
    {
      question: "How accurate are predictive forecasts?",
      answer:
        "The accuracy of predictive forecasts depends on the use case, data quality, and model complexity, but we typically achieve 85–95% accuracy for well-defined problems with good data. Accuracy is influenced by how complete and clean the data is, the choice and tuning of the model, external market conditions, and how far ahead the forecast looks (short-term predictions are usually more reliable).\n\nWe provide confidence intervals and uncertainty measures with every forecast, continuously monitor performance, use ensemble methods, and retrain models as new data arrives. We’re transparent about limitations so you can trust and act confidently on your predictive analytics insights.",
    },
    {
      question: "Which industries benefit most from predictive analytics?",
      answer:
        "Predictive analytics delivers value across almost every sector, with especially strong results in retail & e-commerce (demand forecasting, customer churn, personalization), financial services (credit risk, fraud detection, investment analysis), healthcare (patient outcomes, resource planning), manufacturing (predictive maintenance, supply chain), telecommunications (network optimization, customer retention), energy & utilities (demand forecasting, asset management), and transportation & logistics (route optimization, demand prediction).\n\nWhat matters most is having accessible, usable data and clear business objectives—not the industry itself. That’s why even niche or complex sectors can gain measurable advantages from predictive analytics.",
    },
    {
      question: "Can predictive models be integrated into existing dashboards?",
      answer:
        "Yes. Our predictive models integrate smoothly into existing dashboards and reporting tools. We support major platforms such as Tableau, Power BI, and Qlik through APIs and standard data connectors, plus custom web dashboards with real-time prediction updates.\n\nWe can also deliver predictions into Excel, Google Sheets, CRM systems (Salesforce, HubSpot), ERP systems, and cloud analytics tools. Using REST APIs, scheduled refreshes, and real-time streaming, we ensure predictions appear in an intuitive, actionable format inside your predictive analytics dashboards so decision-makers can act quickly on insights.",
    },
  ];

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

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Predict the Future, Shape Your Success{" "}
            <span className="text-accent">with WDI</span>
          </h2>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            viewport={{ once: true }}
            className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
          >
            Leverage our predictive analytics expertise to gain foresight,
            reduce risk, and optimize your business operations.
          </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">
                <Telescope className="w-6 h-6 flex-shrink-0" />
                <span>Discover Your Predictive Power</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Sales Forecasting • Customer Analytics • Risk Prediction • Demand
              Planning
            </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 Predictive Analytics & Forecasting Page
export const PredictiveAnalyticsForecasting = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

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

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

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

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

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

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

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

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

      {/* Hire Specialists */}
      <section className="bg-background">
        <HirePredictiveAnalyticsSpecialists />
      </section>

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

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

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