import { Button } from '@/components/ui/button.tsx';
import { motion } from 'framer-motion';
import { ArrowRight } from 'lucide-react';
import { heroVariants } from '@/lib/animations';
import { Typewriter } from 'react-simple-typewriter';
import { Link } from 'react-router-dom';
import { HashLink } from 'react-router-hash-link';
// import heroSec from '@/assets/kid.png';

function HeroSection() {
  const heroSec = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716914097/thumbnails/vwpjnlmm1dylb4jfrurp.png'
  return (
    <section id="heroSection" className="bg-primary-foreground overflow-hidden">
      <main className="flex 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"
            >
              Start Teaching
              <br />
              <Typewriter
                words={[
                  'Programming',
                  'Mechatronics',
                  '3D for kids',
                  'Python for kids',
                  'AI for kids',
                ]}
                loop={0}
                cursor
                cursorStyle="|"
                typeSpeed={150}
                deleteSpeed={80}
                delaySpeed={1000}
              />
              <br />
              Today with Snai3i
            </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"
            >
              We are a curriculum marketplace where any school can buy high
              quality curriculums and implement them in ONE DAY!
            </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="#inst-designer">
                <Button variant="default" size="lg">
                  Join us
                </Button>
              </HashLink>
              <Link to="/spark">
                <Button
                  variant="link"
                  size="lg"
                  className="flex flex-row gap-2 text-sm"
                >
                  Register your Child
                  <ArrowRight size={32} />
                </Button>
              </Link>
            </motion.div>
          </div>
        </div>
        <div className="flex justify-center ">
          <motion.img
            variants={heroVariants({ ltr: true })}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true }}
            src={heroSec}
            alt="little Snai3i"
            className="w-full"
            draggable="false"
          />
        </div>
      </main>
    </section>
  );
}

export default HeroSection;