"use client";

import Image from "next/image";
import Link from "next/link";
import { siteConfig } from "@/lib/config/site";
import {
  MessageCircle,
  Zap,
  Activity,
  ArrowRight,
  Globe,
  Server,
  Clock,
} from "lucide-react";
import { motion } from "motion/react";
import { WordRotate } from "@/components/ui/word-rotate";
import { BorderBeam } from "@/components/ui/border-beam";

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.13, delayChildren: 0.15 },
  },
};

const itemVariants = {
  hidden: { y: 18, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: { type: "spring" as const, stiffness: 90, damping: 16 },
  },
};

const stats = [
  { value: "1,500+", label: "Servers deployed", icon: Server },
  { value: "99.9%", label: "Uptime SLA", icon: Activity },
  { value: "4", label: "Active regions", icon: Globe },
  { value: "<15m", label: "Support response", icon: Clock },
];

export default function HeroSection() {
  return (
    <section
      id="hero-section"
      aria-label="Hero"
      className="relative w-full min-h-screen flex flex-col overflow-hidden bg-linear-to-b from-mauve-900 to-mauve-950 px-6 lg:px-12 font-sans"
    >
      <div className="absolute inset-0 z-0 pointer-events-none select-none">
        <Image
          src="/asset/images/wallpaper/mcbg.jpg"
          alt=""
          fill
          className="object-cover object-center opacity-5 blur-xs"
          priority
          sizes="100vw"
          quality={40}
        />

      </div>

      <div className="absolute bottom-0 right-0 w-full h-full pointer-events-none overflow-hidden">
        <motion.div
          initial={{ opacity: 0, y: "50%", rotateX: 55, rotateY: -18, rotateZ: 5, scale: 0.8 }}
          animate={{ opacity: 1, y: "8%", rotateX: 22, rotateY: -6, rotateZ: 2, scale: 1 }}
          transition={{ delay: 0.45, duration: 1.8, ease: [0.16, 1, 0.3, 1] }}
          style={{ transformOrigin: "center center", transformPerspective: 1400 }}
          className="hidden lg:block absolute bottom-[2%] right-[-4%] lg:w-[52%] max-w-[960px] aspect-4/3"
        >
          <motion.div
            animate={{ y: [0, -14, 0] }}
            transition={{ duration: 7, repeat: Infinity, ease: "easeInOut", delay: 2.3 }}
            className="relative w-full h-full rounded-3xl border border-white/8 bg-elevated/90 p-2 backdrop-blur-md shadow-[0_32px_80px_rgba(0,0,0,0.55),0_0_90px_rgba(51,146,234,0.09),inset_0_1px_0_rgba(255,255,255,0.06)]"
          >
            <div className="relative w-full h-full rounded-2xl overflow-hidden border border-white/5 bg-surface">
              <Image
                src="/asset/images/panel/panel.png"
                alt="Dashboard Preview"
                fill
                className="object-cover object-top-left"
                loading="lazy"
              />
              <div className="absolute inset-x-0 bottom-0 h-2/5 bg-linear-to-t from-base via-base/50 to-transparent pointer-events-none z-10" />
            </div>
            <BorderBeam duration={10} delay={4} />
          </motion.div>
        </motion.div>
      </div>

      <div className="flex-1 flex items-center relative z-20 pointer-events-none">
        <div className="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-8 items-center py-28">
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            className="flex flex-col items-start text-left pointer-events-auto"
          >
            <motion.div variants={itemVariants} className="mb-7">
              <div className="inline-flex items-center gap-3">
                <span className="text-[10px] md:text-xs font-bold uppercase tracking-widest text-accent-text">
                  Now supporting <Image src="/asset/hytale.png" alt="Minecraft" width={64} height={64} className="inline-block"/> Hosting!
                </span>
              </div>
            </motion.div>

            <motion.h1
              variants={itemVariants}
              className="text-6xl sm:text-7xl lg:text-[5.25rem] font-semibold tracking-tighter text-white leading-[1.05] mb-7"
            >
              <span className="block -mb-2">Your Server,</span>
              <WordRotate
                className="text-accent-text leading-[1.2] font-bold"
                words={["Always Online.", "Easy Access.", "Starts in 60s."]}
                duration={3000}
              />
            </motion.h1>

            <motion.p
              variants={itemVariants}
              className="text-[1rem] md:text-lg text-content-dim max-w-md mb-10 leading-relaxed"
            >
              Game servers, Discord bots, Webhosting. All on the same
              reliable infrastructure.{" "}
              <span className="text-zinc-300">
                Deploy once, forget the hassle.
              </span>
            </motion.p>

            <motion.div
              variants={itemVariants}
              className="flex flex-col sm:flex-row items-start gap-3 w-full sm:w-auto"
            >
              <Link href="/game-host" className="group flex items-center justify-center gap-2 px-7 py-3.5 w-full sm:w-auto rounded-lg text-sm font-semibold text-white bg-accent hover:bg-accent-hover shadow-[0_4px_0_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.12)] hover:shadow-[0_6px_0_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.12)] hover:-translate-y-0.5 active:translate-y-1 active:shadow-none transition-all duration-150">
                <Zap className="w-4 h-4" />
                Deploy Server
                <ArrowRight className="w-4 h-4 ml-0.5 group-hover:translate-x-1 transition-transform duration-200" />
              </Link>
              <a href={siteConfig.social.discord} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-2 px-7 py-3.5 w-full sm:w-auto rounded-lg text-sm font-semibold text-zinc-300 border border-border hover:border-border-hover hover:bg-zinc-900/40 shadow-[0_3px_0_rgba(0,0,0,0.5)] hover:shadow-[0_4px_0_rgba(0,0,0,0.5)] hover:-translate-y-0.5 active:translate-y-1 active:shadow-none transition-all duration-150">
                <MessageCircle className="w-4 h-4" />
                Join Community
              </a>
            </motion.div>
          </motion.div>

          <div className="hidden lg:block" />
        </div>
      </div>

      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 1.1, duration: 0.7, ease: "easeOut" }}
        className="relative z-20 pb-10 pointer-events-auto"
      >
        <div className="max-w-7xl mx-auto pt-6 flex flex-wrap items-center gap-x-10 gap-y-4">
          {stats.map((s) => (
            <div key={s.label} className="flex items-center gap-3">
              <div className="p-1.5 rounded-lg border border-white/6 bg-white/3">
                <s.icon className="w-3.5 h-3.5 text-content-muted" />
              </div>
              <div>
                <p className="text-sm font-semibold text-white leading-none">
                  {s.value}
                </p>
                <p className="text-[11px] text-content-subtle mt-0.5">{s.label}</p>
              </div>
            </div>
          ))}
        </div>
      </motion.div>
    </section>
  );
}