"use client";

import { motion } from "framer-motion";
import { ArrowRight, CheckCircle2, Activity, TrendingUp, Shield, Zap, MessageSquare } from "lucide-react";
import type { Locale } from "@/lib/i18n";

interface HeroProps {
  locale: Locale;
}

const agents = [
  { name: "Sales Agent", icon: TrendingUp, status: "active", color: "text-electric-cyan", dept: "Prospecting", items: 43 },
  { name: "Support Agent", icon: MessageSquare, status: "active", color: "text-soft-emerald", dept: "Tickets", items: 28 },
  { name: "Finance Agent", icon: Shield, status: "processing", color: "text-gold-dust", dept: "Invoices", items: 12 },
  { name: "Ops Agent", icon: Zap, status: "active", color: "text-electric-cyan", dept: "Workflows", items: 67 },
  { name: "Marketing Agent", icon: Activity, status: "idle", color: "text-soft-emerald", dept: "Campaigns", items: 8 },
];

export function Hero({ locale }: HeroProps) {
  const isRTL = locale === "ar";
  const content = {
    en: {
      badge: "HIRE YOUR AI EMPLOYEES",
      title: "Hire your AI employee in minutes,",
      titleHighlight: "then let it work.",
      subtitle: "Pick a job, describe its tasks, and it starts instantly — managing your invoices on Odoo, following up with customers, and sending you reports on WhatsApp. No code, no complexity.",
      cta: "Hire your first employee",
      secondary: "See How It Works",
      dashTitle: "LIVE AGENT DASHBOARD",
      agentsActive: "Active",
      agentsProcessing: "Processing",
      agentsIdle: "Idle",
      viewAll: "View all agents"
    },
    ar: {
      badge: "وظّف موظّفيك الأذكياء",
      title: "وظّف موظّفك الذكي في دقائق،",
      titleHighlight: "ثم دعه يعمل.",
      subtitle: "اختر الوظيفة، اكتب مهامه، فيبدأ فوراً — يدير فواتيرك على Odoo، يتابع عملاءك، ويرسل لك التقارير على واتساب. بلا كود، بلا تعقيد.",
      cta: "وظّف أول موظّف",
      secondary: "شاهد كيف يعمل",
      dashTitle: "لوحة تحكم الوكلاء المباشرة",
      agentsActive: "نشط",
      agentsProcessing: "قيد المعالجة",
      agentsIdle: "خامل",
      viewAll: "عرض كل الوكلاء"
    }
  };

  const t = content[locale];

  return (
    <section className="relative min-h-screen flex items-center overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      {/* Background */}
      <div className="absolute inset-0 bg-void-black" />

      {/* Cinematic 3D backdrop — AI office at night, slow Ken Burns drift */}
      <motion.div
        initial={{ scale: 1.12, opacity: 0 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 2.4, ease: "easeOut" }}
        className="absolute inset-0"
      >
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src="/landing/hero-office.webp" alt="" className="h-full w-full object-cover opacity-45" />
      </motion.div>
      {/* Readability + cinema grade overlays */}
      <div className="absolute inset-0 bg-gradient-to-b from-void-black/85 via-void-black/55 to-void-black" />
      <div className={`absolute inset-0 ${isRTL ? "bg-gradient-to-l" : "bg-gradient-to-r"} from-void-black/90 via-void-black/40 to-transparent`} />
      <div className="absolute inset-0 dot-grid-cyan opacity-30" />

      {/* Ambient gradients */}
      <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-electric-cyan/[0.05] rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-soft-emerald/[0.04] rounded-full blur-3xl" />

      {/* Content */}
      <div className="container-custom relative z-10 pt-32 pb-20">
        <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
          {/* Left: Text */}
          <motion.div
            initial={{ opacity: 0, x: isRTL ? 30 : -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className={`${isRTL ? "lg:order-2" : "lg:order-1"}`}
          >
            {/* Badge */}
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-electric-cyan/20 bg-electric-cyan/[0.03] mb-8"
            >
              <div className="w-1.5 h-1.5 rounded-full bg-electric-cyan animate-agent-pulse" />
              <span className="font-jetbrains-mono text-xs text-electric-cyan tracking-widest">{t.badge}</span>
            </motion.div>

            {/* Headline */}
            <motion.h1
              initial={{ opacity: 0, y: 30 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4, duration: 0.8 }}
              className="font-space-grotesk font-bold text-4xl md:text-5xl lg:text-6xl xl:text-7xl leading-[1.1] tracking-tight mb-6"
            >
              <span className="text-warm-white block">{t.title}</span>
              <span className="text-gradient-cyan">{t.titleHighlight}</span>
            </motion.h1>

            {/* Subtitle */}
            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6, duration: 0.8 }}
              className="text-base md:text-lg text-muted-white leading-relaxed max-w-lg mb-8"
            >
              {t.subtitle}
            </motion.p>

            {/* CTAs */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.8, duration: 0.8 }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <motion.a
                href="#cta"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
                className="group inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl bg-gradient-to-r from-electric-cyan to-soft-emerald text-void-black font-semibold font-space-grotesk text-lg transition-all hover:shadow-lg hover:shadow-electric-cyan/20"
              >
                {t.cta}
                <ArrowRight className={`w-5 h-5 transition-transform group-hover:translate-x-1 ${isRTL ? "rotate-180" : ""}`} />
              </motion.a>
              <a
                href="#watch"
                className="inline-flex items-center justify-center px-8 py-4 rounded-xl border border-white/10 text-warm-white font-medium font-space-grotesk hover:bg-white/5 transition-all"
              >
                {t.secondary}
              </a>
            </motion.div>
          </motion.div>

          {/* Right: Dashboard */}
          <motion.div
            initial={{ opacity: 0, x: isRTL ? -30 : 30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className={`${isRTL ? "lg:order-1" : "lg:order-2"}`}
          >
            <div className="terminal-window overflow-hidden shadow-glow-cyan backdrop-blur-sm ring-1 ring-electric-cyan/10">
              {/* Window Header */}
              <div className="terminal-header">
                <div className="terminal-dot bg-red-500/60" />
                <div className="terminal-dot bg-yellow-500/60" />
                <div className="terminal-dot bg-emerald-500/60" />
                <span className="font-jetbrains-mono text-xs text-muted-white ml-2">{t.dashTitle}</span>
              </div>

              {/* Dashboard Content */}
              <div className="p-4 md:p-6 space-y-3">
                {/* Summary bar */}
                <div className="grid grid-cols-3 gap-3 mb-4">
                  {[
                    { label: locale === "en" ? "Active" : "نشط", value: "4", color: "text-soft-emerald" },
                    { label: locale === "en" ? "Tasks Today" : "مهام اليوم", value: "158", color: "text-electric-cyan" },
                    { label: locale === "en" ? "Success Rate" : "معدل النجاح", value: "97%", color: "text-gold-dust" }
                  ].map((stat, i) => (
                    <motion.div
                      key={i}
                      initial={{ opacity: 0, y: 10 }}
                      animate={{ opacity: 1, y: 0 }}
                      transition={{ delay: 0.8 + i * 0.1 }}
                      className="flex flex-col items-center p-3 rounded-lg bg-white/[0.03] border border-white/[0.04]"
                    >
                      <span className={`text-lg md:text-xl font-bold font-space-grotesk ${stat.color}`}>{stat.value}</span>
                      <span className="text-[10px] md:text-xs text-muted-white font-inter-tight mt-0.5">{stat.label}</span>
                    </motion.div>
                  ))}
                </div>

                {/* Agent cards */}
                <div className="space-y-2">
                  {agents.map((agent, i) => (
                    <motion.div
                      key={agent.name}
                      initial={{ opacity: 0, x: -10 }}
                      animate={{ opacity: 1, x: 0 }}
                      transition={{ delay: 1 + i * 0.1 }}
                      className="flex items-center justify-between p-3 rounded-lg bg-white/[0.02] border border-white/[0.04] hover:bg-white/[0.04] transition-colors group cursor-default"
                    >
                      <div className="flex items-center gap-3">
                        <div className={`w-8 h-8 rounded-lg bg-white/[0.04] flex items-center justify-center ${agent.color}`}>
                          <agent.icon size={16} />
                        </div>
                        <div>
                          <div className="font-space-grotesk text-sm text-warm-white font-medium">{agent.name}</div>
                          <div className="text-xs text-muted-white flex items-center gap-1.5">
                            <span>{agent.dept}</span>
                            <span className="w-1 h-1 rounded-full bg-white/20" />
                            <span>{agent.items} tasks</span>
                          </div>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-[10px] font-jetbrains-mono ${
                          agent.status === "active" ? "bg-soft-emerald/10 text-soft-emerald" :
                          agent.status === "processing" ? "bg-gold-dust/10 text-gold-dust" :
                          "bg-muted-white/10 text-muted-white"
                        }`}>
                          <div className={`w-1.5 h-1.5 rounded-full ${
                            agent.status === "active" ? "bg-soft-emerald animate-agent-pulse" :
                            agent.status === "processing" ? "bg-gold-dust animate-agent-pulse" :
                            "bg-muted-white"
                          }`} />
                          {agent.status === "active" ? t.agentsActive : agent.status === "processing" ? t.agentsProcessing : t.agentsIdle}
                        </div>
                      </div>
                    </motion.div>
                  ))}
                </div>

                {/* Footer */}
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  transition={{ delay: 1.8 }}
                  className="flex items-center justify-between pt-2 border-t border-white/[0.04]"
                >
                  <div className="flex items-center gap-2 text-xs text-muted-white">
                    <CheckCircle2 size={12} className="text-soft-emerald" />
                    <span>{locale === "en" ? "All systems operational" : "جميع الأنظمة تعمل"}</span>
                  </div>
                  <a href="#showcase" className="text-xs text-electric-cyan hover:underline font-jetbrains-mono">
                    {t.viewAll} →
                  </a>
                </motion.div>
              </div>
            </div>
          </motion.div>
        </div>
      </div>

      {/* Bottom gradient */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-void-black to-transparent pointer-events-none" />
    </section>
  );
}