import { FaMapLocationDot } from 'react-icons/fa6';
import {
  FaPhoneAlt,
  FaFacebook,
  FaInstagram,
  FaYoutube,
  FaLinkedin,
} from 'react-icons/fa';
import Image from 'next/image';
import logoPic from '/public/images/logo-puce-red.svg';

export function Footer() {
  return (
    <footer className='bg-[#f8f6f5] flex flex-col md:flex-row py-12 border-t-2 border-black max-w-7xl mx-auto gap-8 px-4'>
      {/* First Column: Logo and Description */}
      <div className='space-y-4 flex flex-col basis-1/4 flex-shrink'>
        <Image
          src={logoPic}
          alt='Mozimo Logo'
          width={100}
          height={100}
          className='h-full logo'
        />
        <p className='text-sm'>
          India&apos;s Premier European style bean-to-bar chocolate experience.
        </p>
      </div>

      {/* Second Column: Contact Information */}
      <div className='space-y-4 flex flex-col basis-1/4'>
        <h3 className='font-semibold'>Get in touch</h3>
        <p className='text-sm flex items-center'>
          <FaPhoneAlt />
          &nbsp; 0172-4045414
        </p>
        <p className='text-sm flex items-center'>
          <FaMapLocationDot />
          &nbsp; SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
        </p>
      </div>

      {/* Third Column: Links */}
      <div className='space-y-4 flex flex-col basis-1/4'>
        <h3 className='font-semibold'>Know more</h3>
        <ul className='space-y-2'>
          <li>
            <a
              href='/privacy-policy'
              className='text-sm text-brown-600 hover:underline'
            >
              Privacy Policy
            </a>
          </li>
          <li>
            <a
              href='/refund-policy'
              className='text-sm text-brown-600 hover:underline'
            >
              Refund & Return Policy
            </a>
          </li>
          <li>
            <a href='/terms' className='text-sm text-brown-600 hover:underline'>
              Terms & Conditions
            </a>
          </li>
          <li>
            <a
              href='/shipping'
              className='text-sm text-brown-600 hover:underline'
            >
              Shipping Policy
            </a>
          </li>
        </ul>
      </div>

      {/* Additional Links */}
      <div className='space-y-4 flex flex-col basis-1/4'>
        <ul className='space-y-2'>
          <li>
            <a href='/faq' className='text-sm text-brown-600 hover:underline'>
              FAQ
            </a>
          </li>
          <li>
            <a
              href='/locate'
              className='text-sm text-brown-600 hover:underline'
            >
              Locate our Store
            </a>
          </li>
          <li>
            <a
              href='/bulk-ordering'
              className='text-sm text-brown-600 hover:underline'
            >
              Bulk Ordering
            </a>
          </li>
        </ul>
        <h3 className='font-semibold'>Find Us On</h3>
        <div className='flex space-x-4'>
          <a
            href='https://facebook.com'
            className='text-brown-600 hover:text-brown-800'
          >
            <FaFacebook />
          </a>
          <a
            href='https://instagram.com'
            className='text-brown-600 hover:text-brown-800'
          >
            <FaInstagram />
          </a>
          <a
            href='https://youtube.com'
            className='text-brown-600 hover:text-brown-800'
          >
            <FaYoutube />
          </a>
          <a href='https://linkedin.com' className=''>
            <FaLinkedin />
          </a>
        </div>
      </div>
    </footer>
  );
}

// <footer className="bg-gray-800 text-white">
//   <div className="container mx-auto px-4 py-6">
//     <p>&copy; {new Date().getFullYear()} Kakawa Chocolate Shop. All rights reserved.</p>
//     {/* Social media links */}
//   </div>
// </footer>