"use client";

import { motion, Variants } from "framer-motion";
import { ArrowRight, Sparkles } from "lucide-react";
import { Button } from "@/Components/ui/button";
import { Link } from "@inertiajs/react";

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.2,
      delayChildren: 0.3,
    },
  },
};

const itemVariants: Variants = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 0.8,
      ease: [0.215, 0.610, 0.355, 1.000],
    },
  },
};

export function Hero() {
  return (
    <section className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden w-full bg-background selection:bg-primary/30 selection:text-primary pt-20">
      {/* Background Gradients - Boosted for Light Mode using CSS variables */}
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-primary/20 dark:bg-primary/10 blur-[120px] rounded-full opacity-[var(--hero-glow-opacity)] pointer-events-none" />
      <div className="absolute bottom-0 right-0 w-[800px] h-[800px] bg-blue-500/10 dark:bg-blue-500/5 blur-[150px] rounded-full opacity-[var(--hero-glow-opacity)] pointer-events-none" />
      
      {/* Grid Pattern Overlay */}
      <div className="absolute inset-0 bg-grid z-0" />

      {/* Japanese Wave Pattern - Adjusted Opacity */}
      <div className="absolute inset-0 bg-seigaiha z-0 opacity-80 dark:opacity-40" />

      <motion.div
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="relative z-10 container px-4 mx-auto flex flex-col items-center text-center gap-8"
      >
        <motion.div variants={itemVariants}>
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-primary/10 bg-primary/5 backdrop-blur-sm shadow-inner text-sm text-primary font-bold mb-6">
            <Sparkles className="w-4 h-4" />
            <span>Pendaftaran Batch 2026 Dibuka!</span>
          </div>
        </motion.div>

        <motion.h1 
            variants={itemVariants}
            className="text-5xl md:text-7xl lg:text-8xl font-black tracking-tight text-foreground leading-[1.1]"
        >
          Hubungkan Impianmu <br />
          <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary via-primary/80 to-primary/40 italic">
            Ke Negeri Sakura
          </span>
        </motion.h1>

        <motion.p 
            variants={itemVariants}
            className="max-w-2xl text-lg md:text-xl text-muted-foreground leading-relaxed font-medium"
        >
          Platform edukasi terdepan untuk penguasaan Bahasa Jepang & karir profesional. 
          Belajar JLPT N5 hingga N2 dengan kurikulum modern dan Spaced Repetition System.
        </motion.p>

        <motion.div variants={itemVariants} className="flex flex-col sm:flex-row gap-5 mt-4">
          <Button asChild size="lg" className="rounded-full bg-primary hover:bg-primary/90 text-white min-w-[180px] h-14 shadow-xl shadow-primary/20 font-bold text-lg">
            <Link href={route('register')}>
                Mulai Belajar Gratis
                <ArrowRight className="w-5 h-5 ml-2" />
            </Link>
          </Button>
          <Button asChild size="lg" variant="outline" className="rounded-full border-border hover:bg-muted min-w-[180px] h-14 font-bold text-lg text-foreground">
            <Link href="#programs">
                Lihat Program
            </Link>
          </Button>
        </motion.div>
      </motion.div>
    </section>
  );
}