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

const CareerBanner = () => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    const careerBanner = document.querySelector(".career-banner");
    const cpBannerThumb = document.querySelector(".cp-banner-thumb");
    
    if (careerBanner && cpBannerThumb) {
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: ".career-banner",
          start: "center center",
          end: "+=100%",
          scrub: true,
          pin: false,
        },
      });

      tl.to(".cp-banner-thumb", {
        opacity: 0.1,
        y: "40%",
        duration: 2,
      });

      tl.to(
        ".career-banner",
        {
          "--scale": 3,
          duration: 2,
        },
        0
      );
    }
  }, []);

  return (
    <section className="career-banner fix-top bg-black position-relative overflow-hidden" style={{ minHeight: '50vh', paddingTop: '100px', paddingBottom: '60px' }}>
      <div className="container">
        <div className="row justify-content-center align-items-center">
          <div className="col-12 col-lg-10">
            <div className="cp-banner__content text-center">
              <h2 className="mt-8 fw-7 text-xxl title-anim text-white mb-5">
                Build Your Career with Enterprise Excellence
              </h2>
              <p className="text-quinary fs-5 mb-5" style={{ maxWidth: '700px', margin: '0 auto 2rem' }}>
                Join our global team of innovators, problem-solvers, and tech leaders building the future of digital solutions
              </p>
            </div>
          </div>
        </div>
        
        {/* Job Categories with Icons */}
        <div className="row justify-content-center mt-5 pt-4">
          <div className="col-6 col-md-3 text-center mb-4">
            <div className="job-category-card" style={{ 
              padding: '2rem 1rem', 
              background: 'rgba(255,255,255,0.05)', 
              borderRadius: '12px',
              border: '1px solid rgba(255,255,255,0.1)',
              transition: 'all 0.3s ease'
            }}>
              <div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#00d4ff' }}>
                <i className="fa-solid fa-code"></i>
              </div>
              <h5 className="text-white fw-6 mb-2">Engineering</h5>
            </div>
          </div>
          <div className="col-6 col-md-3 text-center mb-4">
            <div className="job-category-card" style={{ 
              padding: '2rem 1rem', 
              background: 'rgba(255,255,255,0.05)', 
              borderRadius: '12px',
              border: '1px solid rgba(255,255,255,0.1)',
              transition: 'all 0.3s ease'
            }}>
              <div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#ff6b9d' }}>
                <i className="fa-solid fa-palette"></i>
              </div>
              <h5 className="text-white fw-6 mb-2">Design</h5>
            </div>
          </div>
          <div className="col-6 col-md-3 text-center mb-4">
            <div className="job-category-card" style={{ 
              padding: '2rem 1rem', 
              background: 'rgba(255,255,255,0.05)', 
              borderRadius: '12px',
              border: '1px solid rgba(255,255,255,0.1)',
              transition: 'all 0.3s ease'
            }}>
              <div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#ffd93d' }}>
                <i className="fa-solid fa-chart-line"></i>
              </div>
              <h5 className="text-white fw-6 mb-2">Business</h5>
            </div>
          </div>
          <div className="col-6 col-md-3 text-center mb-4">
            <div className="job-category-card" style={{ 
              padding: '2rem 1rem', 
              background: 'rgba(255,255,255,0.05)', 
              borderRadius: '12px',
              border: '1px solid rgba(255,255,255,0.1)',
              transition: 'all 0.3s ease'
            }}>
              <div className="icon-wrapper mb-3" style={{ fontSize: '3rem', color: '#a78bfa' }}>
                <i className="fa-solid fa-users"></i>
              </div>
              <h5 className="text-white fw-6 mb-2">Operations</h5>
            </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>
      <span className="sm-c"></span>
      <span className="sm-c sm-cl"></span>
    </section>
  );
};

export default CareerBanner;