import {
  TraningPresentation,
  Test,
  onBoarding,
  designYourCourse,
  sellItOnTheMp,
  storm,
} from '@/assets/images/storm';
import { gridVariants } from '@/lib/animations';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';

// const steps = [
//   {
//     icon: TraningPresentation,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Training
//       </motion.h5>
//     ),
//   },
//   {
//     icon: Test,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Training
//       </motion.h5>
//     ),
//   },
//   {
//     icon: onBoarding,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         OnBoarding
//       </motion.h5>
//     ),
//   },
//   {
//     icon: designYourCourse,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Design Your
//         <br />
//         Course
//       </motion.h5>
//     ),
//   },
//   {
//     icon: sellItOnTheMp,
//     title: (
//       <motion.h5 className="text-secondary-light font-semibold text-center">
//         Sell It On The
//         <br />
//         MarketPlace
//       </motion.h5>
//     ),
//   },
// ];

export default function InstDesSteps() {
  return (
    <motion.section className="my-[2rem] lg:my-[3rem] px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem]">
      <div className="flex justify-center items-center mb-16">
        <motion.img
          draggable="false"
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
          src={storm}
          alt="storm"
        />
      </div>
      <div className="flex flex-col gap-y-5 md:flex-row items-center md:justify-around">
        {/* {steps.map((step, index) => (
        <>
          <motion.div
            key={index}
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            className="flex flex-col items-center space-y-2"
          >
            <motion.img src={step.icon} alt={'step-' + index + 1} />
            {step.title}
          </motion.div>
          {index < 4 && (
            <div key={index + 10}>
              <ArrowRight
                size={28}
                className="text-primary rotate-90 md:rotate-0"
              />
            </div>
          )}
        </>
      ))} */}

        <div className="flex flex-col items-center space-y-2">
          <motion.img
            draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={TraningPresentation}
            alt="Traning Presentation"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Training
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
            draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={Test}
            alt="Test"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Test
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
            draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={onBoarding}
            alt="On Boarding"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            OnBoarding
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
            draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={designYourCourse}
            alt="Design Your Course"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Design Your
            <br />
            Course
          </motion.h5>
        </div>
        <motion.div
          variants={gridVariants}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
        >
          <ArrowRight
            size={28}
            className="text-primary rotate-90 md:rotate-0"
          />
        </motion.div>
        <div className="flex flex-col items-center space-y-2">
          <motion.img
            draggable="false"
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            src={sellItOnTheMp}
            alt="Sell It On The Mp"
          />
          <motion.h5
            variants={gridVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, amount: 0.2 }}
            className="text-secondary-light font-semibold text-center"
          >
            Sell It On The
            <br />
            MarketPlace
          </motion.h5>
        </div>
      </div>
    </motion.section>
  );
}