"use client"

import { Link } from "@inertiajs/react"
import styles from "./edu.module.scss"
import { motion } from "framer-motion"
import type { Variants } from "framer-motion"

/* ================= MOTION VARIANTS ================= */

const container: Variants = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.12,
      delayChildren: 0.15,
    },
  },
}

const item: Variants = {
  hidden: {
    opacity: 0,
    y: 24,
  },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.7,
      ease: "easeOut",
    },
  },
  exit: {
    opacity: 0,
    y: 16,
    transition: {
      duration: 0.4,
      ease: "easeInOut",
    },
  },
}

/* ================= COMPONENT ================= */

export default function CoursesHero() {
  return (
    <section className={styles.hero}>
      {/* Background accents */}
      <div className={styles.bgGlow} />
      <div className={styles.bgGrid} />

      <motion.div
        className={styles.inner}
        variants={container}
        initial="hidden"
        whileInView="show"
        exit="exit"
        viewport={{ once: false, amount: 0.4 }}
      >
        {/* Eyebrow / Pill */}
        <motion.span variants={item} className={styles.pill}>
          Premium Courses • Expert-Led
        </motion.span>

        {/* Headline */}
        <motion.h1 variants={item}>
          Master <span>In-Demand Skills</span>
          <br /> and Boost Your Career
        </motion.h1>

        {/* Sub text */}
        <motion.p variants={item}>
          Explore professionally curated courses designed to transform beginners into industry-ready professionals. 
          Learn at your pace with hands-on projects, expert guidance, and real-world applications.
        </motion.p>

        {/* Actions */}
        <motion.div variants={item} className={styles.actions}>
          <Link href="/register" className={styles.primaryBtn}>
            Get Started
          </Link>
          <Link href="/courses" className={styles.secondaryBtn}>
            Browse Courses
          </Link>
        </motion.div>

        {/* Trust indicators */}
        <motion.div variants={item} className={styles.trust}>
          <span>🎓 Expert Instructors</span>
          <span>📝 Practical Projects</span>
          <span>💼 Career-Focused</span>
        </motion.div>
      </motion.div>
    </section>
  )
}