"use client";
import Link from "next/link";
import Image from "next/legacy/image";
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">
      {/* Decorative background elements */}
      <div className="footer-bg-decoration"></div>
      
      <div className="container">
        {/* Enterprise Footer Logo Section */}
        <div className="row">
          <div className="col-12">
            <div className="footer-logo-section text-center pt-60 pb-50">
              <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={140}
                        height={100}
                        className="footer-logo-image"
                      />
                    </Link>
                    <p className="footer-tagline">Transforming Ideas Into Digital Excellence</p>
                  </div>
                  
                  {/* Right Badge */}
                  <div className="security-badges-right">
                    <div className="security-badge">
                      <i className="fa-solid fa-brain"></i>
                      <span>AI & Innovation</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row vertical-column-gap-lg pt-60 pb-50">
          <div className="col-12 col-lg-2 col-md-6 col-sm-6">
            <div className="footer-section">
              <h6 className="footer-section-title">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="/insights">Insights & Blog</Link></li>
                <li><Link href="/contact-us">Contact Us</Link></li>
              </ul>
            </div>
          </div>
          <div className="col-12 col-lg-2 col-md-6 col-sm-6">
            <div className="footer-section">
              <h6 className="footer-section-title">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 col-sm-6">
            <div className="footer-section">
              <h6 className="footer-section-title">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 col-sm-6">
            <div className="footer-section">
              <h6 className="footer-section-title">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">
                <div className="cta-badge">
                  <i className="fa-solid fa-sparkles"></i>
                  <span>Get Started Today</span>
                </div>
                <h6 className="cta-title">Ready to Transform Your Business?</h6>
                <p className="cta-description">Start your software journey with our enterprise solutions, incident management, and custom development services.</p>
                <div className="cta-button-wrapper">
                <Link href="/contact-us" className="btn-luxury-cta">
                  <span>Start Your Journey</span>
                  <i className="fa-solid fa-arrow-right"></i>
                  <div className="btn-shine"></div>
                </Link>
                  <div className="goodfirms-wrapper text-center mt-3" style={{ lineHeight: 0 }}>
                    <Link
                      href="https://www.goodfirms.co/company/gnx-soft-ltd"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="goodfirms-badge d-inline-block"
                      title="View our company profile on GoodFirms"
                      style={{
                        border: 'none',
                        outline: 'none',
                        boxShadow: 'none',
                        textDecoration: 'none',
                        padding: 0,
                        margin: 0,
                        display: 'inline-block',
                        lineHeight: 0,
                        background: 'transparent'
                      }}
                    >
                      <Image
                        src="/images/gnx-goodfirms.webp"
                        alt="GoodFirms Company Profile"
                        width={150}
                        height={80}
                        className="goodfirms-image"
                        style={{
                          width: '20px',
                          height: '20px',
                          objectFit: 'contain',
                          border: 'none',
                          outline: 'none',
                          boxShadow: 'none',
                          padding: 0,
                          margin: 0,
                          display: 'block',
                          verticalAlign: 'top',
                          borderWidth: 0,
                          borderStyle: 'none',
                          borderColor: 'transparent'
                        }}
                      />
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <div className="footer__inner pt-60 pb-50">
              <div className="row vertical-column-gap-lg g-4">
                <div className="col-12 col-md-6 col-lg-4">
                  <div className="footer__inner-single">
                    <div className="contact-icon-wrapper">
                      <div className="contact-icon">
                        <i className="fa-solid fa-location-dot"></i>
                      </div>
                    </div>
                    <div className="content">
                      <h5 className="contact-title">Location</h5>
                      <p className="contact-text">
                        <Link
                          href="https://maps.google.com/?q=42.496781103070504,27.4758968970689"
                          target="_blank"
                          rel="noopener noreferrer"
                         >
                          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="contact-icon-wrapper">
                      <div className="contact-icon">
                        <i className="fa-solid fa-phone"></i>
                      </div>
                    </div>
                    <div className="content">
                      <h5 className="contact-title">Phone</h5>
                      <p className="contact-text">
                        <Link href="tel:+359896138030">+359 896 13 80 30</Link>
                      </p>
                    </div>
                  </div>
                </div>
                <div className="col-12 col-md-6 col-lg-4">
                  <div className="footer__inner-single">
                    <div className="contact-icon-wrapper">
                      <div className="contact-icon">
                        <i className="fa-solid fa-envelope"></i>
                      </div>
                    </div>
                    <div className="content">
                      <h5 className="contact-title">Email</h5>
                      <p className="contact-text">
                        <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 g-3">
                <div className="col-12 col-lg-6">
                  <div className="footer__copyright-text text-center text-lg-start">
                    <p className="copyright-text">
                      &copy; <span id="copyrightYear">{currentYear}</span>{" "}
                      <Link href="/" className="copyright-link">
                        GNX Soft Ltd.
                      </Link>
                      {" "}All rights reserved. Built with excellence.
                    </p>
                  </div>
                </div>
                <div className="col-12 col-lg-6">
                  <div className="social-links justify-content-center justify-content-lg-end">
                    <Link
                      href="https://www.linkedin.com"
                      target="_blank"
                      rel="noopener noreferrer"
                      title="LinkedIn"
                      className="social-link"
                    >
                      <i className="fa-brands fa-linkedin-in"></i>
                    </Link>
                    <Link
                      href="https://github.com/"
                      target="_blank"
                      rel="noopener noreferrer"
                      title="GitHub"
                      className="social-link"
                    >
                      <i className="fa-brands fa-github"></i>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;