import React from 'react'
import { GiCoffeeBeans, GiDonut } from "react-icons/gi";
import { BiSolidDrink } from "react-icons/bi";

const Footer = () => {
  return (
    <div className='w-full h-full bg-[#FFC55A] px-5 lg:px-10 pb-5'>
        <div className='grid grid-cols-1 md:grid-cols-2'>
            <div className='w-full xl:w-3/4 flex flex-col gap-4 text-start text-white pl-0 pr-0 md:pr-5 lg:pr-0 md:-pl-10 lg:pl-10 xl:pl-20 2xl:pl-40'>
                <p className='uppercase font-bold text-2xl lg:text-4xl mb-0 lg:mb-2'>Stay up to date</p>
                <input placeholder='Name' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
                <input placeholder='Email' className='outline-none bg-transparent px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full'/>
                <button className='px-4 lg:px-6 py-2 lg:py-3 border border-white rounded-full text-white hover:bg-white hover:text-[#FFC55A] duration-300'>Subscribe</button>
            </div>
            <div className='flex flex-col gap-5 sm:gap-0 sm:flex-row justify-evenly mt-10 md:mt-0'>
                <div className='flex flex-col gap-2 sm:gap-3 text-white'>
                    <GiCoffeeBeans className='text-2xl sm:text-3xl'/>
                    <p className='text-base sm:text-lg font-bold uppercase'>Info</p>
                    <div className='flex flex-col gap-2 text-sm sm:text-base'>
                        <p className='cursor-pointer hover:underline'>Shipping + Delivery</p>
                        <p className='cursor-pointer hover:underline'>Privacy Policy</p>
                        <p className='cursor-pointer hover:underline'>FAQs</p>
                    </div>
                </div>
                <div className='flex flex-col gap-2 sm:gap-3 text-white'>
                    <GiDonut className='text-2xl sm:text-3xl'/>
                    <p className='text-base sm:text-lg font-bold uppercase'>Learn</p>
                    <div className='flex flex-col gap-2 text-sm sm:text-base'>
                        <p className='cursor-pointer hover:underline'>Gift Cards</p>
                        <p className='cursor-pointer hover:underline'>Loyalty Program</p>
                        <p className='cursor-pointer hover:underline'>Press + Media</p>
                    </div>
                </div>
                <div className='flex flex-col gap-2 sm:gap-3 text-white'>
                    <BiSolidDrink className='text-2xl sm:text-3xl'/>
                    <p className='text-base sm:text-lg font-bold uppercase'>Contact</p>
                    <div className='flex flex-col gap-2 text-sm sm:text-base'>
                        <p className='cursor-pointer hover:underline'>Contact Us</p>
                        <p className='cursor-pointer hover:underline'>Instagram</p>
                        <p className='cursor-pointer hover:underline'>Facebook</p>
                    </div>
                </div>
            </div>
        </div>
        <div className='mt-20 border-t-2 flex items-center justify-center text-white'>
            <p className='text-sm sm:text-base mt-2 sm:mt-5'>© Copyright Puffy Dough 2024</p>
        </div>
    </div>
  )
}

export default Footer