import Image from 'next/image'
import Link from 'next/link'
import React from 'react'

const Hero = () => {
  return (
    <div className='flex flex-col text-center mt-20 md:mt-40 overflow-hidden'>
        <div>
            <p className='uppercase text-5xl md:text-6xl font-semibold drop-shadow-xl font-outline-2 text-white mb-5'>Schedule meetings</p>
            <p className='uppercase text-4xl md:text-5xl font-semibold drop-shadow-xl mb-5'>for <span>everyone</span></p>
            <p className='text-lg sm:text-xl font-semibold'>Set your availability and share your link.</p>
            <p className='text-lg sm:text-xl font-semibold'>Schedule.Me ensures you never get double booked!</p>
        </div>
        <div className='mt-20'>
            <p className='mb-10 text-sm'>Sign up with <span className='font-semibold'>Google</span> and <span className='font-semibold'>Facebook</span></p>
            <div className='flex flex-col md:flex md:flex-row gap-5 justify-center items-center text-center'>
                <button className='flex items-center gap-1 mb-0 md:mb-5 px-4 py-2 border bg-[#101010] text-white hover:opacity-90'><Image src='/google.png' width={20} height={20} alt='google' className='w-[15px] h-[15px]'/>Sign up with Google</button>
                <button className='flex items-center gap-1 mb-5 px-4 py-2 border border-[#101010] hover:bg-[gray] hover:border-[gray] hover:text-white'><Image src='/facebook.png' alt='facebook' width={20} height={20} className='w-[15px] h-[15px]'/>Sign up with Facebook</button>
            </div>
            <hr className='mb-5 mt-5 w-[350px] mx-auto'/>
            <Link href="" className='text-sm text-[gray] hover:underline transition-all duration-500'>Sign up with your email</Link>
        </div>
    </div>
  )
}

export default Hero