"use client";

import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import { TrendingUp, Zap, Globe, BarChart3, Clock, CheckCircle2 } from "lucide-react";
import type { Locale } from "@/lib/i18n";

interface WhyNowProps {
  locale: Locale;
}

export function WhyNow({ locale }: WhyNowProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.3 });
  const isRTL = locale === "ar";

  const content = {
    en: {
      title: "Why",
      titleHighlight: "Now?",
      subtitle: "The convergence of technology readiness, market maturity, and business necessity has created the perfect moment for AI workforce adoption.",
      drivers: [
        {
          icon: <Zap className="w-8 h-8" />,
          title: "AI Technology Breakthrough",
          description: "Large language models have reached unprecedented capability levels. They understand context, handle nuance, and make decisions with 95%+ accuracy. This isn't experimental — it's enterprise-ready.",
          stats: [
            { label: "Accuracy Rate", value: "95%+" },
            { label: "Response Time", value: "<2s" },
            { label: "Languages", value: "100+" }
          ]
        },
        {
          icon: <TrendingUp className="w-8 h-8" />,
          title: "Market Validation",
          description: "Early adopters are seeing dramatic results. Companies using AI agents report 80% cost reductions, 99% uptime improvements, and the ability to scale operations without hiring. The competitive advantage is proven.",
          stats: [
            { label: "Cost Reduction", value: "80%" },
            { label: "Faster Operations", value: "10x" },
            { label: "ROI Timeline", value: "<3 months" }
          ]
        },
        {
          icon: <BarChart3 className="w-8 h-8" />,
          title: "Business Necessity",
          description: "In an era of talent shortages and rising costs, AI agents aren't a luxury — they're survival. Companies that don't adopt AI automation will be outcompeted by those that do. The time to wait is over.",
          stats: [
            { label: "Labor Shortage", value: "85M workers" },
            { label: "Cost Pressure", value: "Rising 15%/yr" },
            { label: "Competitors", value: "67% adopting AI" }
          ]
        },
        {
          icon: <Globe className="w-8 h-8" />,
          title: "Regional Opportunity",
          description: "Saudi Arabia's Vision 2030 and regional digital transformation initiatives have created massive demand for AI solutions. Local businesses need AI that understands Arabic context, culture, and business practices.",
          stats: [
            { label: "Market Size", value: "$15B by 2030" },
            { label: "Government Support", value: "Vision 2030" },
            { label: "Digital Readiness", value: "High" }
          ]
        }
      ],
      readiness: {
        title: "Signs AI Workforce is Ready",
        indicators: [
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "AI agents can handle complex, multi-step tasks autonomously" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "Enterprise-grade security and compliance are standard" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "Integration with existing business systems is seamless" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "Costs are predictable and scale with usage" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "Measurable ROI within months, not years" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "Arabic language support is enterprise-quality" }
        ]
      }
    },
    ar: {
      title: "لماذا",
      titleHighlight: "الآن؟",
      subtitle: "تقارب جاهزية التكنولوجيا، ونضج السوق، والضرورة التجارية خلق اللحظة المثالية لتبني قوة العمل AI.",
      drivers: [
        {
          icon: <Zap className="w-8 h-8" />,
          title: "اختراق تكنولوجيا AI",
          description: "النماذج اللغوية الكبيرة وصلت إلى مستويات غير مسبوقة من القدرة. تفهم السياق، تتعامل مع الدقة، واتخاذ قرارات بدقة 95٪+. هذا ليس تجريبي — جاهز للمؤسسات.",
          stats: [
            { label: "معدل الدقة", value: "95٪+" },
            { label: "وقت الاستجابة", value: "<2ث" },
            { label: "اللغات", value: "100+" }
          ]
        },
        {
          icon: <TrendingUp className="w-8 h-8" />,
          title: "التحقق من السوق",
          description: "المتبنون المبكرون يرون نتائج دراماتيكية. الشركات التي تستخدم وكلاء AI تبلغ عن تخفيضات تكاليف 80٪، تحسينات uptime 99٪، والقدرة على توسيع العمليات بدون توظيف. الميزة التنافسية مثبتة.",
          stats: [
            { label: "تخفيض التكاليف", value: "80٪" },
            { label: "عمليات أسرع", value: "10x" },
            { label: "الجدول الزمني ROI", value: "<3 أشهر" }
          ]
        },
        {
          icon: <Globe className="w-8 h-8" />,
          title: "ضرورة العمل",
          description: "في عصر نقص المواهب والتكاليف المتزايدة، وكلاء AI ليس رفاهية — هم بقاء. الشركات التي لا تتبنى الأتمتة AI ستتفوق عليها الشركات التي تتبناها. وقت الانتظار انتهى.",
          stats: [
            { label: "نقص العمالة", value: "85 مليون عامل" },
            { label: "ضغط التكاليف", value: "ارتفاع 15٪/سنة" },
            { label: "المنافسون", value: "67٪ يتبنون AI" }
          ]
        },
        {
          icon: <Globe className="w-8 h-8" />,
          title: "الفرصة الإقليمية",
          description: "رؤية السعودية 2030 ومبادرات التحول الرقمي الإقليمية خلقت طلباً هائلاً على حلول AI. الأعمال المحتاجة تحتاج AI يفهم السياق العربي، الثقافة، والممارسات التجارية.",
          stats: [
            { label: "حجم السوق", value: "$15 مليار بحلول 2030" },
            { label: "الدعم الحكومي", value: "رؤية 2030" },
            { label: "الجاهزية الرقمية", value: "عالية" }
          ]
        }
      ],
      readiness: {
        title: "علامات أن قوة العمل AI جاهزة",
        indicators: [
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "وكلاء AI يمكنهم التعامل مع المهام المعقدة متعددة الخطوات بشكل مستقل" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "الأمان والامتثال على مستوى المؤسسة معيار" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "التكامل مع أنظمة العمل الموجودة سلس" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "التكاليف قابلة للتنبؤ وتتدرج مع الاستخدام" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "ROI قابل للقياس خلال أشهر، ليس سنوات" },
          { icon: <CheckCircle2 className="w-5 h-5" />, text: "دعم اللغة العربية بجودة المؤسسات" }
        ]
      }
    }
  };

  const t = content[locale];

  return (
    <section ref={ref} className="py-24 relative overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      {/* Background Effects */}
      <div className="absolute inset-0 bg-gradient-to-b from-void-black via-graphite to-void-black" />
      <div className="absolute top-1/3 left-1/3 w-[600px] h-[600px] bg-electric-cyan/10 rounded-full blur-3xl" />
      <div className="absolute bottom-1/4 right-1/4 w-[500px] h-[500px] bg-soft-emerald/10 rounded-full blur-3xl" />

      {/* Content */}
      <div className="container-custom relative z-10">
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-16"
        >
          <h2 className="font-space-grotesk font-bold text-4xl md:text-5xl lg:text-6xl mb-4">
            <span className="text-warm-white block">{t.title}</span>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-electric-cyan to-soft-emerald">
              {t.titleHighlight}
            </span>
          </h2>
          <p className="text-lg text-muted-white max-w-3xl mx-auto">
            {t.subtitle}
          </p>
        </motion.div>

        {/* Key Drivers */}
        <div className="grid md:grid-cols-2 gap-8 mb-16">
          {t.drivers.map((driver, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
              transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
              className="bg-obsidian/50 border border-white/10 rounded-2xl p-8 hover:border-electric-cyan/30 transition-all"
            >
              {/* Icon */}
              <div className="flex items-center gap-4 mb-6">
                <div className="w-16 h-16 rounded-xl bg-gradient-to-r from-electric-cyan/20 to-soft-emerald/20 border border-electric-cyan/30 flex items-center justify-center text-electric-cyan">
                  {driver.icon}
                </div>
                <h3 className="font-space-grotesk font-bold text-xl text-warm-white">
                  {driver.title}
                </h3>
              </div>

              {/* Description */}
              <p className="text-muted-white leading-relaxed mb-6">
                {driver.description}
              </p>

              {/* Stats */}
              <div className="grid grid-cols-3 gap-4">
                {driver.stats.map((stat, statIndex) => (
                  <div key={statIndex} className="text-center">
                    <div className="font-space-grotesk font-bold text-lg text-electric-cyan">
                      {stat.value}
                    </div>
                    <div className="text-xs text-muted-white mt-1">
                      {stat.label}
                    </div>
                  </div>
                ))}
              </div>
            </motion.div>
          ))}
        </div>

        {/* Readiness Indicators */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.8, delay: 0.8 }}
          className="bg-gradient-to-br from-soft-emerald/10 to-teal-500/10 border border-soft-emerald/20 rounded-2xl p-8"
        >
          <h3 className="font-space-grotesk font-bold text-2xl text-warm-white text-center mb-8">
            {t.readiness.title}
          </h3>
          <div className="grid md:grid-cols-2 gap-4">
            {t.readiness.indicators.map((indicator, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, x: isRTL ? 20 : -20 }}
                animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: isRTL ? 20 : -20 }}
                transition={{ duration: 0.5, delay: 0.9 + index * 0.08 }}
                className="flex items-start gap-3 p-4 bg-obsidian/30 rounded-lg"
              >
                <div className="w-6 h-6 rounded-full bg-soft-emerald/20 flex items-center justify-center flex-shrink-0 mt-0.5">
                  <div className="text-soft-emerald">
                    {indicator.icon}
                  </div>
                </div>
                <p className="text-muted-white text-sm">
                  {indicator.text}
                </p>
              </motion.div>
            ))}
          </div>
        </motion.div>

        {/* CTA */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.8, delay: 1.2 }}
          className="text-center mt-16"
        >
          <div className="inline-flex items-center gap-3 px-6 py-3 rounded-full bg-electric-cyan/10 border border-electric-cyan/30 mb-6">
            <Clock className="w-5 h-5 text-electric-cyan" />
            <span className="text-electric-cyan font-jetbrains-mono text-sm">
              {locale === "en" ? "The window of opportunity is now" : "نافذة الفرصة هي الآن"}
            </span>
          </div>
          <button className="px-8 py-4 bg-gradient-to-r from-electric-cyan to-soft-emerald text-void-black font-semibold rounded-xl hover:opacity-90 transition-opacity">
            {locale === "en" ? "Start Your AI Transformation" : "ابدأ تحولك AI"}
          </button>
        </motion.div>
      </div>
    </section>
  );
}