import { motion } from "framer-motion";
import {
  ArrowRight,
  BarChart3,
  BookOpen,
  Brain,
  Clock,
  Cloud,
  CloudCog,
  Code,
  Cog,
  Database,
  Edit3,
  FileText,
  Filter,
  Grid,
  Headphones,
  Languages,
  Lightbulb,
  MessageSquare,
  Microscope,
  Play,
  RefreshCw,
  Rocket,
  Search,
  Settings,
  Shield,
  Sparkles,
  Tag,
  Target,
  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 { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import { AIStrategyTargetAudience } from "./AIStrategyConsulting";

// NLP & Text Analytics Hero Section
const NLPHeroWithCTA = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>
          NLP & Text Analytics | Language AI & Text Intelligence | WDI
        </title>
        <meta
          name="description"
          content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
        />

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

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta
          property="og:title"
          content="NLP & Text Analytics | Language AI & Text Intelligence | WDI"
        />
        <meta
          property="og:description"
          content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
        />
        <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="NLP & Text Analytics | Language AI & Text Intelligence | WDI"
        />
        <meta
          name="twitter:description"
          content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
        />
        <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"
          >
            {/* NLP 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">
                Natural Language Processing (NLP) & Text Analytics
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Extract meaningful insights from unstructured text to power
                AI‑driven app development services and informed 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={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <FileText className="w-5 h-5 flex-shrink-0" />
                  <span>Analyze Your Text Data</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 NLP 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"
          >
            {/* NLP Text Analysis 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 NLP 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-8 mx-auto max-w-lg shadow-2xl border border-gray-700"
                >
                  {/* Word Cloud Visualization */}
                  <div className="relative flex items-center justify-center mb-8">
                    {/* Central Word Cloud */}
                    <motion.div
                      initial={{ opacity: 0, scale: 0 }}
                      animate={{ opacity: 1, scale: 1 }}
                      transition={{ duration: 0.8, delay: 1.0 }}
                      className="relative z-10 text-center"
                    >
                      <div className="space-y-4">
                        {/* Floating Words with different sizes */}
                        <motion.div
                          initial={{ opacity: 0, y: 20 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ duration: 0.8, delay: 1.2 }}
                          className="text-2xl font-bold text-blue-400"
                        >
                          sentiment
                        </motion.div>

                        <div className="flex justify-center gap-4 items-center">
                          <motion.span
                            initial={{ opacity: 0, x: -20 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ duration: 0.8, delay: 1.4 }}
                            className="text-lg text-green-400 font-medium"
                          >
                            positive
                          </motion.span>
                          <motion.span
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.8, delay: 1.6 }}
                            className="text-3xl font-bold text-white"
                          >
                            analysis
                          </motion.span>
                          <motion.span
                            initial={{ opacity: 0, x: 20 }}
                            animate={{ opacity: 1, x: 0 }}
                            transition={{ duration: 0.8, delay: 1.8 }}
                            className="text-sm text-yellow-400"
                          >
                            insights
                          </motion.span>
                        </div>

                        <div className="flex justify-center gap-2 items-center">
                          <motion.span
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.8, delay: 2.0 }}
                            className="text-xs text-purple-400"
                          >
                            entity
                          </motion.span>
                          <motion.span
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.8, delay: 2.2 }}
                            className="text-lg text-cyan-400 font-medium"
                          >
                            classification
                          </motion.span>
                          <motion.span
                            initial={{ opacity: 0, y: -20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ duration: 0.8, delay: 2.4 }}
                            className="text-xs text-orange-400"
                          >
                            text
                          </motion.span>
                        </div>

                        <motion.div
                          initial={{ opacity: 0, y: 20 }}
                          animate={{ opacity: 1, y: 0 }}
                          transition={{ duration: 0.8, delay: 2.6 }}
                          className="text-sm text-red-400"
                        >
                          processing
                        </motion.div>
                      </div>

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

                    {/* Floating Text Bubbles */}
                    <div className="absolute inset-0">
                      {[...Array(6)].map((_, i) => {
                        const positions = [
                          { top: "10%", left: "10%" },
                          { top: "15%", right: "15%" },
                          { top: "85%", left: "20%" },
                          { top: "80%", right: "10%" },
                          { top: "50%", left: "5%" },
                          { top: "45%", right: "5%" },
                        ];

                        const texts = ["😊", "📊", "🔍", "💡", "📝", "🎯"];

                        return (
                          <motion.div
                            key={i}
                            initial={{ opacity: 0, scale: 0 }}
                            animate={{ opacity: 1, scale: 1 }}
                            transition={{ duration: 0.5, delay: 2.8 + i * 0.1 }}
                            className="absolute"
                            style={positions[i]}
                          >
                            <motion.div
                              animate={{
                                y: [0, -10, 0],
                                opacity: [0.7, 1, 0.7],
                              }}
                              transition={{
                                duration: 3,
                                repeat: Infinity,
                                delay: i * 0.5,
                              }}
                              className="w-8 h-8 bg-gray-800/80 rounded-lg flex items-center justify-center text-sm shadow-lg border border-gray-600"
                            >
                              {texts[i]}
                            </motion.div>
                          </motion.div>
                        );
                      })}
                    </div>
                  </div>

                  {/* Sentiment Analysis Interface */}
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 3.4 }}
                    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-blue-400" />
                        <span className="text-blue-400 text-xs font-mono">
                          Sentiment Analysis
                        </span>
                      </div>
                      <Badge
                        variant="secondary"
                        className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                      >
                        Real-time
                      </Badge>
                    </div>

                    {/* Sentiment Results */}
                    <div className="space-y-2">
                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "75%" }}
                        transition={{ duration: 1, delay: 3.6 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-green-400 rounded-full"></div>
                          <span className="text-green-300 text-xs">
                            Positive
                          </span>
                        </div>
                        <span className="text-green-300 text-xs font-mono">
                          75%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "15%" }}
                        transition={{ duration: 1, delay: 3.8 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-yellow-400 rounded-full"></div>
                          <span className="text-yellow-300 text-xs">
                            Neutral
                          </span>
                        </div>
                        <span className="text-yellow-300 text-xs font-mono">
                          15%
                        </span>
                      </motion.div>

                      <motion.div
                        initial={{ opacity: 0, width: 0 }}
                        animate={{ opacity: 1, width: "10%" }}
                        transition={{ duration: 1, delay: 4.0 }}
                        className="flex items-center justify-between"
                      >
                        <div className="flex items-center gap-2">
                          <div className="w-2 h-2 bg-red-400 rounded-full"></div>
                          <span className="text-red-300 text-xs">Negative</span>
                        </div>
                        <span className="text-red-300 text-xs font-mono">
                          10%
                        </span>
                      </motion.div>
                    </div>
                  </motion.div>

                  {/* Processing Metrics */}
                  <motion.div
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: 4.2 }}
                    className="grid grid-cols-2 gap-3"
                  >
                    <div className="p-3 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg border border-purple-500/30">
                      <div className="text-purple-400 text-lg font-bold">
                        12.5K
                      </div>
                      <div className="text-white text-xs">Texts/min</div>
                    </div>
                    <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">
                        97.3%
                      </div>
                      <div className="text-white text-xs">Accuracy</div>
                    </div>
                  </motion.div>
                </motion.div>

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

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

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

              {/* NLP Features */}
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 5.0 }}
                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"
                >
                  <FileText className="w-3 h-3 mr-1" />
                  Text Analysis
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <BarChart3 className="w-3 h-3 mr-1" />
                  Sentiment
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Languages className="w-3 h-3 mr-1" />
                  Multi-Language
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Key Benefits of NLP & Text Analytics
const NLPBenefits = () => {
  const benefits = [
    {
      icon: Search,
      title: "Automated Information Extraction",
      description: "Quickly pull key data from vast text volumes.",
    },
    {
      icon: BarChart3,
      title: "Sentiment Analysis",
      description: "Understand customer emotions from reviews, social media.",
    },
    {
      icon: Headphones,
      title: "Enhanced Customer Service",
      description:
        "Intelligent routing, automated responses from text queries.",
    },
    {
      icon: Lightbulb,
      title: "Improved Decision Making",
      description: "Gain actionable insights from unstructured data.",
    },
    {
      icon: FileText,
      title: "Content Generation & Summarization",
      description: "Automate creation or distillation of text.",
    },
  ];

  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">
            Unlock Insights from Your Textual Data
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Transform unstructured text into actionable intelligence for AI
            mobile and web development 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 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>
  );
};

