import { Button } from '@/components/ui/button.tsx';
import { motion } from 'framer-motion';
import { heroVariants } from '@/lib/animations';
import { Typewriter } from 'react-simple-typewriter';
import { HashLink } from 'react-router-hash-link';
// import heroSec from '@/assets/images/storm/designer-working.png';


function HeroSection() {
  const heroSec = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716915449/thumbnails/wlmxqehcsslqhwpjzkgu.png'
  return (
    <section className="bg-primary-foreground overflow-hidden pb-8">
      <main className="flex py-10 flex-col space-y-12 lg:space-y-0 lg:flex-row items-center lg:justify-around px-[1.5rem] lg:px-[3.25rem] xl:px-[6.25rem] ">
        <div className="flex flex-shrink justify-center">
          <div className="flex flex-col items-start ">
            <motion.h1
              variants={heroVariants({ delay: 0.02 })}
              initial="hidden"
              whileInView="show"
              viewport={{ once: true }}
              className=" text-nowrap overflow-hidden text-secondary font-extrabold mb-8"
            >
              Design your course
              <br />
              in{' '}
              <Typewriter
                words={[
                  'Programming',
                  'Mechatronics',
                  '3D for kids',
                  'Python for kids',
                  'AI for kids',
                ]}
                loop={0}
                cursor
                cursorStyle="|"
                typeSpeed={150}
                deleteSpeed={80}
                delaySpeed={1000}
              />
            </motion.h1>
            <motion.h4
              variants={heroVariants({ opacityDuration: 1.2 })}
              initial="hidden"
              whileInView="show"
              viewport={{ once: true }}
              className="text-secondary-light  max-w-xl font-medium mb-12"
            >
              Join the team of our world-class instructional designers and start
              selling your courses today!
              <br />
              You don't know how?
              <br />
              Do not worry, we provide you with everything you need.
            </motion.h4>
            <motion.div
              variants={heroVariants({ opacityDuration: 1.6, delay: 0.08 })}
              initial="hidden"
              whileInView="show"
              viewport={{ once: true }}
              className="flex flex-row"
            >
              <HashLink to="#enroll">
                <Button variant="default" size="lg">
                  Become instructional designer
                </Button>
              </HashLink>
            </motion.div>
          </div>
        </div>
        <div className="flex justify-center ">
          <motion.img
          draggable="false"
            variants={heroVariants({ ltr: true })}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            src={heroSec}
            alt="little Snai3i"
            className="w-full"
          />
        </div>
      </main>
    </section>
  );
}

export default HeroSection;