"use client"
import React from 'react'
import {motion} from "framer-motion"
import Image from 'next/image';
import Link from 'next/link';


const Hero = () => {
  const textAnimation = {
    animate: {x: [0, -1000], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
  };
  const textAnimation1 = {
    animate: {x: [-1000, 0], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
  };


  return (
    <>
    <div className='w-full h-screen flex flex-col gap-10 md:gap-20'>
      <div className='mt-10 -z-20'>
          <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
            <p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
          </motion.div>
      </div>
      <div className='mt-10 -z-20'>
          <motion.div className='absolute whitespace-nowrap' variants={textAnimation1} animate="animate">
            <p className='mt-[30px] text-7xl md:text-9xl text-white font-bold tracking-wider uppercase'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
          </motion.div>
      </div>
      <div className='mt-10 -z-20'>
          <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
            <p className='mt-[30px] text-7xl md:text-9xl text-[#FDE2DE] font-bold tracking-wider uppercase text-stroke-3'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
          </motion.div>
      </div>
      <div className='w-full h-[90%] md:h-[90%] flex flex-col justify-center items-center absolute'>
        <Image src='/donut.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[500px] mt-64'/>
        <Image src='/cup.png' width={1000} height={1000} alt='home_donut' className='drop-shadow-2xl w-[340px] sm:w-[450px] -mt-40 sm:-mt-60 absolute -z-10'/>
        <p className='w-full md:w-[700px] px-5 text-center text-xl sm:text-4xl tracking-wide text-white drop-shadow-[0_2px_2px_rgba(195,125,90,1)] mt-5'>We bake our donuts fresh everyday using high-quality ingredients without artificial additives.</p>
        <Link href='' className='mt-5 sm:mt-10 border text-sm border-[#E78895] px-4 py-2 rounded-full uppercase text-[#95743D] font-semibold hover:bg-[#E78895] hover:text-[#FDE2DE] duration-300'>Order</Link>
      </div>
    </div>
    </>
  )
}

export default Hero