import Image from 'next/image';
import Link from 'next/link';
import React from 'react'
import { Parallax } from "react-scroll-parallax";

const HomeCreateBox = () => {
  return (
    <Parallax speed={-10}>
      <div className='w-full h-full bg-[#FFD0D0] rounded-t-3xl md:pb-20 pb-10 px-5'>
        <div className='grid grid-cols-1 md:grid-cols-2 items-center py-10 px-5 lg:px-10'>
          <div className='w-full hidden md:flex mt-5 md:mt-0 justify-center md:justify-start'>
            <Link href='/menu' className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</Link>
          </div>
          <div className='flex flex-col gap-4'>
            <p className='text-center md:text-end text-3xl lg:text-[50px] leading-none xl:text-6xl 2xl:text-[4.5vw] text-[#FF8989] uppercase font-semibold drop-shadow-[0_3px_3px_rgba(105,105,105,1)]'>Mothers Day Box</p>
            <p className='w-full text-center md:text-end text-base lg:text-lg xl:text-xl text-[#95743D]'>Lets show our appreciation for our moms by treating them with the special Mothers Day Box from Puffy Dough!</p> 
          </div>
          <div className='w-full flex md:hidden mt-5 md:mt-0 justify-center md:justify-end items-end text-end'>
            <Link href='/menu' className='px-4 lg:px-6 py-2 text-sm lg:text-base lg:py-3 uppercase rounded-full font-semibold border border-[#95743D] text-[#95743D] hover:text-[#FFD0D0] hover:bg-[#E78895] hover:border-[#E78895] duration-300'>View Product</Link>
          </div>
        </div>
        <div className='flex flex-col md:flex-row justify-between px-2 lg:px-5 mb-5'>
          <div className='flex justify-center md:justify-start items-center px-2'>
            <Image src='/donuts_special.jpg' width={800} height={800} alt='home-create-box' className='w-[800px] md:w-[600px] xl:w-[800px] h-[500px] md:h-[600px] xl:h-[650px] 2xl:h-[800px] object-cover rounded-xl'/>
          </div>
          <div className='flex flex-col text-center md:text-end px-2 gap-5 md:items-end items-center'>
            <p className='text-base lg:text-lg xl:text-xl text-[#AE1D74] font-bold mt-5 md:mt-0'>Mothers Day Donut Flavours:</p>
            <div className='text-base lg:text-lg text-[#AE1D74]'>
              <p className='font-semibold'>Love You Mama</p>
              <p className='text-sm md:text-base'>Strawberry frosted raised ring topped with Mothers Day sprinkle</p>
            </div>
            <div className='text-base lg:text-lg text-[#AE1D74]'>
              <p className='font-semibold'>Sweet & Salty</p>
              <p className='text-sm md:text-base'>Strawberry frosted vanilla cake topped with cream cheese frosting and crushed pretzels</p>
            </div>
            <div className='text-base lg:text-lg text-[#AE1D74]'>
              <p className='font-semibold'>Hi Mom</p>
              <p className='text-sm md:text-base'>Vanilla cake topped with vanilla buttercream, covered in pink icing with candy décor and a red rosette</p>
            </div>
            <div className='text-base lg:text-lg text-[#AE1D74]'>
              <p className='font-semibold'>Love Mom</p>
              <p className='text-sm md:text-base'>Hot pink frosted with black and white drizzle and a heart-shaped doughnut filled with chocolate whip </p>
            </div>
            <div className='text-base lg:text-lg text-[#AE1D74]'>
              <p className='font-semibold'>Tenderheart Bear</p>
              <p className='text-sm md:text-base'>Raspberry frosted raised bear topped with Tenderheart Bear décor</p>
            </div>
          </div>
        </div>
      </div>
    </Parallax>
  )
}

export default HomeCreateBox
