"use client";

import Image from "next/image";


import logo from "../../public/assets/logo/logo1.png";
import { FaFacebook, FaInstagram } from "react-icons/fa";
import { BsTwitter } from "react-icons/bs";
import { LiaLinkedin } from "react-icons/lia";
import { LocateIcon, Mail, MapPin } from "lucide-react";
import { FaLocationPin } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import ScrollToTop from "./scrollToTop";
import Link from "next/link";


import galleryImg1 from '../../public/assets/footer/gallary/galleryFotter4.jpg'
import galleryImg5 from '../../public/assets/footer/gallary/galleryFotter5.jpg'
import galleryImg6 from '../../public/assets/footer/gallary/galleryFotter2.jpg'

const socialIcons = [
  { icon: FaFacebook, name: "facebook" , link: 'https://www.facebook.com/sqgroupbd' },
  { icon: BsTwitter, name: "twitter" , link: 'https://x.com/sqgroupbd?s=20'},
  { icon: FaInstagram, name: "instagram", link:'https://www.instagram.com/sq_group_official?utm_source=ig_web_button_share_sheet&igsh=ZDNlZDc0MzIxNw==' },
  { icon: LiaLinkedin, name: "linkedin" , link: 'https://www.linkedin.com/in/sq-group-60837140b/'},
];
 
const galleryImg = [
  galleryImg1.src,
  "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=800&q=80",
  "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=800&q=80",
  "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=800&q=80",
  galleryImg5.src,
  galleryImg6.src,
]

export default function Footer() {
  return (
    <footer className="relative bg-[url('/assets/footer/footerBg2.webp')] bg-cover bg-center bg-no-repeat text-white">
      
      <div className="absolute inset-0 bg-black/60"></div>

      <div className="relative z-10">
        <div className="container mx-auto px-6 py-10 lg:py-20">
          
          <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-4">
            
            <div>
              <Image
                src={logo}
                alt="SQ Group Logo"
                width={170}
                height={80}
                className="w-[170px]"
              />

              <p className="mt-4 text-base leading-6 text-gray-300">
                Empowering Industries, Building the Future. Delivering innovation
                across electricals, renewable energy, packaging, agriculture,
                healthcare and technology sectors.
              </p>
            </div>

            <div>
              <h3 className="mb-4 text-xl font-semibold">Quick Links</h3>

              <ul className="space-y-3 text-gray-300">
                <li><a href="/" className="hover:text-white transition">Home</a></li>
                <li><a href="/about-company" className="hover:text-white transition">About</a></li>
                <li><a href="/services" className="hover:text-white transition">Services</a></li>
                <li><a href="/contact" className="hover:text-white transition">Contact</a></li>
              </ul>
            </div>

            <div>
              <h3 className="text-xl font-bold mb-5">Contact Us</h3>

              <div className="space-y-5">
                
                <div className="flex gap-3">
                  <span className="text-orange-500 text-xl"><MapPin></MapPin></span>
                  <p className="text-gray-400">
                    Suvastu Suraiya Trade Center, Plot-57, Road-21, Kemal Ataturk Avenue, Banani, Dhaka 1212.
                  </p>
                </div>

                <div className="flex gap-3">
                  <span className="text-orange-500"><Mail></Mail></span>
                  <p className="text-gray-400">info@sqgroup.com</p>
                </div>
              </div>

              <div className="flex gap-3 mt-8 lg:mt-16">
                {socialIcons.map(({ icon: Icon, name, link }) => (
                  <Link href={link}
                    key={name}
                    target="_blank"
                    className="group w-12 h-12 rounded-full bg-white/10 hover:bg-orange-500 transition-all duration-300 flex items-center justify-center cursor-pointer"
                  >
                    <Icon
                      size={20}
                      className="text-orange-500 group-hover:text-white transition-colors"
                    />
                  </Link>
                ))}
              </div>
            </div>

            <div>
              <h3 className="text-xl font-bold mb-5">Gallery</h3>

              <div className="grid grid-cols-3 gap-3">
                {galleryImg.map((item) => (
                  <div key={item} className="overflow-hidden rounded-xl">
                    <Image
                      width={100}
                      height={100}
                      src={item}
                      alt={item}
                      className="w-full h-24 object-cover hover:scale-110 transition duration-500"
                    />
                  </div>
                ))}

            
              </div>
            </div>


          </div>
        </div>

        <div className="border-t border-white/20">
          <div className="container mx-auto flex flex-col md:flex-row items-center justify-between gap-4 px-6 lg:py-5 pt-5 pb-32 text-sm text-gray-300">
            
            <p>© {new Date().getFullYear()} SQ Group. All rights reserved.</p>

            <div className="flex gap-6 text-gray-400">
              <a href="#" className="hover:text-white">Privacy Policy</a>
              <a href="#" className="hover:text-white">Terms & Conditions</a>
              <a href="#" className="hover:text-white">Support</a>
            </div>

          </div>
        </div>
        <ScrollToTop></ScrollToTop>

      </div>
    </footer>
  );
}