"use client";
import { useEffect } from "react";
import Link from "next/link";
import Image from "next/legacy/image";
import gsap from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
import location from "@/public/images/footer/location.png";
import phone from "@/public/images/footer/phone.png";
import gmail from "@/public/images/footer/gmail.png";

const Footer = () => {
  const currentYear = new Date().getFullYear();
  
  // 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
    })
  };

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    gsap.set(".foot-fade", {
      x: -100,
      opacity: 0,
    });

    ScrollTrigger.batch(".foot-fade", {
      start: "-100px bottom",
      onEnter: (elements) =>
        gsap.to(elements, {
          x: 0,
          opacity: 1,
          stagger: 0.3,
        }),
    });
  }, []);

  // 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={{ 
                          height: 'auto', 
                          maxHeight: '120px'
                        }} 
                      />
                    </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">Solutions</h6>
              <ul className="footer-links">
                <li><Link href="services">Incident Management Software</Link></li>
                <li><Link href="services">Custom Software Development</Link></li>
                <li><Link href="services">System Integrations & APIs</Link></li>
                <li><Link href="services">Data Replication</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">Resources</h6>
              <ul className="footer-links">
                <li><Link href="blog">Software Blog</Link></li>
                <li><Link href="case-study">Development Resources</Link></li>
                <li><Link href="services">API Documentation</Link></li>
                <li><Link href="contact-us">Technical Support</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">
                <li><Link href="services">Software Consulting</Link></li>
                <li><Link href="contact-us">Custom Development</Link></li>
                <li><Link href="case-study">API & Integration Services</Link></li>
                <li><Link href="contact-us">Data Solutions</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;