import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import { GoClock } from 'react-icons/go'
import { PiCalendarCheck, PiInfo, PiMapPinLight } from 'react-icons/pi'

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-base sm:text-xl font-semibold min-[400px]:text-lg'>Set your availability and share your link.</p>
            <p className='text-base sm:text-xl font-semibold min-[400px]:text-lg'>Schedule.Me ensures you never get double booked!</p>
        </div>
    </div>
    <div className='max-w-xl bg-white grid grid-cols-2 mx-auto mt-2 border border-black border-t-8 rounded-md shadow-md min-[400px]:mt-5'>
      <div className='flex flex-col gap-2 p-5 border-r'>
        <p className='text-md uppercase font-semibold tracking-wide mb-2'>Schedule.Me</p>
        <p className='flex w-5 h-5 rounded-full bg-gray-500 text-white justify-center items-center mb-2'>S</p>
        <p className='flex gap-1 items-center text-xs'><PiInfo className='text-base'/>Stand-up meeting</p>
        <p className='flex gap-1 items-center text-xs'><PiCalendarCheck className='text-base'/>April 30th, 2024</p>
        <p className='flex gap-1 items-center text-xs'><GoClock className='text-base'/>30 minutes </p>
        <p className='flex gap-1 items-center text-xs'><PiMapPinLight className='text-base'/>Zoom</p>
        <Link href="https://zoom.us/" className="text-gray-500 underline text-xs">https://zoom.us</Link>
      </div>
      <div className='flex flex-col gap-2 px-5 mt-14 mb-5'>
        <p className='text-xs font-semibold'>Select date & time</p>
        <Image src='/calendar.png' width={200} height={200} alt='calendar'/>
      </div>
    </div>
  </>
  )
}

export default Hero