import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { SplitText } from "@/plugins"; // Make sure SplitText is imported correctly
import Image from "next/image";
import Link from "next/link";

// Optimized image imports
import ArrowDownBig from "../../../public/assets/imgs/icon/arrow-down-big.png";
import Hero1bg from "../../../public/assets/imgs/hero/1/1-bg.webp";

// Optimized Font Awesome import (optional, for specific icons)
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';

const DigitalAgencyHero = () => {
  const heroTitle = useRef();
  const heroSubTitle = useRef();

  useEffect(() => {
    if (typeof window !== "undefined") {
      let tHero = gsap.context(() => {
        gsap.set(".experience", {
          y: 50,
          opacity: 0,
        });
        let split_hero__title = new SplitText(heroTitle.current, {
          type: "chars",
        });
        let split_hero__subtitle = new SplitText(heroSubTitle.current, {
          type: "chars words",
        });

        gsap.from(split_hero__title.chars, {
          duration: 0.5,
          x: 70,
          autoAlpha: 0,
          stagger: 0.1,
        });
        gsap.from(
          split_hero__subtitle.words,
          { duration: 1, x: 50, autoAlpha: 0, stagger: 0.005 },
          "-=1"
        );

        gsap.to(
          ".experience",
          {
            y: 0,
            opacity: 1,
            duration: 2,
            ease: "power2.out",
          },
          "-=1.5"
        );
      });
      return () => tHero.revert();
    }
  }, []);

  return (
    <section className="hero__area">
      <div className="container">
        <div className="row">
          <div className="col-xxl-12">
            <div className="hero__content animation__hero_one">
              <Link href="/contact" style={{ color: "#65B4FC" }}>
                <br />
                Book Your Demo Now{" "}
                <FontAwesomeIcon icon={faArrowRight} />
              </Link>
              <div className="hero__title-wrapper">
                <h1 className="hero__title" style={{ fontSize: "2rem" }}>
                  STOP SEARCHING. YOU’VE FOUND THE TOP{" "}
                  <span style={{ fontSize: "3rem", color: "#65B4FC" }}>
                    SYSTEM INTEGRATOR PARTNER
                  </span>
                </h1>
                <p className="hero__sub-title" ref={heroSubTitle}>
                  SyncROI specialized in AI and Internal System Integrations, Work Flow Automation, Cloud Services, and Marketing Outreach,
                  <span> SyncROI Offers a customized services or SAAS technologies to suit your budget needs.</span>.
                </p>
              </div>
              <Image
                priority
                width={170}
                style={{ height: "auto" }}
                src={ArrowDownBig}
                alt="Arrow Down Icon"
              />
              <div className="experience">
                <h2 className="title">100+</h2>
                <p>Satisfied Clients</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Image
        priority
        width={1920}  // Explicitly define width
        height={1080} // Explicitly define height
        src={Hero1bg}
        decoding="async"
        loading="eager"
        alt="Background Image"
        fetchpriority="high"
        className="hero1_bg"
      />
    </section>
  );
};

export default DigitalAgencyHero;