import { Button } from '@/components/ui/button';
import { ArrowRight } from 'lucide-react';
import React from 'react';
import { heroVariants } from '@/lib/animations';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
// import smartPeople from '@/assets/smart-people.svg';

interface InstructionalDesignerSectionProps {}

const InstructionalDesignerSection: React.FC<
  InstructionalDesignerSectionProps
> = () => {
  const smartPeople = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914992/thumbnails/q5xkqd5g6glbfowtqidf.png'
  return (
    <section
      id="inst-designer"
      className="flex flex-col content-between items-center justify-between py-12 px-[1.5rem] lg:px-[3.25rem]"
    >
      <div className="flex flex-col md:flex-row justify-around items-center w-full ">
        <div className="flex flex-col items-start">
          <motion.h2
            variants={heroVariants({ delay: 0.02 })}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            className="text-secondary max-w-md font-extrabold mb-2"
          >
            You can start creating your own course on our platform today.
          </motion.h2>
          <motion.h4
            variants={heroVariants({ opacityDuration: 1.2 })}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            className="text-secondary-light font-inter font-medium mb-5"
          >
            We provide you with all the tools and methods, <br />
            guess what... a certification too.
          </motion.h4>
          <motion.div
            variants={heroVariants({ opacityDuration: 1.6, delay: 0.08 })}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
          >
            <Link to="/storm">
              <Button
                variant="link"
                size="lg"
                className="flex font-inter flex-row gap-2 px-0 mb-8 text-md"
              >
                Become an Instructional Designer
                <ArrowRight size={32} />
              </Button>
            </Link>
          </motion.div>
        </div>
        <motion.img
          variants={heroVariants({ ltr: true })}
          initial="hidden"
          whileInView="show"
          viewport={{ once: true }}
          src={smartPeople}
          alt="graduation"
          draggable="false"
          className="w-96 hidden lg:block lg:w-auto"
        />
        <img
        draggable="false"
          src={smartPeople}
          alt="graduation"
          className="w-96 lg:hidden lg:w-auto"
        />
      </div>
    </section>
  );
};

export default InstructionalDesignerSection;