"use client";

import { motion } from "framer-motion";
import { ArrowRight, CalendarClock, Database, MessagesSquare } from "lucide-react";
import type { Locale } from "@/lib/i18n";

interface AgentTeamProps {
  locale: Locale;
}

const ROLES = [
  { img: "/roles/accountant.webp", en: "Accountant", ar: "محاسب", descEn: "Invoices, expenses & reports", descAr: "فواتير ومصروفات وتقارير" },
  { img: "/roles/financial-manager.webp", en: "Financial Manager", ar: "مدير مالي", descEn: "Budgets & cash flow", descAr: "موازنات وتدفق نقدي" },
  { img: "/roles/sales-rep.webp", en: "Sales Rep", ar: "مندوب مبيعات", descEn: "Leads, follow-ups & CRM", descAr: "متابعة عملاء وإغلاق صفقات" },
  { img: "/roles/customer-support.webp", en: "Customer Support", ar: "خدمة عملاء", descEn: "24/7 answers & escalation", descAr: "رد فوري 24/7 وتصعيد ذكي" },
  { img: "/roles/procurement.webp", en: "Procurement", ar: "مسؤول مشتريات", descEn: "Stock & purchase orders", descAr: "مخزون وأوامر شراء" },
  { img: "/roles/hr-assistant.webp", en: "HR Assistant", ar: "موارد بشرية", descEn: "Leaves, records & payroll", descAr: "إجازات وسجلات ورواتب" },
  { img: "/roles/admin-assistant.webp", en: "Admin Assistant", ar: "مساعد إداري", descEn: "Tasks, calendar & follow-up", descAr: "مهام ومواعيد ومتابعة" },
];