// NLP Process
const NLPProcess = () => {
  const steps = [
    {
      title: "Data Collection & Preprocessing",
      description:
        "Gathering text data from various sources and cleaning, tokenizing, and preparing it for analysis.",
      icon: Database,
    },
    {
      title: "Feature Engineering & Representation",
      description:
        "Converting text into numerical representations using techniques like TF-IDF, word embeddings, or transformer models.",
      icon: Wrench,
    },
    {
      title: "Model Training (Classification, Clustering, etc.)",
      description:
        "Training specialized NLP models for specific tasks like sentiment analysis, classification, or entity recognition.",
      icon: Brain,
    },
    {
      title: "Evaluation & Tuning",
      description:
        "Testing model performance using metrics like accuracy, precision, recall, and F1-score, then fine-tuning for optimal results.",
      icon: Settings,
    },
    {
      title: "Deployment & Integration",
      description:
        "Implementing NLP models in production environments and integrating with existing systems and workflows.",
      icon: Rocket,
    },
    {
      title: "Continuous Learning & Optimization",
      description:
        "Monitoring model performance and continuously improving accuracy through feedback loops and new data incorporation.",
      icon: RefreshCw,
    },
  ];

  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 Comprehensive Approach to Text Intelligence
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            A structured, AI‑driven strategy that turns unstructured text into
            actionable insights for AI‑powered mobile and web applications.
          </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>
  );
};

