"use client";
import Link from "next/link";
import Image from "next/legacy/image";
import location from "@/public/images/footer/location.png";
import phone from "@/public/images/footer/phone.png";
import gmail from "@/public/images/footer/gmail.png";
import { useNavigationServices } from "@/lib/hooks/useServices";
import { useJobs } from "@/lib/hooks/useCareer";

const Footer = () => {
  const currentYear = new Date().getFullYear();
  const { services: dynamicServices, loading: servicesLoading } = useNavigationServices();
  const { jobs, loading: jobsLoading } = useJobs();
  
  // Static header data
  const headerData = {
    title: "GNX Soft Ltd.",
    logoUrl: "/images/logo.png",
    logoLightUrl: "/images/logo-light.png",
    navigationType: "both",
    headerClass: "tp-header",
    scrolledClass: "navbar-active",
    buttonText: "Let's Talk",
    buttonUrl: "/contact-us",
    buttonClass: "btn btn-primary d-none d-sm-flex",
    isActive: true,
    displayOrder: 1,
    metaData: JSON.stringify({
      mobileBreakpoint: 992,
      scrollThreshold: 50,
      hideOnMobile: false,
      mobileFirst: true,
      hamburgerMenu: true
    })
  };

  // Get logo URL from static data
  const logoSrc = headerData.logoUrl;

  return (
    <footer className="footer position-relative overflow-x-clip">
      <div className="container">
        {/* Enterprise Footer Logo Section */}
        <div className="row">
          <div className="col-12">
            <div className="footer-logo-section text-center pt-40 pb-30">
              <div className="enterprise-logo-container">
                <div className="enterprise-security-badges">
                  {/* Left Badge */}
                  <div className="security-badges-left">
                    <div className="security-badge">
                      <i className="fa-solid fa-building"></i>
                      <span>Enterprise Solutions</span>
                    </div>
                  </div>
                  
                  {/* Center Logo */}
                  <div className="logo-center">
                    <Link href="/" aria-label="go to home" className="footer-logo">
                      <Image 
                        src={logoSrc} 
                        alt="Logo" 
                        width={160}
                        height={120}
                        style={{ 
                          width: 'auto',
                          height: 'auto'
                        }} 
                      />
                    </Link>
                  </div>
                  
                  {/* Right Badge */}
                  <div className="security-badges-right">
                    <div className="security-badge">
                      <i className="fa-solid fa-shield-halved"></i>
                      <span>Incident Management</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row vertical-column-gap-lg">
          <div className="col-12">
            <div className="pt-40">
            </div>
          </div>
        </div>
        <div className="row vertical-column-gap-lg pt-40">
          <div className="col-12 col-lg-2 col-md-6">
            <div className="footer-section">
              <h6 className="text-white fm fw-6 mb-24">Company</h6>
              <ul className="footer-links">
                <li><Link href="about-us">About Us</Link></li>
                <li><Link href="career">Careers</Link></li>
                <li><Link href="case-study">Success Stories</Link></li>
                <li><Link href="contact-us">Contact Us</Link></li>
              </ul>
            </div>
          </div>
          <div className="col-12 col-lg-2 col-md-6">
            <div className="footer-section">
              <h6 className="text-white fm fw-6 mb-24">Services</h6>
              <ul className="footer-links">
                {servicesLoading ? (
                  <>
                    <li><Link href="/services">Our Services</Link></li>
                  </>
                ) : (
                  dynamicServices.slice(0, 6).map((service) => (
                    <li key={service.slug}>
                      <Link href={`/services/${service.slug}`}>
                        {service.title}
                      </Link>
                    </li>
                  ))
                )}
              </ul>
            </div>
          </div>
          <div className="col-12 col-lg-2 col-md-6">
            <div className="footer-section">
              <h6 className="text-white fm fw-6 mb-24">Latest Jobs</h6>
              <ul className="footer-links">
                {jobsLoading ? (
                  <>
                    <li><Link href="/career">View All Jobs</Link></li>
                  </>
                ) : (
                  jobs.slice(0, 4).map((job) => (
                    <li key={job.slug}>
                      <Link href={`/career/${job.slug}`}>
                        {job.title}
                      </Link>
                    </li>
                  ))
                )}
              </ul>
            </div>
          </div>
          <div className="col-12 col-lg-2 col-md-6">
            <div className="footer-section">
              <h6 className="text-white fm fw-6 mb-24">Support</h6>
              <ul className="footer-links">
                <li><Link href="/support-center">Support Center</Link></li>
                <li><Link href="/policy?type=privacy">Privacy Policy</Link></li>
                <li><Link href="/policy?type=terms">Terms of Use</Link></li>
                <li><Link href="/policy?type=support">Support Policy</Link></li>
              </ul>
            </div>
          </div>
          <div className="col-12 col-lg-4 col-md-12">
            <div className="footer-cta-section">
              <div className="cta-content">
                <h6 className="text-white fm fw-6 mb-24">Ready to Transform?</h6>
                <p className="text-white mb-30">Start your software journey with our incident management and custom development solutions.</p>
                <Link href="contact-us" className="btn-anim">
                  Start Your Software Journey
                  <i className="fa-solid fa-arrow-trend-up"></i>
                  <span></span>
                </Link>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="footer__inner pt-60">
              <div className="row vertical-column-gap-lg">
                <div className="col-12 col-md-6 col-lg-4">
                  <div className="footer__inner-single">
                    <div className="thumb">
                      <Image src={location} alt="Image" width={24} height={24} />
                    </div>
                    <div className="content">
                      <h5 className="mt-8 fm fw-6 text-white mb-24">
                        Location
                      </h5>
                      <p className="text-quinary">
                        <Link
                          href="https://maps.google.com/?q=42.496781103070504,27.4758968970689"
                          target="_blank"
                         >
                          GNX Soft Ltd.<br />
                          Tsar Simeon I, 56<br />
                          Burgas, Burgas 8000<br />
                          Bulgaria
                        </Link>
                      </p>
                    </div>
                  </div>
                </div>
                <div className="col-12 col-md-6 col-lg-4">
                  <div className="footer__inner-single">
                    <div className="thumb">
                      <Image src={phone} alt="Image" width={24} height={24} />
                    </div>
                    <div className="content">
                      <h5 className="mt-8 fm fw-6 text-white mb-24">Phone</h5>
                      <p className="text-quinary mb-12">
                        <Link href="tel:+359897338147">+359 897 338 147</Link>
                      </p>
                    </div>
                  </div>
                </div>
                <div className="col-12 col-md-6 col-lg-4">
                  <div className="footer__inner-single">
                    <div className="thumb">
                      <Image src={gmail} alt="Image" width={24} height={24} />
                    </div>
                    <div className="content">
                      <h5 className="mt-8 fm fw-6 text-white mb-24">Email</h5>
                      <p className="text-quinary mb-12 text-lowercase">
                        <Link href="mailto:info@gnxsoft.com">
                          info@gnxsoft.com
                        </Link>
                      </p>
               
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="footer-copyright">
              <div className="row align-items-center vertical-column-gap">
                <div className="col-12 col-lg-6">
                  <div className="footer__copyright-text text-center text-lg-start">
                    <p className="text-quinary mt-8">
                      &copy; <span id="copyrightYear">{currentYear}</span>{" "}
                      <Link href="/" className="fw-6">
                        GNX
                      </Link>
                      . All rights reserved. GNX Software Solutions.
                    </p>
                  </div>
                </div>
                <div className="col-12 col-lg-6">
                  <div className="social justify-content-center justify-content-lg-end">
                    <Link
                      href="https://www.linkedin.com/company/itify"
                      target="_blank"
                      title="LinkedIn"
                     >
                      <i className="fa-brands fa-linkedin"></i>
                    </Link>
                    <Link
                      href="https://github.com/itify"
                      target="_blank"
                      title="GitHub"
                     >
                      <i className="fa-brands fa-github"></i>
                    </Link>
                    <Link
                      href="https://www.twitter.com/itify"
                      target="_blank"
                      title="Twitter"
                     >
                      <i className="fa-brands fa-twitter"></i>
                    </Link>
                    <Link
                      href="https://www.youtube.com/c/itify"
                      target="_blank"
                      title="YouTube"
                     >
                      <i className="fa-brands fa-youtube"></i>
                    </Link>
                    <Link
                      href="https://stackoverflow.com/teams/itify"
                      target="_blank"
                      title="Stack Overflow"
                     >
                      <i className="fa-brands fa-stack-overflow"></i>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;
