"use client";

import Link from "next/link";
import { motion } from "framer-motion";
import { ArrowRight, ShieldCheck, Sparkles, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";

const fadeUp = {
  hidden: { opacity: 0, y: 28 },
  show: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: {
      delay: 0.12 + i * 0.08,
      duration: 0.55,
      ease: [0.22, 1, 0.36, 1] as [number, number, number, number],
    },
  }),
};

export function Hero({
  title = "Digital gaming, delivered like a studio.",
  subtitle = "Top up, voucher, membership, dan lisensi resmi — proses instan, harga kompetitif, support 24/7.",
}: {
  title?: string;
  subtitle?: string;
}) {
  return (
    <section className="relative isolate overflow-hidden pt-28 md:pt-32">
      <div className="pointer-events-none absolute inset-0 grid-bg opacity-70" />
      <div className="pointer-events-none absolute -left-24 top-20 h-72 w-72 rounded-full bg-accent/20 blur-[100px]" />
      <div className="pointer-events-none absolute -right-16 top-40 h-80 w-80 rounded-full bg-accent/10 blur-[110px]" />

      <div className="container-shell relative grid items-center gap-12 pb-16 lg:grid-cols-[1.1fr_0.9fr] lg:pb-24">
        <div>
          <motion.p
            custom={0}
            variants={fadeUp}
            initial="hidden"
            animate="show"
            className="mb-5 inline-flex items-center gap-2 rounded-full border border-accent/30 bg-accent/10 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-accent"
          >
            <Sparkles className="h-3.5 w-3.5" />
            Premium Digital Store
          </motion.p>

          <motion.h1
            custom={1}
            variants={fadeUp}
            initial="hidden"
            animate="show"
            className="max-w-xl font-[family-name:var(--font-space)] text-4xl font-bold leading-[1.08] tracking-tight md:text-6xl"
          >
            <span className="text-gradient">305 Gaming</span>
            <span className="mt-3 block text-text">{title}</span>
          </motion.h1>

          <motion.p
            custom={2}
            variants={fadeUp}
            initial="hidden"
            animate="show"
            className="mt-5 max-w-lg text-base leading-relaxed text-muted md:text-lg"
          >
            {subtitle}
          </motion.p>

          <motion.div
            custom={3}
            variants={fadeUp}
            initial="hidden"
            animate="show"
            className="mt-8 flex flex-wrap items-center gap-3"
          >
            <Button href="/products" size="lg" className="min-w-[160px]">
              Belanja Sekarang
              <ArrowRight className="h-4 w-4" />
            </Button>
            <Button href="/category/top-up-game" variant="secondary" size="lg">
              Top Up Game
            </Button>
          </motion.div>

          <motion.ul
            custom={4}
            variants={fadeUp}
            initial="hidden"
            animate="show"
            className="mt-10 flex flex-wrap gap-6 text-sm text-muted"
          >
            <li className="flex items-center gap-2">
              <Zap className="h-4 w-4 text-accent" />
              Instant delivery
            </li>
            <li className="flex items-center gap-2">
              <ShieldCheck className="h-4 w-4 text-accent" />
              Secure checkout
            </li>
            <li className="flex items-center gap-2">
              <span className="h-2 w-2 rounded-full bg-accent shadow-[0_0_12px_#00D084]" />
              Support &lt; 5 menit
            </li>
          </motion.ul>
        </div>

        <motion.div
          initial={{ opacity: 0, scale: 0.94, x: 24 }}
          animate={{ opacity: 1, scale: 1, x: 0 }}
          transition={{ delay: 0.25, duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
          className="relative mx-auto w-full max-w-md lg:max-w-none"
        >
          <div className="absolute -inset-4 rounded-[2rem] bg-gradient-to-br from-accent/25 via-transparent to-accent/5 blur-2xl" />
          <div className="relative overflow-hidden rounded-[1.75rem] border border-white/10 bg-surface shadow-[0_30px_80px_rgba(0,0,0,0.45)]">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(0,208,132,0.22),transparent_45%)]" />
            <div className="relative aspect-[4/5] p-6 md:aspect-[5/6] md:p-8">
              <div className="flex items-center justify-between">
                <p className="font-[family-name:var(--font-space)] text-sm font-semibold tracking-wide text-muted">
                  LIVE CATALOG
                </p>
                <span className="rounded-full bg-accent/15 px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-accent">
                  Online
                </span>
              </div>

              <div className="mt-8 space-y-4">
                {[
                  { label: "Steam Wallet", meta: "Voucher", price: "dari 105rb" },
                  { label: "MLBB Diamonds", meta: "Top Up", price: "dari 22rb" },
                  { label: "Netflix Premium", meta: "Membership", price: "dari 45rb" },
                ].map((row, i) => (
                  <motion.div
                    key={row.label}
                    animate={{ y: [0, -4, 0] }}
                    transition={{ duration: 4 + i, repeat: Infinity, ease: "easeInOut", delay: i * 0.4 }}
                    className="flex items-center justify-between rounded-2xl border border-white/8 bg-bg/70 px-4 py-3 backdrop-blur"
                  >
                    <div>
                      <p className="font-semibold">{row.label}</p>
                      <p className="text-xs text-muted">{row.meta}</p>
                    </div>
                    <p className="text-sm font-semibold text-accent">{row.price}</p>
                  </motion.div>
                ))}
              </div>

              <div className="absolute bottom-6 left-6 right-6">
                <Link
                  href="/products"
                  className="group flex items-center justify-between rounded-2xl bg-accent px-5 py-4 font-[family-name:var(--font-space)] font-semibold text-black transition hover:bg-accent-dim"
                >
                  Explore catalog
                  <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
                </Link>
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}