"use client";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faFacebookF,
  faTwitter,
  faInstagram,
  faYoutube,
} from "@fortawesome/free-brands-svg-icons";

import React, { useState } from "react";
import Image from "next/image";
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";

const Footer = () => {
  return (
    <>
      <div className=" py-3 px-2 sm:px-[initial]">
        <div className="container m-auto sm:flex sm:justify-between py-10  gap-3">
          <div className=" w-full sm:w-[40%] pb-10 sm:pb-[initial]">
            <div className="border-l-[#0F6939] border-l-3 px-3  text-2xl">
              Office
            </div>
            <Image
              src={`${process.env.NEXT_PUBLIC_API_URL}/images_cus/logo/logo.png`}
              alt="Mamata BD"
              width={80}
              height={80}
              className="w-[80px] h-auto my-4"
            />
            <div className="mb-4">
              House NO-13, Lane-1 Road-1, Block-L halishohor Housing Estate,
              Chattogram, Bangladesh.
            </div>
            <div>
              <div className="flex gap-4">
                <FontAwesomeIcon icon={faFacebookF} color="white" />
                <FontAwesomeIcon icon={faTwitter} color="white" />
                <FontAwesomeIcon icon={faInstagram} color="white" />
                <FontAwesomeIcon icon={faYoutube} color="white" />
              </div>
            </div>
          </div>
          <div className="w-full sm:w-[40%] pb-10 sm:pb-[initial]">
            <div className="border-l-[#0F6939] border-l-3 px-3 text-2xl">
              Stay with us
            </div>
            <div className="mt-4">
              Envisioning.......A Health hazard free and poverty alleviated
              Bangladesh upholding Basic Human Rights.
            </div>
            <div className="flex gap-4 py-5">
              <FontAwesomeIcon
                icon={faFacebookF}
                className="text-red-500 text-2xl hover:text-red-700 hover:scale-110 transition-transform duration-300"
              />
              <FontAwesomeIcon
                icon={faTwitter}
                className="text-red-500 text-2xl hover:text-red-700 hover:scale-110 transition-transform duration-300"
              />
              <FontAwesomeIcon
                icon={faInstagram}
                className="text-red-500 text-2xl hover:text-red-700 hover:scale-110 transition-transform duration-300"
              />
              <FontAwesomeIcon
                icon={faYoutube}
                className="text-red-500 text-2xl hover:text-red-700 hover:scale-110 transition-transform duration-300"
              />
            </div>
          </div>
          <div className="w-full sm:w-[20%] ">
            <div className="border-l-[#0F6939] border-l-3 px-3 text-2xl">
              Popular Tags
            </div>
            <div className="my-4 ">
              <ul>
                <li className="sm:border-b-[#0f69397c] sm:border-b-1 py-1">
                  <FontAwesomeIcon icon={faArrowRight} /> Charity
                </li>
                <li className="sm:border-b-[#0f69397c] sm:border-b-1 py-1">
                  <FontAwesomeIcon icon={faArrowRight} /> Children
                </li>
                <li className="sm:border-b-[#0f69397c] sm:border-b-1 py-1">
                  <FontAwesomeIcon icon={faArrowRight} /> Education
                </li>
                <li className="sm:border-b-[#0f69397c] sm:border-b-1 py-1">
                  <FontAwesomeIcon icon={faArrowRight} /> Humanity
                </li>
                <li className="sm:border-b-[#0f69397c] sm:border-b-1 py-1">
                  <FontAwesomeIcon icon={faArrowRight} /> Woman Rights
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div className="bg-[#0F6939] py-3 px-8 sm:px-[initial]">
        <div className="container m-auto text-white text-[14px] text-center sm:flex sm:justify-between justify-center items-center sm:items-start">
          <div className="pb-2 sm:pb-[initial]">
            Copyright © 2025, Designed & Developed by Mamata
          </div>
          <div className="pt-3 sm:pt-[initial]">
            <ul className="flex flex-wrap gap-2 justify-center ">
              <li className="whitespace-nowrap">About</li>
              <li className="whitespace-nowrap">News & Events</li>
              <li className="whitespace-nowrap">Gallery</li>
              <li className="whitespace-nowrap">Career</li>
              <li className="whitespace-nowrap">Contact</li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
};

export default Footer;