import Link from 'next/link'; // ✅ Correct import
import React from 'react';
import { IoMailOpenOutline } from "react-icons/io5";
import { IoCall } from "react-icons/io5";
import { FaFacebookF } from "react-icons/fa6";
import { FaXTwitter } from "react-icons/fa6";
import { PiInstagramLogoFill } from "react-icons/pi";
import { SiLinkedin } from "react-icons/si";
import { FaYoutube } from "react-icons/fa";
import { FaPinterest } from "react-icons/fa";
import { FaCaretRight } from "react-icons/fa";
import Image from 'next/image';

const Footer = () => {
  return (
    <div className='Footer_Section relative'>
        <div className='absolute right-0 bottom-12 w-[27%] hidden lg:block'>
          <Image src="/images/girl_vectore.svg" className='w-full ms-auto ' width={1200} height={600} alt="Illustration of a professional working — Fruxinfo" />
        </div>
        <div className='absolute left-0 bottom-0 w-[12%] hidden lg:block'>
            <Image src="/images/footer_team_vectore.svg" className='w-full ' width={1200} height={600} alt="Fruxinfo team illustration" />
        </div>
      <Image src="/images/Footer_Design_img.webp" className='w-full' width={1200} height={600} alt="Fruxinfo footer accent illustration" />
      
      <div className='bg-[#141414]'>
        <div className='max-w-6xl mx-auto overflow-hidden px-2'>
          <div className="grid items-center grid-cols-1 gap-4 md:grid-cols-12 pt-5">
            <div className="md:col-span-6">
              <div>
                <h3 className='text-[30px] md:text-[50px] text-center md:text-start font-bold text-[#FFF] Manrope'>
                  let’s create <br/> something New!
                </h3>
              </div>
            </div>
            <div className="md:col-span-6">
              <div className='flex justify-center md:justify-start my-4'>
                <Image src="/images/footer_logo.svg" className='w-[70%]' width={1200} height={600} alt="Footer Logo" />
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 gap-4 md:grid-cols-12 pb-20 mt-5">
  <div className="md:col-span-6">
    <div>
      <div className="flex gap-10 mt-4">
        <div className="flex flex-col gap-2">
          <Link href="/" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Home
            </div>
          </Link>

          <Link href="/about" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              About Us
            </div>
          </Link>

          <Link href="/career" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Careers
            </div>
          </Link>

          <Link href="/team" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Our Team
            </div>
          </Link>

          <Link href="/case-study" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Case Study
            </div>
          </Link>

          <Link href="/blog" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Blog
            </div>
          </Link>

          <Link href="/services" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              All Services
            </div>
          </Link>

          <Link href="/contact" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Contact Us
            </div>
          </Link>
        </div>

        <div className="flex flex-col gap-2">
          <Link href="/web-design" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Web Design
            </div>
          </Link>

          <Link href="/graphic-design" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Graphic Design
            </div>
          </Link>

          <Link href="/web-development" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Web Development
            </div>
          </Link>

          <Link href="/app-development" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Application Development
            </div>
          </Link>

          <Link href="/seo" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              SEO
            </div>
          </Link>

          <Link href="/digital-marketing" className="flex">
            <div className="flex items-center text-[#FFF] text-[16px] hover:text-[#E77025]">
              <FaCaretRight className="text-[14px] me-2" />
              Digital Marketing
            </div>
          </Link>
        </div>
      </div>
    </div>
  </div>

  <div className="md:col-span-6">
    <div className="mt-4">
      <h3 className="text-[20px] md:text-[28px] text-center md:text-start font-bold underline text-[#FFF] mb-4">
        Get In Touch
      </h3>

      <div>
        <Link
          href="mailto:karshan.zala@fruxinfo.com"
          className="flex justify-center md:justify-start items-center gap-2 cursor-pointer text-[#FFF] hover:text-[#E77025] py-2"
        >
          <IoMailOpenOutline className="me-3" />
          karshan.zala@fruxinfo.com
        </Link>
      </div>

      <div>
        <Link
          href="tel:+919898412890"
          className="flex justify-center md:justify-start items-center gap-2 cursor-pointer text-[#FFF] hover:text-[#E77025] py-2"
        >
          <IoCall className="me-3" />
          +91 98984 12890
        </Link>
      </div>

      <div className="flex justify-center md:justify-start gap-6 mt-4">
        <Link href="https://www.facebook.com/Fruxinfo/"><FaFacebookF className="text-[22px] text-[#FFF] hover:text-[#E77025]" /></Link>
        <Link href="https://x.com/fruxinfo"><FaXTwitter className="text-[22px] text-[#FFF] hover:text-[#E77025]" /></Link>
        <Link href="https://www.instagram.com/accounts/login/?next=%2Ffruxinfo_pvt_ltd%2F&source=omni_redirect"><PiInstagramLogoFill className="text-[22px] text-[#FFF] hover:text-[#E77025]" /></Link>
        <Link href="https://www.linkedin.com/company/fruxinfo-private-limited"><SiLinkedin className="text-[22px] text-[#FFF] hover:text-[#E77025]" /></Link>
        <Link href="https://www.youtube.com/channel/UCiKWKYWwaVFY7okLELebePQ"><FaYoutube className="text-[22px] text-[#FFF] hover:text-[#E77025]" /></Link>
        <Link href="https://www.pinterest.com/fruxinfopvtltd/?actingBusinessId=832321712291870490"><FaPinterest className="text-[22px] text-[#FFF] hover:text-[#E77025]" /></Link>
      </div>
    </div>
  </div>
</div>

<div className="grid grid-cols-1 gap-4 md:grid-cols-6 xl:grid-cols-12 justify-items-center border-t-2 p-3 border-[#FFF]">
  <div className="md:col-span-6">
    <p className="text-[#FFF] text-[16px]">
      Copyright © Fruxinfo Pvt. Ltd. All Rights Reserved
    </p>
  </div>

  <div className="md:col-span-6 flex justify-end">
    <div className="flex flex-wrap gap-5">
      <Link href="/privacy-policy" className="text-[12px] md:text-[16px] text-[#FFF] hover:text-[#E77025]">Privacy Policy</Link>

      <Link href="/terms-and-conditions" className="text-[12px] md:text-[16px] text-[#FFF] hover:text-[#E77025]">Terms of use</Link>

      <Link href="/refund-policy" className="text-[12px] md:text-[16px] text-[#FFF] hover:text-[#E77025]">Refund Policy</Link>

      <Link href="/payment-policy" className="text-[12px] md:text-[16px] text-[#FFF] hover:text-[#E77025]">Payment Policy</Link>
    </div>
  </div>
</div>

        </div>
      </div>
    </div>
  );
};

export default Footer;