"use client";

import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import { Target, Eye, Zap, Users, TrendingUp, Award } from "lucide-react";
import type { Locale } from "@/lib/i18n";

interface MissionProps {
  locale: Locale;
}

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

  const content = {
    en: {
      title: "Why We Built",
      titleHighlight: "WakeL AI",
      subtitle: "We believe the future of work isn't about humans versus AI — it's about humans empowered by AI.",
      vision: {
        title: "Our Vision",
        description: "Every business deserves access to intelligent automation. We're building a world where AI agents handle the repetitive, the complex, and the time-consuming — so humans can focus on what truly matters: innovation, strategy, and connection."
      },
      story: [
        {
          year: "2023",
          title: "The Problem",
          description: "We watched businesses struggle with the same challenge: talented teams drowning in repetitive work. Sales teams spending 70% of their time on data entry instead of selling. Support heroes stuck answering the same questions instead of solving complex problems. The potential was there, but it was wasted."
        },
        {
          year: "2024",
          title: "The Realization",
          description: "AI technology had reached a tipping point. Large language models could understand context, make decisions, and handle nuanced interactions. But companies needed more than chatbots — they needed full AI teams that could collaborate, share context, and work autonomously."
        },
        {
          year: "2025",
          title: "The Solution",
          description: "WakeL AI was born. Not as another tool, but as a complete AI workforce platform. AI agents that don't just respond — they act. They sell, support, analyze, create, and collaborate. They work 24/7, never get tired, and continuously improve."
        },
        {
          year: "Today",
          title: "The Impact",
          description: "Companies using WakeL AI have reduced operational costs by 80%, improved response times by 99%, and scaled their operations without hiring. But the real impact isn't just numbers — it's the human teams finally free to do their best work."
        }
      ],
      values: [
        { icon: "🎯", title: "Outcome Obsessed", desc: "We measure success by real business results, not AI hype" },
        { icon: "🤝", title: "Human-First", desc: "AI should empower humans, not replace them" },
        { icon: "🔒", title: "Trust & Security", desc: "Enterprise-grade security is non-negotiable" },
        { icon: "⚡", title: "Pragmatic Innovation", desc: "Practical solutions that work today, not science fiction" }
      ]
    },
    ar: {
      title: "لذا بنينا",
      titleHighlight: "WakeL AI",
      subtitle: "نحن نؤمن بأن مستقبل العمل ليس صراعاً بين البشر و AI — بل البشر المدعومين بـ AI.",
      vision: {
        title: "رؤيتنا",
        description: "كل عمل يستحق الوصول إلى الأتمتة الذكية. نبني عالماً فيه وكلاء AI يتعاملون مع التكرار والتعقيد والاستهلاك للوقت — حتى يتمكن البشر من التركيز على ما يهم حقاً: الابتكار، الاستراتيجية، والاتصال."
      },
      story: [
        {
          year: "2023",
          title: "المشكلة",
          description: "شاهدنا الشركات تكافأ مع نفس التحدي: فرق مواهب غارقة في العمل المتكرر. فرق المبيعات تقضي 70٪ من وقتها في إدخال البيانات بدلاً من البيع. أبطال الدعم عالقون في الإجابة على نفس الأسئلة بدلاً من حل المشاكل المعقدة. كان الإمكانات موجودة، لكنها كانت ضائعة."
        },
        {
          year: "2024",
          title: "الإدراك",
          description: "تكنولوجيا AI وصلت إلى نقطة تحول. النماذج اللغوية الكبيرة يمكنها فهم السياق، اتخاذ القرارات، والتعامل مع التفاعلات الدقيقة. لكن الشركات تحتاج أكثر من روبوتات الدردشة — تحتاج فرق AI كاملة يمكنها التعاون، مشاركة السياق، والعمل بشكل مستقل."
        },
        {
          year: "2025",
          title: "الحل",
          description: "ولد WakeL AI. ليس كأداة أخرى، بل كمنصة قوة عاملة AI كاملة. وكلاء AI لا يستجيبون فقط — يتصرفون. يبيعون، يدعمون، يحللون، يبتكرون، ويتعاونون. يعملون 24/7، لا يتعبون أبداً، ويحسنون باستمرار."
        },
        {
          year: "اليوم",
          title: "التأثير",
          description: "الشركات التي تستخدم WakeL AI خفضت التكاليف التشغيلية بنسبة 80٪، حسنت أوقات الاستجابة بنسبة 99٪، وسعت عملياتها دون توظيف. لكن التأثير الحقيقي ليس مجرد أرقام — هو الفرق البشرية حرة أخيراً للقيام بأفضل عمل."
        }
      ],
      values: [
        { icon: "🎯", title: "التركيز على النتائج", desc: "نقيس النجاح بنتائج العمل الحقيقية، ليس hype AI" },
        { icon: "🤝", title: "البشر أولاً", desc: "AI يجب أن يدعم البشر، لا يحل محلهم" },
        { icon: "🔒", title: "الثقة والأمان", desc: "الأمان على مستوى المؤسسة غير قابل للتفاوض" },
        { icon: "⚡", title: "الابتكار العملي", desc: "حلول عملية تعمل اليوم، ليست خيال علمي" }
      ]
    }
  };

  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/2 right-1/4 w-[500px] h-[500px] bg-electric-cyan/10 rounded-full blur-3xl" />
      <div className="absolute bottom-1/4 left-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-xl text-muted-white max-w-3xl mx-auto">
            {t.subtitle}
          </p>
        </motion.div>

        {/* Vision Statement */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="bg-gradient-to-br from-electric-cyan/10 to-soft-emerald/10 border border-electric-cyan/20 rounded-2xl p-8 md:p-12 mb-16"
        >
          <div className="flex items-start gap-4 mb-4">
            <div className="w-12 h-12 rounded-full bg-gradient-to-r from-electric-cyan to-soft-emerald flex items-center justify-center flex-shrink-0">
              <Eye className="w-6 h-6 text-void-black" />
            </div>
            <div>
              <h3 className="font-space-grotesk font-bold text-2xl text-warm-white mb-3">
                {t.vision.title}
              </h3>
              <p className="text-lg text-muted-white leading-relaxed">
                {t.vision.description}
              </p>
            </div>
          </div>
        </motion.div>

        {/* Timeline Story */}
        <div className="grid md:grid-cols-2 gap-8 mb-16">
          {t.story.map((chapter, 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.3 + index * 0.1 }}
              className="relative"
            >
              {/* Year Badge */}
              <div className="flex items-center gap-4 mb-4">
                <div className="px-4 py-2 rounded-full bg-gradient-to-r from-electric-cyan to-soft-emerald text-void-black font-bold font-jetbrains-mono text-sm">
                  {chapter.year}
                </div>
                <div className="flex-1 h-px bg-gradient-to-r from-electric-cyan/50 to-transparent" />
              </div>

              {/* Content */}
              <div className="bg-obsidian/50 border border-white/10 rounded-xl p-6">
                <h4 className="font-space-grotesk font-bold text-xl text-warm-white mb-3">
                  {chapter.title}
                </h4>
                <p className="text-muted-white leading-relaxed">
                  {chapter.description}
                </p>
              </div>

              {/* Connector Line */}
              {index < t.story.length - 1 && (
                <div className="absolute left-8 top-full w-px h-8 bg-gradient-to-b from-electric-cyan/50 to-transparent hidden md:block" />
              )}
            </motion.div>
          ))}
        </div>

        {/* Core Values */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.8, delay: 0.8 }}
        >
          <h3 className="font-space-grotesk font-bold text-2xl text-warm-white text-center mb-8">
            {locale === "en" ? "Our Core Values" : "قيمنا الأساسية"}
          </h3>
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {t.values.map((value, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, scale: 0.9 }}
                animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
                transition={{ duration: 0.5, delay: 0.9 + index * 0.1 }}
                className="bg-obsidian/50 border border-white/10 rounded-xl p-6 text-center hover:border-electric-cyan/30 transition-all"
              >
                <div className="text-4xl mb-4">{value.icon}</div>
                <h4 className="font-space-grotesk font-semibold text-warm-white mb-2">
                  {value.title}
                </h4>
                <p className="text-sm text-muted-white">
                  {value.desc}
                </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"
        >
          <p className="text-muted-white mb-6">
            {locale === "en"
              ? "Join us in building the future of work — where AI handles the work, and humans handle the vision."
              : "انضم إلينا في بناء مستقبل العمل — حيث يعالج AI العمل، ويعالج البشر الرؤية."
            }
          </p>
          <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 Journey" : "ابدأ رحلة AI الخاصة بك"}
          </button>
        </motion.div>
      </div>
    </section>
  );
}