import Image from 'next/image'
import React from 'react'
import Footer from '../../components/layout/Footer'

const ContactPage = () => {
  return (
    <>
        <div className='w-full h-full flex flex-col relative'>
            <p className='text-center mt-20 uppercase text-[50px] sm:text-[72px] md:text-[90px] lg:text-[125px] xl:text-[140px] leading-none text-black font-extrabold tracking-tighter drop-shadow-[0_3px_3px_rgba(45,45,45,0.5)] px-5'>Contact</p>
            <div className='bg-[#FAF3E8] w-full h-full rounded-t-3xl -mt-5 sm:-mt-10 px-5 pb-20'>
                <p className='mt-14 text-center text-sm sm:text-base text-gray-700'>Feel free to use this contact form to reach out to us</p>
                <p className='text-center text-sm sm:text-base text-gray-700'>Our team is ready for you!</p>
                <div className='max-w-7xl mx-auto mt-10'>
                    <div className='grid grid-col-2 md:grid-cols-3 gap-10'>
                        <div className='col-span-1 md:col-span-2 pr-0 lg:pr-5 xl:pr-20 flex flex-col gap-2'>
                            <div>
                                <label className='text-gray-700 font-medium'>Name</label>
                                <input type='text' className=''/>
                            </div>
                            <div>
                                <label className='text-gray-700 font-medium'>Email</label>
                                <input type='email' className=''/>
                            </div>
                            <div>
                                <label className='text-gray-700 font-medium'>Phone Number</label>
                                <input type='text' className=''/>
                            </div>
                            <div className='flex flex-col'>
                                <label className='text-gray-700 font-medium'>Message</label>
                                <textarea className='outline-none resize-none' rows="5"/>
                            </div>
                            <button type='button' className='bg-[#DCA0AE] p-2 rounded-md text-white font-medium'>Send</button>
                        </div>
                        <div className=''>
                            <div className='flex flex-col border-b border-[#DCA0AE] pb-5 mb-5'>
                                <p className='font-semibold mb-3 text-gray-700'>Snail Mail</p>
                                <p>148 Terry Lane</p>
                                <p>Maitland, FL 32751</p>
                            </div>
                            <div className='flex flex-col border-b border-[#DCA0AE] pb-5 mb-5'>
                                <p className='font-semibold mb-3 text-gray-700'>Electronic Mail</p>
                                <p>puffydough@example.com</p>
                            </div>
                            <div className='flex flex-col border-b border-[#DCA0AE] pb-5'>
                                <p className='font-semibold mb-3 text-gray-700'>Phone Support</p>
                                <p>Hours: 9am - 5pm (CST), Monday - Friday</p>
                                <p>321-329-8783</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className='bg-[#FFC55A]'>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
                    <path fill="#FAF3E8" fill-opacity="1" d="M0,64L12,106.7C24,149,48,235,72,229.3C96,224,120,128,144,96C168,64,192,96,216,128C240,160,264,192,288,208C312,224,336,224,360,208C384,192,408,160,432,160C456,160,480,192,504,224C528,256,552,288,576,298.7C600,309,624,299,648,272C672,245,696,203,720,165.3C744,128,768,96,792,106.7C816,117,840,171,864,160C888,149,912,75,936,42.7C960,11,984,21,1008,26.7C1032,32,1056,32,1080,69.3C1104,107,1128,181,1152,202.7C1176,224,1200,192,1224,154.7C1248,117,1272,75,1296,85.3C1320,96,1344,160,1368,186.7C1392,213,1416,203,1428,197.3L1440,192L1440,0L1428,0C1416,0,1392,0,1368,0C1344,0,1320,0,1296,0C1272,0,1248,0,1224,0C1200,0,1176,0,1152,0C1128,0,1104,0,1080,0C1056,0,1032,0,1008,0C984,0,960,0,936,0C912,0,888,0,864,0C840,0,816,0,792,0C768,0,744,0,720,0C696,0,672,0,648,0C624,0,600,0,576,0C552,0,528,0,504,0C480,0,456,0,432,0C408,0,384,0,360,0C336,0,312,0,288,0C264,0,240,0,216,0C192,0,168,0,144,0C120,0,96,0,72,0C48,0,24,0,12,0L0,0Z"></path>
                </svg>
            </div>
        </div>
        <Footer/>
    </>
  )
}

export default ContactPage