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

function HeroSection() {
  // const heroSec = 'https://res.cloudinary.com/dx8l1izei/image/upload/v1716916071/thumbnails/kojbcde4dypitpi6itsa.png'
  return (
    <section className="bg-primary-foreground overflow-hidden h-full pb-8">
      <main className="flex py-12 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"
            >
              We teach your child
              <br />
              <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"
            >
              Kid’s Engineering university is a 5 years program, after which
              kids between 10-16 y.o will be ready to start their own tech
              projects. It starts with a common trank for one year, followed by
              3 majors for 3 years and a mini MBA the last year.
            </motion.h4>
            <motion.div
              variants={heroVariants({ opacityDuration: 1.6, delay: 0.08 })}
              initial="hidden"
              whileInView="show"
              viewport={{ once: true }}
              className="flex flex-row"
            >
              <Link to="/register/spark">
                <Button variant="default" size="lg">
                  Register your child
                </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;