"use client";

import { useState, useEffect, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight, Zap, Star, Gift } from "lucide-react";
import Link from "next/link";
import { LayoutTextFlip } from "@/components/ui/layout-text-flip";

const slides = [
  {
    bg: "from-orange-900/90 via-dark/70 to-dark",
    badge: "🎮 Top Up Instant",
    title: "Top Up Game",
    subtitle: "Cepat & Aman!",
    desc: "Ribuan produk game tersedia. Proses otomatis dalam hitungan detik. Harga termurah se-Indonesia!",
    cta: "Mulai Top Up",
    ctaLink: "#products",
    image: "/images/banners/hero1.webp",
  },
  {
    bg: "from-blue-900/90 via-dark/70 to-dark",
    badge: "💎 Harga Termurah",
    title: "Harga Bersaing",
    subtitle: "Se-Indonesia!",
    desc: "Bandingkan harga kami. Dijamin paling murah dengan kualitas terbaik dan proses tercepat.",
    cta: "Bandingkan Harga",
    ctaLink: "#products",
    image: "/images/banners/hero2.webp",
  },
  {
    bg: "from-purple-900/90 via-dark/70 to-dark",
    badge: "🎁 Bonus New Member",
    title: "Daftar &",
    subtitle: "Dapatkan Bonus!",
    desc: "Join member {process.env.NEXT_PUBLIC_APP_NAME} — dapatkan cashback, referral bonus, dan promo eksklusif!",
    cta: "Daftar Sekarang",
    ctaLink: "/login",
    image: "/images/banners/hero3.webp",
  },
];

export default function HeroBanner() {
  const [current, setCurrent] = useState(0);
  const [isPaused, setIsPaused] = useState(false);

  const next = useCallback(() => setCurrent((c) => (c + 1) % slides.length), []);
  const prev = useCallback(() => setCurrent((c) => (c - 1 + slides.length) % slides.length), []);

  useEffect(() => {
    if (isPaused) return;
    const t = setInterval(next, 5000);
    return () => clearInterval(t);
  }, [isPaused, next]);

  const s = slides[current];

  return (
    <section
      className="relative rounded-2xl overflow-hidden min-h-[420px] md:min-h-[480px]"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      {/* Background layers */}
      <AnimatePresence mode="wait">
        <motion.div
          key={current}
          initial={{ opacity: 0, scale: 1.08 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.8 }}
          className="absolute inset-0"
        >
          {/* Image bg */}
          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{ backgroundImage: `url(${s.image})` }}
          />
          {/* Gradient overlay */}
          <div className={`absolute inset-0 bg-gradient-to-r ${s.bg}`} />
          {/* Dot pattern overlay */}
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.05)_1px,transparent_0)] bg-[length:24px_24px]" />
          {/* Bottom vignette */}
          <div className="absolute inset-0 bg-gradient-to-t from-dark via-transparent to-transparent opacity-60" />
        </motion.div>
      </AnimatePresence>

      {/* Social bar (like bangjeff) */}
      <div className="absolute bottom-16 left-1/2 -translate-x-1/2 z-20 hidden md:flex items-center gap-3">
        {[
          { icon: "📷", label: "@zxuantopup" },
          { icon: "🌐", label: "zxuantopup.com" },
          { icon: "📱", label: "WhatsApp" },
        ].map((item) => (
          <span
            key={item.label}
            className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-black/40 backdrop-blur-md text-[10px] font-medium text-white/70 border border-white/10"
          >
            {item.icon} {item.label}
          </span>
        ))}
      </div>

      {/* Content */}
      <div className="relative z-10 flex flex-col justify-center h-full min-h-[420px] md:min-h-[480px] px-6 md:px-12 py-10">
        <AnimatePresence mode="wait">
          <motion.div
            key={current}
            initial={{ opacity: 0, x: 40 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -40 }}
            transition={{ duration: 0.5 }}
            className="max-w-xl"
          >
            {/* Badges */}
            <div className="flex flex-wrap gap-2 mb-4">
              <span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-black/40 backdrop-blur-sm text-xs font-semibold text-white border border-white/10">
                {s.badge}
              </span>
              <span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-primary/20 backdrop-blur-sm text-xs font-semibold text-primary border border-primary/20">
                <Zap size={12} /> Cashback 5%
              </span>
              <span className="inline-flex items-center gap-1 px-3 py-1.5 rounded-full bg-secondary/20 backdrop-blur-sm text-xs font-semibold text-secondary border border-secondary/20">
                <Star size={12} /> Referral
              </span>
            </div>

            {/* Titles */}
            <h1 className="font-heading text-3xl md:text-5xl lg:text-6xl font-black text-white leading-[1.1] mb-2">
              {s.title}
              <br />
              <span className="bg-gradient-to-r from-primary via-orange-400 to-secondary bg-clip-text text-transparent">
                {s.subtitle}
              </span>
            </h1>

            <p className="text-sm md:text-base text-white/70 mb-6 max-w-md leading-relaxed">
              {s.desc}
            </p>

            {/* CTA buttons */}
            <div className="flex flex-wrap gap-3">
              <Link href={s.ctaLink} className="btn-primary flex items-center gap-2 text-sm">
                <Zap size={16} />
                {s.cta}
              </Link>
              <Link href="#products" className="btn-secondary flex items-center gap-2 text-sm">
                <Gift size={16} />
                Lihat Semua
              </Link>
            </div>
          </motion.div>
        </AnimatePresence>

        {/* LayoutTextFlip tagline */}
        <div className="mt-6">
          <div className="flex flex-wrap items-center gap-2 text-sm md:text-base">
            <LayoutTextFlip
              text="{process.env.NEXT_PUBLIC_APP_NAME} — "
              words={["Termurah", "Tercepat", "Terpercaya", "24/7 Online"]}
              duration={2500}
            />
          </div>
        </div>
      </div>

      {/* Nav arrows */}
      <button onClick={prev} className="absolute left-3 top-1/2 -translate-y-1/2 z-20 p-2.5 rounded-full bg-black/50 backdrop-blur-sm text-white/70 hover:text-white hover:bg-black/70 transition-all border border-white/10">
        <ChevronLeft size={20} />
      </button>
      <button onClick={next} className="absolute right-3 top-1/2 -translate-y-1/2 z-20 p-2.5 rounded-full bg-black/50 backdrop-blur-sm text-white/70 hover:text-white hover:bg-black/70 transition-all border border-white/10">
        <ChevronRight size={20} />
      </button>

      {/* Progress dots */}
      <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-20 flex gap-2">
        {slides.map((_, i) => (
          <button
            key={i}
            onClick={() => setCurrent(i)}
            className={`h-1.5 rounded-full transition-all duration-500 ${
              i === current ? "w-8 bg-primary" : "w-4 bg-white/30 hover:bg-white/50"
            }`}
          />
        ))}
      </div>
    </section>
  );
}