export function AgentTeam({ locale }: AgentTeamProps) {
  const isRTL = locale === "ar";
  const t =
    locale === "ar"
      ? {
          badge: "فريقك الجاهز",
          title: "وظّف موظفيك الذكيين",
          titleHighlight: "بضغطة واحدة.",
          subtitle: "اختر الوظيفة، اكتب ملاحظاتك، وسيبدأ موظفك العمل فوراً — على بياناتك الحقيقية.",
          hire: "وظّف الآن",
          f1Title: "شركة كاملة تعمل على Odoo",
          f1Desc: "كل موظف يقرأ ويحدّث نظام Odoo ERP الخاص بك: فواتير، مخزون، عملاء، رواتب — بيانات حقيقية، عمل حقيقي.",
          f2Title: "يعملون من تلقاء أنفسهم",
          f2Desc: "مهام دورية مجدولة: تقرير مبيعات كل صباح، متابعة المتأخرات كل أسبوع — تصلك النتائج على واتساب أو تيليجرام.",
          f3Title: "على كل قنواتك",
          f3Desc: "WhatsApp · Telegram · Email · Slack · Discord — موظفوك يستقبلون ويرسلون أينما تعمل أنت.",
        }
      : {
          badge: "YOUR READY TEAM",
          title: "Hire your AI employees",
          titleHighlight: "in one click.",
          subtitle: "Pick a job, add your notes, and your employee starts working immediately — on your real data.",
          hire: "Hire now",
          f1Title: "A full company running on Odoo",
          f1Desc: "Every employee reads and updates your own Odoo ERP: invoices, inventory, customers, payroll — real data, real work.",
          f2Title: "They work on their own",
          f2Desc: "Scheduled duties: a sales report every morning, overdue follow-ups weekly — results delivered to WhatsApp or Telegram.",
          f3Title: "On every channel you use",
          f3Desc: "WhatsApp · Telegram · Email · Slack · Discord — your employees send and receive wherever you work.",
        };

  return (
    <section id="team" className="relative py-24 overflow-hidden" dir={isRTL ? "rtl" : "ltr"}>
      <div className="absolute inset-0 bg-void-black" />
      <div className="absolute inset-0 dot-grid-cyan opacity-20" />
      <div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-electric-cyan/[0.04] rounded-full blur-3xl" />

      <div className="container-custom relative z-10">
        {/* Heading */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7 }}
          className="text-center max-w-2xl mx-auto mb-14"
        >
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-electric-cyan/20 bg-electric-cyan/[0.03] mb-6">
            <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>
          </div>
          <h2 className="font-space-grotesk font-bold text-3xl md:text-5xl leading-tight mb-4">
            <span className="text-warm-white">{t.title} </span>
            <span className="text-gradient-cyan">{t.titleHighlight}</span>
          </h2>
          <p className="text-muted-white text-base md:text-lg">{t.subtitle}</p>
        </motion.div>

        {/* Employee cards */}
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 mb-16">
          {ROLES.map((r, i) => (
            <motion.a
              key={r.en}
              href="/register"
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: i * 0.06, duration: 0.5 }}
              whileHover={{ y: -6 }}
              className="group relative rounded-2xl border border-white/[0.06] bg-white/[0.02] p-4 text-center transition-colors hover:border-electric-cyan/30 hover:bg-white/[0.04]"
            >
              <div className="absolute inset-0 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity bg-gradient-to-b from-electric-cyan/[0.06] to-transparent pointer-events-none" />
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={r.img}
                alt={locale === "ar" ? r.ar : r.en}
                className="mx-auto mb-3 h-20 w-20 md:h-24 md:w-24 rounded-xl object-cover shadow-lg transition-transform duration-300 group-hover:scale-105"
                loading="lazy"
              />
              <div className="font-space-grotesk font-semibold text-warm-white text-sm md:text-base">
                {locale === "ar" ? r.ar : r.en}
              </div>
              <div className="text-[11px] md:text-xs text-muted-white mt-1">{locale === "ar" ? r.descAr : r.descEn}</div>
              <div className="mt-3 inline-flex items-center gap-1 text-[11px] font-jetbrains-mono text-electric-cyan opacity-0 group-hover:opacity-100 transition-opacity">
                {t.hire}
                <ArrowRight size={11} className={isRTL ? "rotate-180" : ""} />
              </div>
            </motion.a>
          ))}
          {/* CTA tile */}
          <motion.a
            href="/register"
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: ROLES.length * 0.06, duration: 0.5 }}
            whileHover={{ y: -6 }}
            className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-white/10 p-4 text-center transition-colors hover:border-electric-cyan/40"
          >
            <span className="font-space-grotesk text-4xl text-electric-cyan">+</span>
            <span className="mt-2 text-sm text-muted-white">{locale === "ar" ? "وظيفة مخصصة لعملك" : "A custom role for your business"}</span>
          </motion.a>
        </div>

        {/* Feature panels with 3D imagery */}
        <div className="grid lg:grid-cols-2 gap-6">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7 }}
            className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-obsidian"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/landing/org-chart.webp" alt="" className="h-56 md:h-72 w-full object-cover opacity-90" loading="lazy" />
            <div className="absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian/30 to-transparent" />
            <div className="relative -mt-20 p-6 md:p-8">
              <div className="flex items-center gap-2 text-electric-cyan mb-2">
                <Database size={18} />
                <span className="font-jetbrains-mono text-xs tracking-widest">ODOO ERP</span>
              </div>
              <h3 className="font-space-grotesk font-bold text-xl md:text-2xl text-warm-white mb-2">{t.f1Title}</h3>
              <p className="text-sm md:text-base text-muted-white leading-relaxed">{t.f1Desc}</p>
            </div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.15 }}
            className="relative overflow-hidden rounded-3xl border border-white/[0.06] bg-obsidian"
          >
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/landing/channels.webp" alt="" className="h-56 md:h-72 w-full object-cover opacity-90" loading="lazy" />
            <div className="absolute inset-0 bg-gradient-to-t from-obsidian via-obsidian/30 to-transparent" />
            <div className="relative -mt-20 p-6 md:p-8">
              <div className="flex items-center gap-2 text-soft-emerald mb-2">
                <MessagesSquare size={18} />
                <span className="font-jetbrains-mono text-xs tracking-widest">OMNICHANNEL</span>
              </div>
              <h3 className="font-space-grotesk font-bold text-xl md:text-2xl text-warm-white mb-2">{t.f3Title}</h3>
              <p className="text-sm md:text-base text-muted-white leading-relaxed">{t.f3Desc}</p>
              <div className="mt-4 flex items-center gap-2 text-gold-dust">
                <CalendarClock size={16} />
                <span className="text-xs md:text-sm text-muted-white">
                  <span className="text-gold-dust font-semibold">{t.f2Title}</span> — {t.f2Desc}
                </span>
              </div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}