"use client";

import React, { useEffect } from "react";
import "aos/dist/aos.css";
import Image from "next/image";

const CareerBanner = () => {
  useEffect(() => {
      import("aos").then((mod) => {
          mod.default.init({
          disable: window.innerWidth < 768, // mobile: no scroll animations (perf/LCP)
        duration: 1000, // Animation duration in ms
        offset: 100, // Offset from original trigger point
        easing: "ease-in-out",
        once: false, // Animation runs only once
      });
        });
    }, []);
  
    return (
      <div className="max-w-[1200px] mx-auto px-4 py-16">
        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
          {/* Left Section - Text Content */}
          <div className="md:col-span-8 text-center md:text-left">
            <h1 data-aos="fade-right" className="text-[#3A3A3A] text-[30px] md:text-[50px] Manrope font-bold leading-tight">
                Join a Team That Inspires Growth & Excellence
            </h1>
            {/* <p data-aos="fade-right" className="text-[#AAAAAA] text-[18px] md:text-[22px] mt-4 mx-auto md:mx-0">
              Our team is driven by creativity, expertise, and a commitment to excellence. We focus on quality, innovation, and disciplined experimentation to deliver outstanding results.
            </p> */}
          </div>
  
          {/* Right Section - Image */}
          <div className="md:col-span-4 flex justify-center">
            <div className="lg:mx-20 md:mx-5 mx-10">
              <Image src="/images/career_banner_stiki.webp" alt="Web Design" width={1200} height={600} className="w-full" data-aos="fade-left"/>
            </div>
          </div>
        </div>
      </div>
    );  
  };

export default CareerBanner