// NLP Services
const NLPServices = () => {
  const services = [
    {
      title: "Sentiment Analysis",
      description:
        "Determining emotional tone from text (reviews, social media).",
      icon: BarChart3,
      features: [
        "Emotion Detection",
        "Opinion Mining",
        "Rating Prediction",
        "Brand Monitoring",
      ],
    },
    {
      title: "Named Entity Recognition (NER)",
      description: "Identifying key entities (people, places, organizations).",
      icon: Tag,
      features: [
        "Entity Extraction",
        "Relationship Mapping",
        "Data Anonymization",
        "Knowledge Graphs",
      ],
    },
    {
      title: "Text Classification & Categorization",
      description: "Automatically tagging and organizing documents.",
      icon: Filter,
      features: [
        "Document Classification",
        "Content Tagging",
        "Spam Detection",
        "Topic Assignment",
      ],
    },
    {
      title: "Topic Modeling",
      description: "Discovering themes and topics in large text corpora.",
      icon: Grid,
      features: [
        "Theme Discovery",
        "Content Analysis",
        "Trend Identification",
        "Document Clustering",
      ],
    },
    {
      title: "Text Summarization",
      description: "Condensing long documents into concise summaries.",
      icon: FileText,
      features: [
        "Extractive Summary",
        "Abstractive Summary",
        "Key Points",
        "Multi-document",
      ],
    },
    {
      title: "Natural Language Generation (NLG)",
      description: "Automatically generating human-like text.",
      icon: Edit3,
      features: [
        "Content Creation",
        "Report Generation",
        "Chatbot Responses",
        "Personalization",
      ],
    },
    {
      title: "Spam Detection & Content Moderation",
      description: "Filtering unwanted or harmful text.",
      icon: Shield,
      features: [
        "Spam Filtering",
        "Toxicity Detection",
        "Content Safety",
        "Automated Moderation",
      ],
    },
    {
      title: "Search Enhancement",
      description: "Improving relevance for natural language queries.",
      icon: Search,
      features: [
        "Query Understanding",
        "Semantic Search",
        "Relevance Scoring",
        "Auto-complete",
      ],
    },
    {
      title: "Generative AI for Text",
      description:
        "Leveraging LLMs for advanced content creation and interaction.",
      icon: Sparkles,
      features: [
        "Content Generation",
        "Prompt Engineering",
        "Fine-tuning",
        "Custom LLMs",
      ],
    },
  ];

  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 NLP & Text Analytics Solutions
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Tailored NLP and text‑analytics solutions that deliver AI‑driven app
            development services across mobile and web platforms.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          viewport={{ once: true }}
          className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {services.map((service, index) => {
            const IconComponent = service.icon;
            return (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: index * 0.01 }}
                viewport={{ once: true }}
                whileHover={{ y: -5 }}
                className="group"
              >
                <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>
  );
};

// NLP Tech Stack
const NLPTechStack = () => {
  const technologies = [
    { name: "Python", icon: Code, category: "Programming", color: "blue" },
    { name: "NLTK", icon: BookOpen, category: "NLP Library", color: "green" },
    { name: "spaCy", icon: Zap, category: "NLP Library", color: "blue" },
    {
      name: "scikit-learn",
      icon: Cog,
      category: "ML Library",
      color: "orange",
    },
    {
      name: "TensorFlow",
      icon: Brain,
      category: "Deep Learning",
      color: "orange",
    },
    { name: "PyTorch", icon: Brain, category: "Deep Learning", color: "red" },
    {
      name: "Hugging Face Transformers",
      icon: Sparkles,
      category: "Transformers",
      color: "yellow",
    },
    {
      name: "GPT",
      icon: MessageSquare,
      category: "Language Model",
      color: "green",
    },
    { name: "BERT", icon: Search, category: "Language Model", color: "blue" },
    {
      name: "RoBERTa",
      icon: Target,
      category: "Language Model",
      color: "purple",
    },
    {
      name: "AWS Comprehend",
      icon: CloudCog,
      category: "Cloud NLP API",
      color: "orange",
    },
    {
      name: "Google Natural Language AI",
      icon: Cloud,
      category: "Cloud NLP API",
      color: "blue",
    },
    {
      name: "Azure Text Analytics",
      icon: CloudCog,
      category: "Cloud NLP API",
      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">
            NLP & Text Analytics Tech Stack
          </h2>
          <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
            Leveraging cutting‑edge NLP libraries and deep learning models to
            power AI mobile and web development 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",
              purple: "bg-purple-500/20 text-purple-400 border-purple-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>
  );
};

// NLP Case Studies
const NLPCaseStudies = () => {
  const caseStudies = [
    {
      title: "Customer Sentiment Analysis Platform",
      client: "E-commerce Enterprise",
      description:
        "Built comprehensive sentiment analysis system processing 50K+ customer reviews daily, achieving 94% accuracy in sentiment classification and enabling proactive customer service responses that improved satisfaction by 32%.",
      image:
        "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
      results: "94% sentiment accuracy, 32% satisfaction increase",
      engagement: "4-month sentiment analysis project",
      gradient: "from-blue-500/20 to-cyan-500/20",
    },
    {
      title: "Document Classification System",
      client: "Legal Services Firm",
      description:
        "Developed automated document classification system for legal documents, processing 10K+ documents daily with 96% accuracy, reducing manual review time by 75% and improving case preparation efficiency.",
      image:
        "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop&auto=format",
      results: "96% classification accuracy, 75% time reduction",
      engagement: "6-month document processing project",
      gradient: "from-green-500/20 to-emerald-500/20",
    },
    {
      title: "Intelligent Content Moderation",
      client: "Social Media Platform",
      description:
        "Implemented real-time content moderation system using advanced NLP to detect toxic content, spam, and policy violations across multiple languages, reducing harmful content exposure by 88% while maintaining user engagement.",
      image:
        "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop&auto=format",
      results: "88% harmful content reduction, multi-language support",
      engagement: "8-month content moderation 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">
            Text Analytics Driving Business Intelligence
          </h2>
          <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
            Transform unstructured text into structured signals that power AI
            mobile and web development solutions and smarter business decisions.
          </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">
                        <FileText 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 NLPInlineCTA = () => {
  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">
                <FileText className="w-5 h-5 text-white" />
                <span className="text-white text-base font-medium">
                  NLP & Text Analytics
                </span>
              </div>
            </div>

            <h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
              Unlock the Hidden Value{" "}
              <span className="text-accent">in Your Text Data</span>
            </h2>

            <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
              Transform unstructured text into actionable insights and AI‑driven
              app development services.
            </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 NLP Consultation</span>
              </div>
            </ShimmerButton>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

// Hire NLP Engineers
const HireNLPEngineers = () => {
  const specialistTypes = [
    {
      title: "NLP Engineers",
      description:
        "Specialists in natural language processing, text mining, and conversational AI for your data-driven projects",
      icon: FileText,
      skills: [
        "Text Processing",
        "Feature Engineering",
        "Model Development",
        "Pipeline Design",
      ],
    },
    {
      title: "Computational Linguists",
      description:
        "Experts in language structure, syntax, and semantics for advanced NLP applications",
      icon: Languages,
      skills: [
        "Linguistic Analysis",
        "Grammar Modeling",
        "Phonetics",
        "Semantic Analysis",
      ],
    },
    {
      title: "Data Scientists (NLP Focus)",
      description:
        "Data scientists specialized in extracting insights from textual data",
      icon: BarChart3,
      skills: [
        "Statistical Analysis",
        "Text Mining",
        "Sentiment Analysis",
        "Topic Modeling",
      ],
    },
    {
      title: "ML Engineers (NLP)",
      description:
        "Machine learning engineers focused on deploying and scaling NLP models",
      icon: Brain,
      skills: [
        "Model Deployment",
        "MLOps",
        "Performance Optimization",
        "Production Systems",
      ],
    },
    {
      title: "Conversation AI Specialists",
      description:
        "Experts in building chatbots, virtual assistants, and dialogue systems",
      icon: MessageSquare,
      skills: [
        "Dialogue Management",
        "Intent Recognition",
        "Response Generation",
        "Context Handling",
      ],
    },
    {
      title: "Research Scientists (NLP)",
      description:
        "Advanced researchers developing cutting-edge NLP techniques and models",
      icon: Microscope,
      skills: [
        "Research & Development",
        "Algorithm Innovation",
        "Publication",
        "Model Architecture",
      ],
    },
  ];

  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 NLP Talent
          </h2>
          <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
            Hire specialists in natural language processing, text mining, and
            conversational AI to power AI mobile and web development 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 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 NLP Experts</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>
  );
};

// NLP FAQs
const NLPFAQs = () => {
  const faqs = [
    {
      question: "What types of text data can be analyzed?",
      answer:
        "Our NLP solutions can analyze customer reviews, feedback, social media posts, emails, support tickets, documents, reports, surveys, news articles, legal documents, medical records, chat logs, product descriptions, and web content. We handle structured, semi-structured, and unstructured text across multiple languages and sources, supporting AI-driven app development services and data-driven workflows.",
    },
    {
      question: "How accurate is sentiment analysis?",
      answer:
        "Sentiment analysis accuracy typically falls in the 85–95% range for general classification, depending on text quality, domain, language, and model training.\n\nWe provide confidence scores, fine-tune models for specific industries, and support binary, multi-class, and aspect-based sentiment, plus emotion detection and sarcasm handling. Our models keep improving via active learning and domain adaptation for consistent AI-powered insights.",
    },
    {
      question: "Can NLP be used for multiple languages?",
      answer:
        "Yes. Our NLP solutions support multilingual processing across 50+ languages, including English, Spanish, French, German, Chinese, Japanese, Arabic, Hindi, Portuguese, and more.\n\nWe combine cross-lingual and language-specific models, automatic language detection, real-time translation, and multilingual entity recognition and sentiment analysis. This capability powers AI mobile and web development solutions that serve global audiences and diverse linguistic contexts.",
    },
    {
      question: "What is “prompt engineering” in the context of NLP?",
      answer:
        "Prompt engineering is designing and optimizing text prompts to get the best outputs from large language models (LLMs). It involves crafting clear instructions, few-shot examples, and structured formats for tasks like classification, generation, or extraction.\n\nOur team optimizes prompts for business use cases, ensuring consistent, high-quality responses from LLMs while minimizing cost and latency for AI-powered applications.",
    },
  ];

  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 NLPFinalCTA = () => {
  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">
                <FileText className="w-5 h-5 text-foreground" />
                <span className="text-foreground text-base font-medium">
                  Text Intelligence
                </span>
              </div>
            </div>
          </motion.div>

          <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
            Understand Your World Better with{" "}
            <span className="text-accent">WDI's NLP 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"
          >
            Leverage the power of Natural Language Processing to extract
            insights, automate tasks, and create AI‑driven app development
            services across mobile and web platforms.
          </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">
                <Search className="w-6 h-6 flex-shrink-0" />
                <span>Analyze Your Text Data</span>
              </div>
            </ShimmerButton>

            <p className="text-muted-foreground text-sm">
              Sentiment Analysis • Text Classification • Entity Recognition •
              Content Generation
            </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 NLP & Text Analytics Page
export const NLPTextAnalytics = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

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

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

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

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

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

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

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

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

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

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

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

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