"use client";

import { motion, useInView } from "framer-motion";
import { useRef } from "react";
import { GlassCard } from "../ui/GlassCard";
import { RevealText } from "../ui/AnimatedText";
import type { Locale } from "@/lib/i18n";

interface ProblemProps {
  locale: Locale;
}

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

  const content = {
    en: {
      title: "The Cost of",
      titleHighlight: "Human Operations",
      subtitle: "Businesses waste millions on employees who work limited hours, need breaks, and eventually leave.",
      betterWay: "There's a better way.",
      stats: [
        {
          icon: "💰",
          value: "$2.5M",
          label: "Average annual cost per human employee",
          description: "Salaries, benefits, training, turnover"
        },
        {
          icon: "⏰",
          value: "40h",
          label: "Hours wasted per employee weekly",
          description: "Meetings, admin, repetitive tasks"
        },
        {
          icon: "📉",
          value: "3x",
          label: "Slower than AI alternatives",
          description: "Human limitations vs 24/7 AI operation"
        }
      ]
    },
    ar: {
      title: "تكلفة العمليات",
      titleHighlight: "البشرية",
      subtitle: "تهدر الشركات الملايين على الموظفين الذين يعملون ساعات محدودة، يحتاجون لراحة، ويغادرون في النهاية.",
      betterWay: "هناك طريقة أفضل.",
      stats: [
        {
          icon: "💰",
          value: "$2.5M",
          label: "التكلفة السنوية المتوسطة للموظف البشري",
          description: "الرواتب، المزايا، التدريب، الاستقالة"
        },
        {
          icon: "⏰",
          value: "40س",
          label: "ساعات مضاعة أسبوعياً لكل موظف",
          description: "الاجتماعات، الإدارة، المهام المتكررة"
        },
        {
          icon: "📉",
          value: "3x",
          label: "أبطأ من بدائل AI",
          description: "قيود بشرية مقابل تشغيل AI 24/7"
        }
      ]
    }
  };

  const t = content[locale];

  return (
    <section id="problem" ref={ref} className="py-32 relative" dir={isRTL ? "rtl" : "ltr"}>
      <div className="container-custom">
        <RevealText className="text-center mb-20">
          <h2 className="font-space-grotesk font-bold mb-6">
            <span className="text-muted-white">{t.title}</span>
            <span className="block 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-2xl mx-auto">
            {t.subtitle}
          </p>
        </RevealText>

        <div className="grid md:grid-cols-3 gap-8">
          {t.stats.map((stat, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 50 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
              transition={{ duration: 0.6, delay: i * 0.2 }}
            >
              <GlassCard glow delay={i * 0.2}>
                <div className="text-6xl mb-6">{stat.icon}</div>
                <div className="font-space-grotesk text-5xl font-bold text-electric-cyan mb-4">
                  {stat.value}
                </div>
                <h3 className="text-lg font-semibold text-warm-white mb-3">
                  {stat.label}
                </h3>
                <p className="text-muted-white text-sm leading-relaxed">
                  {stat.description}
                </p>
              </GlassCard>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.6, delay: 0.8 }}
          className="text-center mt-16"
        >
          <p className="text-2xl text-warm-white">
            <span className="text-electric-cyan font-semibold">{t.betterWay}</span>
          </p>
        </motion.div>
      </div>
    </section>
  );
}