"use client";
import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import Image from "next/legacy/image";
import Link from "next/link";


const ServicesBanner = () => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    if (document.querySelector(".service-banner")) {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: ".service-banner",
          start: "center center",
          end: "+=100%",
          scrub: true,
          pin: false,
        },
      });

      tl.to(".thumb-one", {
        opacity: 0.3,
        y: "-100%",
        zIndex: -1,
        duration: 2,
      });

      tl.to(
        ".thumb-two",
        {
          opacity: 0.3,
          scale: 2,
          y: "100%",
          zIndex: -1,
          duration: 2,
        },
        0
      );
    }
  }, []);

  return (
    <section className="enterprise-banner position-relative overflow-hidden">
      <div className="banner-background">
        <div className="gradient-overlay"></div>
        <div className="geometric-pattern"></div>
      </div>
      
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="enterprise-banner__content">
              <div className="banner-badge mb-4">
                <span className="enterprise-badge">
                  Enterprise Services
                </span>
              </div>
              
              <h1 className="enterprise-title mb-4">
                The end-to-end bespoke software development company you need
              </h1>
              
              <p className="enterprise-description mb-5">
                Empower your business with sophisticated tech solutions by GNX. 
                From ideation to implementation, with a team of experts right at your fingertips
              </p>
              
              <div className="enterprise-cta">
                <Link href="/contact-us" className="btn btn-primary btn-lg me-3 mb-3">
                  <span>Get Free Quote</span>
                  <i className="fa-solid fa-arrow-right ms-2"></i>
                </Link>
                <Link href="#scroll-to" className="btn btn-outline-light btn-lg mb-3">
                  <span>Explore Services</span>
                  <i className="fa-solid fa-arrow-down ms-2"></i>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul className="social">
        <li>
          <Link
<<<<<<< HEAD
            href="https://www.linkedin.com"
=======
            href="https://linkedin.com"
>>>>>>> d7d7a2757a183aa1abd9dbabff804c45298df4e5
            target="_blank"
            aria-label="connect with us on linkedin"
           >
            <i className="fa-brands fa-linkedin-in"></i>
          </Link>
        </li>
        <li>
          <Link
            href="https://github.com"
            target="_blank"
            aria-label="view our code on github"
           >
            <i className="fa-brands fa-github"></i>
          </Link>
        </li>
      </ul>
      <Link href="#scroll-to" className="scroll-to">
        Scroll
        <span className="arrow"></span>
      </Link>
  
    </section>
  );
};

export default ServicesBanner;