"use client";

import Link from "next/link";
import { motion, useReducedMotion } from "framer-motion";
import { type Lang } from "@/lib/config";
import { MagneticButton, ParallaxElement } from "@/components/motion";
import HeroAnimations from "./HeroAnimations";
import { MessageCircle, CalendarCheck, CheckCircle } from "lucide-react";

interface HeroContentProps {
  lang: Lang;
}

const spring = { type: "spring" as const, stiffness: 100, damping: 20 };

const containerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.1,
    },
  },
};

const blurReveal = {
  hidden: { opacity: 0, y: 30, filter: "blur(8px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: spring,
  },
};

const blurRevealDelayed = {
  hidden: { opacity: 0, y: 30, filter: "blur(8px)" },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: { ...spring, delay: 0.2 },
  },
};

const statsContainerVariants = {
  hidden: {},
  visible: {
    transition: {
      staggerChildren: 0.15,
      delayChildren: 0.3,
    },
  },
};

const statPill = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: spring,
  },
};

const ctaVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { ...spring, delay: 0.4 },
  },
};

const trustVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { duration: 0.6, delay: 0.5 },
  },
};

const phoneVariants = {
  hidden: { opacity: 0, x: 60, scale: 0.9 },
  visible: {
    opacity: 1,
    x: 0,
    scale: 1,
    transition: { ...spring, delay: 0.2 },
  },
};

const chatMessageVariants = {
  hidden: { opacity: 0, y: 15 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { ...spring, delay: 0.5 + i * 0.3 },
  }),
};

/* ------------------------------------------------------------------ */
/*  Islamic geometric star pattern SVG (8-pointed star, tiled)        */
/* ------------------------------------------------------------------ */
function GeometricOverlay() {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-[0.04]">
      <svg
        className="w-full h-full"
        xmlns="http://www.w3.org/2000/svg"
        width="100%"
        height="100%"
      >
        <defs>
          <pattern
            id="islamic-star"
            x="0"
            y="0"
            width="80"
            height="80"
            patternUnits="userSpaceOnUse"
          >
            {/* 8-pointed star */}
            <polygon
              points="40,8 46,26 64,20 52,34 68,40 52,46 64,60 46,54 40,72 34,54 16,60 28,46 12,40 28,34 16,20 34,26"
              fill="none"
              stroke="currentColor"
              strokeWidth="0.5"
            />
            {/* Inner octagon */}
            <polygon
              points="40,22 52,28 58,40 52,52 40,58 28,52 22,40 28,28"
              fill="none"
              stroke="currentColor"
              strokeWidth="0.3"
            />
          </pattern>
        </defs>
        <rect
          width="100%"
          height="100%"
          fill="url(#islamic-star)"
          className="text-emerald-400"
        />
      </svg>
    </div>
  );
}

