"use client"

import { motion } from "framer-motion"
import { FiUserCheck, FiBookOpen, FiCode, FiAward } from "react-icons/fi"
import styles from "./steps.module.scss"
import type { Variants } from "framer-motion"

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

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

const item: Variants = {
  hidden: { opacity: 0, y: 24 },
  show: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.6, ease: "easeOut" },
  },
}

/* ================= STEPS DATA ================= */

const steps = [
  {
    title: "Sign Up & Verify",
    description: "Create your account and complete secure verification to start learning.",
    icon: FiUserCheck,
  },
  {
    title: "Select a Course",
    description: "Browse our curated courses and pick the ones that match your goals.",
    icon: FiBookOpen,
  },
  {
    title: "Learn & Complete Projects",
    description: "Follow lessons, do projects, and practice real-world skills.",
    icon: FiCode,
  },
  {
    title: "Get Certified",
    description: "Earn certificates to showcase your skills and boost your career.",
    icon: FiAward,
  },
]

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

export default function EduSteps() {
  return (
    <section className={styles.steps}>
      {/* Background Glows and Grid */}
      <div className={styles.bgGlow} />
      <div className={styles.bgGrid} />

      <motion.div
        className={styles.inner}
        variants={container}
        initial="hidden"
        whileInView="show"
        viewport={{ once: false, amount: 0.3 }}
      >
        <motion.h2 variants={item} className={styles.heading}>
          How Our Learning Journey Works
        </motion.h2>
        <motion.p variants={item} className={styles.subtext}>
          Follow these simple steps to start mastering new skills and get certified.
        </motion.p>

        <div className={styles.grid}>
          {steps.map((step, idx) => {
            const Icon = step.icon
            return (
              <motion.div
                key={idx}
                className={styles.card}
                variants={item}
                whileHover={{ scale: 1.05, y: -4 }}
              >
                <div className={styles.iconWrapper}>
                  <Icon className={styles.icon} />
                  {idx < steps.length - 1 && <span className={styles.connector} />}
                </div>
                <h3>{step.title}</h3>
                <p>{step.description}</p>
              </motion.div>
            )
          })}
        </div>
      </motion.div>
    </section>
  )
}