"use client";

import { motion } from "framer-motion";
import { content } from "@/lib/content";
import { staggerContainer, staggerItem, fadeUp, scaleIn } from "@/lib/animations";
import CountUpNumber from "@/components/shared/CountUpNumber";
import { ArrowLeft, TrendingUp, Users, BarChart3 } from "lucide-react";

const heroContent = content.ar.hero;

function DashboardMockup() {
  return (
    <motion.div
      variants={scaleIn}
      className="relative"
      style={{ perspective: "1200px" }}
    >
      <motion.div
        animate={{ y: [0, -8, 0] }}
        transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
        className="relative rounded-2xl border border-slate-200 bg-white p-4 shadow-2xl"
        style={{
          transform: "rotateY(-5deg) rotateX(3deg)",
          transformStyle: "preserve-3d",
        }}
      >
        {/* Browser header */}
        <div className="mb-4 flex items-center gap-2 border-b border-slate-100 pb-3">
          <div className="h-3 w-3 rounded-full bg-red-400" />
          <div className="h-3 w-3 rounded-full bg-yellow-400" />
          <div className="h-3 w-3 rounded-full bg-green-400" />
          <div className="ms-3 h-5 flex-1 rounded-md bg-slate-100" />
        </div>

        {/* Dashboard content */}
        <div className="space-y-4">
          {/* Revenue card */}
          <div className="rounded-xl bg-gradient-to-l from-sky-50 to-white p-4 border border-sky-100">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-slate-400 mb-1">الإيرادات الشهرية</p>
                <p className="text-2xl font-bold text-slate-900">١٢٥,٠٠٠ ج.م</p>
              </div>
              <div className="flex items-center gap-1 rounded-full bg-emerald-50 px-2 py-1">
                <TrendingUp className="h-3 w-3 text-emerald-600" />
                <span className="text-xs font-medium text-emerald-600">+١٢%</span>
              </div>
            </div>
          </div>

          {/* Chart placeholder */}
          <div className="rounded-xl border border-slate-100 p-4">
            <div className="flex items-center justify-between mb-3">
              <p className="text-xs text-slate-400">إحصائيات الأسبوع</p>
              <BarChart3 className="h-4 w-4 text-slate-300" />
            </div>
            <svg
              viewBox="0 0 200 60"
              className="h-16 w-full"
              fill="none"
              preserveAspectRatio="none"
            >
              <path
                d="M0 50 C20 45, 40 30, 60 35 S100 15, 120 20 S160 10, 180 15 L200 8"
                stroke="rgb(14 165 233)"
                strokeWidth="2"
                strokeLinecap="round"
              />
              <path
                d="M0 50 C20 45, 40 30, 60 35 S100 15, 120 20 S160 10, 180 15 L200 8 L200 60 L0 60 Z"
                fill="url(#chartGradient)"
                opacity="0.15"
              />
              <defs>
                <linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="rgb(14 165 233)" />
                  <stop offset="100%" stopColor="rgb(14 165 233)" stopOpacity="0" />
                </linearGradient>
              </defs>
            </svg>
          </div>

          {/* Bottom stats row */}
          <div className="grid grid-cols-2 gap-3">
            <div className="rounded-lg bg-slate-50 p-3">
              <div className="flex items-center gap-2 mb-1">
                <Users className="h-3.5 w-3.5 text-sky-500" />
                <span className="text-xs text-slate-400">اللاعبين</span>
              </div>
              <p className="text-lg font-bold text-slate-800">٢,٤٥٠</p>
            </div>
            <div className="rounded-lg bg-slate-50 p-3">
              <div className="flex items-center gap-2 mb-1">
                <div className="h-3.5 w-3.5 rounded-full bg-emerald-400" />
                <span className="text-xs text-slate-400">نسبة الحضور</span>
              </div>
              <p className="text-lg font-bold text-slate-800">٩٢%</p>
            </div>
          </div>
        </div>
      </motion.div>
    </motion.div>
  );
}

export default function Hero() {
  return (
    <section className="relative min-h-[90vh] flex items-center overflow-hidden bg-gradient-to-b from-white to-sky-50">
      <div className="container mx-auto px-4 py-20 lg:py-24">
        <motion.div
          variants={staggerContainer}
          initial="hidden"
          animate="visible"
          className="grid items-center gap-12 lg:grid-cols-2 lg:gap-16"
        >
          {/* Text content (visually right in RTL) */}
          <div className="order-2 lg:order-1">
            <motion.div variants={staggerContainer} initial="hidden" animate="visible">
              <motion.h1
                variants={staggerItem}
                className="text-5xl font-extrabold leading-tight text-slate-900 md:text-6xl lg:text-7xl"
              >
                {heroContent.headline}
              </motion.h1>
              <motion.p
                variants={staggerItem}
                className="mt-6 max-w-xl text-lg leading-relaxed text-slate-500"
              >
                {heroContent.subheadline}
              </motion.p>
              <motion.div
                variants={staggerItem}
                className="mt-8 flex flex-wrap items-center gap-4"
              >
                <button className="inline-flex items-center gap-2 rounded-xl bg-sky-500 px-6 py-3.5 text-base font-semibold text-white shadow-lg shadow-sky-200 transition-all hover:bg-sky-600 hover:shadow-xl hover:shadow-sky-200">
                  {heroContent.ctaPrimary}
                  <ArrowLeft className="h-4 w-4" />
                </button>
                <button className="inline-flex items-center gap-2 rounded-xl border-2 border-slate-200 bg-white px-6 py-3.5 text-base font-semibold text-slate-700 transition-all hover:border-sky-200 hover:text-sky-600">
                  {heroContent.ctaSecondary}
                </button>
              </motion.div>
            </motion.div>
          </div>

          {/* Dashboard mockup (visually left in RTL) */}
          <motion.div
            variants={scaleIn}
            initial="hidden"
            animate="visible"
            className="order-1 lg:order-2"
          >
            <DashboardMockup />
          </motion.div>
        </motion.div>

        {/* Bottom stats bar */}
        <motion.div
          variants={fadeUp}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          className="mt-16 rounded-2xl border border-slate-100 bg-white/80 p-6 shadow-sm backdrop-blur-sm lg:mt-20"
        >
          <div className="grid grid-cols-1 divide-y divide-slate-100 md:grid-cols-3 md:divide-x md:divide-x-reverse md:divide-y-0">
            {heroContent.stats.map((stat, index) => (
              <div key={index} className="flex flex-col items-center py-4 md:py-0">
                <span className="text-3xl font-bold text-sky-600 lg:text-4xl">
                  <CountUpNumber value={parseFloat(stat.value)} suffix={stat.suffix} />
                </span>
                <span className="mt-1 text-sm text-slate-500">{stat.label}</span>
              </div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
}
