import { Button } from '@/components/ui/button';
import { gridVariants } from '@/lib/animations';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';
import { enrollBg } from '@/assets/images/storm';
import { Link } from 'react-router-dom';

export default function Enroll() {
  return (
    <section id="enroll">
      <motion.div
        variants={gridVariants}
        initial="hidden"
        whileInView="show"
        viewport={{ once: true, amount: 0.2 }}
        className="flex justify-center items-center mb-16 relative px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem]"
      >
        <img draggable="false" src={enrollBg} alt="storm" className="rounded-[20px]" />
        <div className="absolute w-full flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-14">
          <h2 className="text-white font-bold">Get ready to learn and grow</h2>
          <Link to="/register/storm">
            <Button className="border-[5px] border-orange-300 font-inter text-xl font-semibold text px-8 py-3 md:px-10 md:py-6">
              Enroll for free <ArrowRight size={26} className="ml-2" />
            </Button>
          </Link>
        </div>

        {/* <div className="bg-enroll-bg w-[1241px] h-[242px]  flex flex-col md:flex-row items-center justify-evenly">
          <h2 className="text-white font-bold">Get ready to learn and grow</h2>
          <Button className=" border-[5px] border-orange-300 font-inter text-xl font-semibold text px-10 py-6" >
            Enroll for free <ArrowRight size={26} className="ml-2" />
          </Button>
        </div> */}
      </motion.div>
    </section>
  );
}