"use client"
import React from 'react';
import {  FacebookOutlined, Instagram, Pinterest } from '@mui/icons-material';
import Image from 'next/image';



const Footer = () => {

  

  return (
    <footer className='w-full  bg-d-green'>
      <div className='pt-24 pb-10 max-w-screen-xl flex flex-col md:flex-row items-center md:justify-between mx-auto'>
        <p className='text-3xl md:text-4xl lg:text-5xl 2xl:text-6xl text-white px-4 md:px-0 font-light basis-3/4 text-center md:text-left'>Wonderful spaces start with simple conversations. Let our experts guide you on the best approaches to design and build</p>
        <div className="md:basis-1/4 bg-main md:ml-40 h-full w-[200px] text-black font-normal text-base px-10 mt-4 md:mt-0 flex flex-row justify-center items-center py-4">Book Consultation</div>
      </div>
      {/* <hr className="my-6 max-w-screen-xl mx-auto border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" /> */}
      <div className="w-full max-w-screen-xl mx-auto p-4 md:py-8">
        <div className="sm:flex sm:items-center sm:justify-between">
           <div className='flex flex-row m md:flex-col justify-between items-center mb-4 md:mb-0'>
            <div className='w-[80px] h-[80px] relative'>
                <Image alt='logo' src='/deeba_main_icon.png' layout='fill' objectFit='cover'/>
            </div>
            <div className="flex    sm:justify-center sm:mt-0 pl-4">
              
              
              
              
             
          </div>
            </div>
            <div className='flex flex-row items-center'>
            <p className='text-white text-base mr-3'>Follow us on socials</p>
            <div className="flex flex-wrap justify-center md:justify-start items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
               <a href="#" className="text-gray-500 hover:text-gray-900 dark:hover:text-white pr-2">
                  <FacebookOutlined sx={{ color : '#c79f01'}}/>
                  <span className="sr-only">Facebook page</span>
              </a>
              <a href="#" className="text-gray-500 hover:text-gray-900 dark:hover:text-white pr-2">
                  <Instagram sx={{ color : '#c79f01'}}/>
                  <span className="sr-only">Instagram page</span>
              </a>
              <a href="#" className="text-gray-500 hover:text-gray-900 dark:hover:text-white pr-2">
                  <Pinterest sx={{ color : '#c79f01'}}/>
                  <span className="sr-only">Pinterest page</span>
              </a>
            </div>
            </div>
        </div>
        <hr className="my-6 border-gray-200 sm:mx-auto dark:border-main lg:my-8" />
        <span className="block text-sm text-gray-500 sm:text-center dark:text-white300">© 2023 <a href="" className="hover:underline">Deeba™</a>. All Rights Reserved. Experience by <span className='text-main'>Flame Code</span></span>
    </div>

    </footer>
  );
};

export default Footer;