export default function HeroContent({ lang }: HeroContentProps) {
  const isAr = lang === "ar";
  const shouldReduceMotion = useReducedMotion();

  const reducedMotionProps = shouldReduceMotion
    ? { initial: undefined, animate: undefined, variants: undefined }
    : {};

  return (
    <section className="relative min-h-[90vh] flex items-center overflow-hidden bg-gradient-to-br from-slate-950 via-slate-900 to-emerald-950/30">
      {/* ---- Geometric pattern overlay ---- */}
      <GeometricOverlay />

      {/* ---- Ambient glow orbs ---- */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <motion.div
          className="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full bg-emerald-500/10 blur-[120px]"
          animate={
            shouldReduceMotion
              ? {}
              : {
                  scale: [1, 1.2, 1],
                  x: [0, 20, 0],
                  y: [0, -15, 0],
                }
          }
          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.div
          className="absolute -bottom-40 -left-40 h-[400px] w-[400px] rounded-full bg-teal-500/8 blur-[100px]"
          animate={
            shouldReduceMotion
              ? {}
              : {
                  scale: [1, 1.15, 1],
                  x: [0, -20, 0],
                  y: [0, 20, 0],
                }
          }
          transition={{
            duration: 10,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 1,
          }}
        />
        <motion.div
          className="absolute top-1/2 left-1/3 -translate-x-1/2 -translate-y-1/2 h-[600px] w-[600px] rounded-full bg-emerald-500/5 blur-[150px]"
          animate={
            shouldReduceMotion
              ? {}
              : {
                  scale: [1, 1.25, 1],
                  x: [0, 15, -10, 0],
                  y: [0, -10, 15, 0],
                }
          }
          transition={{
            duration: 12,
            repeat: Infinity,
            ease: "easeInOut",
            delay: 2,
          }}
        />
      </div>

      {/* ---- Main content ---- */}
      <motion.div
        className="relative z-10 mx-auto max-w-7xl w-full px-4 py-24 sm:px-6 lg:px-8"
        variants={shouldReduceMotion ? undefined : containerVariants}
        initial={shouldReduceMotion ? undefined : "hidden"}
        animate={shouldReduceMotion ? undefined : "visible"}
      >
        {/* Asymmetric grid: 60/40 */}
        <div className="grid gap-12 lg:grid-cols-[1.5fr_1fr] lg:gap-6 items-center">
          {/* ---- Left: Text content ---- */}
          <div className="space-y-8">
            <div className="space-y-5">
              {/* Eyebrow */}
              <motion.div
                variants={shouldReduceMotion ? undefined : blurReveal}
                {...reducedMotionProps}
              >
                <span className="text-lg tracking-[0.3em] uppercase text-slate-400 font-medium">
                  {isAr ? "نظام الحجز الشامل" : "All-in-One"}
                </span>
              </motion.div>

              {/* Main heading */}
              <motion.div
                variants={shouldReduceMotion ? undefined : blurReveal}
                {...reducedMotionProps}
              >
                <h1 className="text-6xl sm:text-7xl xl:text-8xl font-bold tracking-tight leading-[0.95]">
                  {isAr ? (
                    <>
                      <span className="block text-white">الحجز الذكي</span>
                      <span className="block mt-2 text-3xl sm:text-4xl xl:text-5xl font-semibold">
                        <span className="text-white">لـ </span>
                        <HeroAnimations lang={lang} />
                      </span>
                    </>
                  ) : (
                    <>
                      <span className="block text-white">Smart Booking</span>
                      <span className="block mt-2 text-3xl sm:text-4xl xl:text-5xl font-semibold">
                        <span className="text-white">for </span>
                        <HeroAnimations lang={lang} />
                      </span>
                    </>
                  )}
                </h1>
              </motion.div>

              {/* Subtitle */}
              <motion.p
                className="text-lg text-slate-400 max-w-xl leading-relaxed"
                variants={shouldReduceMotion ? undefined : blurRevealDelayed}
              >
                {isAr
                  ? "حلول حجز متكاملة لجميع الأعمال الخدمية - من المطاعم إلى العيادات، ومن الفنادق إلى مراكز الخدمات"
                  : "Complete booking solutions for all service businesses - from restaurants to clinics, hotels to service centers"}
              </motion.p>
            </div>

            {/* ---- Stats line ---- */}
            <motion.div
              className="flex flex-wrap items-center gap-6"
              variants={shouldReduceMotion ? undefined : statsContainerVariants}
            >
              <motion.div variants={shouldReduceMotion ? undefined : statPill}>
                <span className="text-3xl font-bold bg-gradient-to-r from-emerald-400 to-teal-300 bg-clip-text text-transparent">
                  2M+
                </span>
                <span className="text-slate-500 ml-2 text-sm">
                  {isAr ? "حجز" : "bookings"}
                </span>
              </motion.div>

              <div className="h-8 w-px bg-slate-700" />

              <motion.div variants={shouldReduceMotion ? undefined : statPill}>
                <span className="text-3xl font-bold bg-gradient-to-r from-emerald-400 to-teal-300 bg-clip-text text-transparent">
                  &lt;10s
                </span>
                <span className="text-slate-500 ml-2 text-sm">
                  {isAr ? "وقت الرد" : "response"}
                </span>
              </motion.div>

              <div className="h-8 w-px bg-slate-700" />

              <motion.div variants={shouldReduceMotion ? undefined : statPill}>
                <span className="text-3xl font-bold bg-gradient-to-r from-emerald-400 to-teal-300 bg-clip-text text-transparent">
                  24/7
                </span>
                <span className="text-slate-500 ml-2 text-sm">
                  {isAr ? "متوفر دائما" : "always on"}
                </span>
              </motion.div>
            </motion.div>

            {/* ---- CTA buttons ---- */}
            <motion.div
              className="flex flex-wrap gap-4"
              variants={shouldReduceMotion ? undefined : ctaVariants}
            >
              <MagneticButton as="div" glow>
                <Link
                  href={`/${lang}/demo`}
                  className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 rounded-xl shadow-lg shadow-emerald-500/25 transition-all duration-300 hover:shadow-emerald-500/40 hover:scale-105 overflow-hidden"
                >
                  <span className="relative z-10">
                    {isAr ? "احجز عرضا تجريبيا" : "Book a Demo"}
                  </span>
                  {/* Shimmer overlay */}
                  <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/20 to-transparent bg-[length:200%_100%]" />
                </Link>
              </MagneticButton>

              <MagneticButton as="div">
                <Link
                  href={`/${lang}/services/booking-automation`}
                  className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-slate-300 hover:text-white border border-slate-600 hover:border-slate-400 bg-white/5 backdrop-blur-sm rounded-xl transition-all duration-300 hover:scale-105"
                >
                  {isAr ? "شاهد كيف يعمل" : "See How It Works"}
                  <svg
                    className={`w-5 h-5 ${isAr ? "mr-2 rotate-180" : "ml-2"}`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M9 5l7 7-7 7"
                    />
                  </svg>
                </Link>
              </MagneticButton>
            </motion.div>

            {/* ---- Trust badges ---- */}
            <motion.div
              className="flex items-center gap-6 pt-2"
              variants={shouldReduceMotion ? undefined : trustVariants}
            >
              <div className="flex items-center gap-2">
                <CheckCircle className="w-5 h-5 text-emerald-400" />
                <span className="text-sm text-slate-500">
                  {isAr ? "واتساب معتمد" : "WhatsApp Verified"}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <CheckCircle className="w-5 h-5 text-emerald-400" />
                <span className="text-sm text-slate-500">
                  {isAr ? "آمن ومشفر" : "Secure & Encrypted"}
                </span>
              </div>
            </motion.div>
          </div>

          {/* ---- Right: Phone mockup ---- */}
          <ParallaxElement speed={0.15}>
            <motion.div
              className="relative"
              variants={shouldReduceMotion ? undefined : phoneVariants}
            >
              <div className="relative mx-auto max-w-md lg:-mr-16 xl:-mr-24">
                {/* 3D perspective wrapper */}
                <div
                  className="relative"
                  style={{
                    perspective: "1200px",
                  }}
                >
                  <div
                    style={{
                      transform: "rotateY(-5deg) rotateX(2deg)",
                      transformStyle: "preserve-3d",
                    }}
                  >
                    {/* Emerald glow behind phone */}
                    <div className="absolute inset-0 bg-emerald-500/20 blur-[100px] rounded-full scale-110" />

                    {/* Phone frame */}
                    <div className="relative z-10 rounded-[2.5rem] border-8 border-slate-700 bg-slate-700 shadow-2xl shadow-emerald-500/10">
                      <div className="rounded-[2rem] bg-slate-900 p-4">
                        {/* Chat header */}
                        <div className="mb-4 flex items-center justify-between border-b border-slate-700/60 pb-3">
                          <div className="flex items-center gap-3">
                            <div className="h-10 w-10 rounded-full bg-emerald-500 flex items-center justify-center text-white font-bold text-sm">
                              M
                            </div>
                            <div>
                              <p className="font-semibold text-sm text-white">
                                Mawidi Clinic
                              </p>
                              <p className="text-xs text-emerald-400">
                                ● Online
                              </p>
                            </div>
                          </div>
                          <div className="flex gap-2">
                            <div className="h-8 w-8 rounded-full bg-slate-800" />
                            <div className="h-8 w-8 rounded-full bg-slate-800" />
                          </div>
                        </div>

                        {/* Chat messages */}
                        <div className="space-y-3 h-96 overflow-hidden">
                          {[
                            {
                              side: "end" as const,
                              bg: "bg-emerald-500 text-white rounded-br-none",
                              text: isAr
                                ? "مرحبا، أريد حجز موعد"
                                : "Hi, I want to book an appointment",
                            },
                            {
                              side: "start" as const,
                              bg: "bg-slate-800 text-slate-200 rounded-bl-none",
                              text: isAr
                                ? "أهلا بك! يسعدني مساعدتك في الحجز. ما هي الخدمة المطلوبة؟"
                                : "Welcome! I'd be happy to help you book. What service do you need?",
                            },
                            {
                              side: "end" as const,
                              bg: "bg-emerald-500 text-white rounded-br-none",
                              text: isAr ? "تنظيف أسنان" : "Teeth cleaning",
                            },
                            {
                              side: "start" as const,
                              bg: "bg-slate-800 text-slate-200 rounded-bl-none",
                              text: isAr
                                ? "ممتاز! لدينا مواعيد متاحة غدا في الساعة 10:00 أو 14:00. أيهما يناسبك؟"
                                : "Perfect! We have slots tomorrow at 10:00 AM or 2:00 PM. Which works for you?",
                            },
                            {
                              side: "end" as const,
                              bg: "bg-emerald-500 text-white rounded-br-none",
                              text: isAr
                                ? "الساعة 10:00 مناسبة"
                                : "10:00 AM works",
                            },
                            {
                              side: "start" as const,
                              bg: "bg-slate-800 text-slate-200 rounded-bl-none",
                              text: isAr
                                ? "رائع! سأرسل لك رابط دفع العربون (50 ريال) لتأكيد الحجز"
                                : "Great! I'll send you a deposit link (50 SAR) to confirm your booking",
                            },
                          ].map((msg, i) => (
                            <motion.div
                              key={i}
                              className={`flex justify-${msg.side}`}
                              custom={i}
                              variants={
                                shouldReduceMotion
                                  ? undefined
                                  : chatMessageVariants
                              }
                            >
                              <div
                                className={`max-w-[80%] rounded-2xl px-4 py-2 ${msg.bg}`}
                              >
                                <p className="text-sm">{msg.text}</p>
                              </div>
                            </motion.div>
                          ))}
                        </div>
                      </div>
                    </div>

                    {/* Phone notch */}
                    <div className="absolute top-0 left-1/2 -translate-x-1/2 h-6 w-40 rounded-b-2xl bg-slate-700 z-20" />
                  </div>
                </div>

                {/* ---- Floating glass cards ---- */}
                <motion.div
                  className="absolute -top-8 -right-6 z-30"
                  animate={shouldReduceMotion ? {} : { y: [0, -15, 0] }}
                  transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                >
                  <div className="rounded-xl bg-white/5 backdrop-blur-md border border-white/10 shadow-xl p-3">
                    <MessageCircle className="h-6 w-6 text-emerald-400" />
                  </div>
                </motion.div>

                <motion.div
                  className="absolute -bottom-8 -left-6 z-30"
                  animate={shouldReduceMotion ? {} : { y: [0, -15, 0] }}
                  transition={{
                    duration: 5,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                >
                  <div className="rounded-xl bg-white/5 backdrop-blur-md border border-white/10 shadow-xl p-3">
                    <CheckCircle className="h-6 w-6 text-emerald-400" />
                  </div>
                </motion.div>

                <motion.div
                  className="absolute top-1/2 -right-14 z-30"
                  animate={shouldReduceMotion ? {} : { y: [0, -15, 0] }}
                  transition={{
                    duration: 3.5,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                >
                  <div className="rounded-xl bg-white/5 backdrop-blur-md border border-white/10 shadow-xl p-3">
                    <CalendarCheck className="h-6 w-6 text-emerald-400" />
                  </div>
                </motion.div>
              </div>
            </motion.div>
          </ParallaxElement>
        </div>
      </motion.div>

      {/* ---- Bottom gradient fade to white ---- */}
      <div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-white dark:from-slate-900 to-transparent z-10" />
    </section>
  );
}