"use client"; // ✅ Client Component declaration

import "aos/dist/aos.css";
import Image from "next/image";
import { useEffect, useRef } from "react";
import Link from "next/link";
import { FaArrowRightLong } from "react-icons/fa6";

// Minimal shape of the bits of gsap we use here (method syntax keeps it
// assignment-compatible with the real gsap object under strictFunctionTypes).
type GsapLike = { to(target: unknown, vars: object): void };

export default function About() {
  const imageRef = useRef(null);
  const gsapRef = useRef<GsapLike | null>(null);

  // ✅ GSAP Animation for Scroll — loaded lazily to keep gsap out of the initial bundle
  useEffect(() => {
    let cancelled = false;
    let ctx: { revert: () => void } | undefined;
    (async () => {
      const [{ default: gsap }, { ScrollTrigger }] = await Promise.all([
        import("gsap"),
        import("gsap/ScrollTrigger"),
      ]);
      gsap.registerPlugin(ScrollTrigger);
      if (cancelled) return;
      gsapRef.current = gsap; // make available to hover handlers

      ctx = gsap.context(() => {
        gsap.from(".box1", {
          scale: 0,
          rotate: 360,
          duration: 1,
          delay: 1,
          scrollTrigger: {
            trigger: ".box1",
            start: "top 90%",
            end: "top 35%",
            scrub: true,
          },
        });
      });
    })();
    return () => {
      cancelled = true;
      if (ctx) ctx.revert();
    };
  }, []);

  // ✅ Hover Effect for Image (no-op until gsap has loaded)
  const handleMouseEnter = () => {
    if (imageRef.current && gsapRef.current) {
      gsapRef.current.to(imageRef.current, {
        scale: 1.2,
        rotate: 10,
        duration: 0.5,
        ease: "power3.out",
      });
    }
  };

  const handleMouseLeave = () => {
    if (imageRef.current && gsapRef.current) {
      gsapRef.current.to(imageRef.current, {
        scale: 1,
        rotate: 0,
        duration: 0.5,
        ease: "power3.out",
      });
    }
  };

  // ✅ Initialize AOS Animations
  useEffect(() => {
    import("aos").then((mod) => {
          mod.default.init({
          disable: window.innerWidth < 768, // mobile: no scroll animations (perf/LCP)
      duration: 1000,
      offset: 100,
      easing: "ease-in-out",
      once: false,
    });
        });
  }, []);

  return (
  <section 
    className="AboutSection flex items-center bg-[#141414] py-14 lg:py-32 overflow-hidden md:overflow-visible"
    aria-labelledby="about-heading"
  >
    <div className="max-w-[1200px] mx-auto px-3">
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-12">
        
        {/* Left Side: Text Content */}
        <div className="col-span-12 sm:col-span-7 flex flex-col justify-center">
          <h2 
            id="about-heading"
            data-aos="fade-right"
            className="text-[30px] lg:text-[45px] text-white text-center md:text-start font-bold Manrope leading-tight"
          >
            Building Genuine Digital Connections That Drive Growth
          </h2>
          <p 
            data-aos="fade-right" 
            className="text-[16px] lg:text-[20px] text-center md:text-start text-[#D0D0D0] mt-5 leading-relaxed"
          >
            At <strong>Fruxinfo</strong>, we merge innovation with purpose — transforming unique ideas into digital realities. 
            Our expert team combines <em>creative design</em> and <em>strategic development</em> to build long-lasting relationships 
            across every digital landscape. Let’s collaborate to turn your vision into a powerful online presence that drives results.
          </p>
          {/* <a 
  href="/about" 
  className="mt-8 inline-block w-48 text-center bg-[#E77025] text-white px-6 py-3 rounded-full font-semibold hover:bg-[#cf5e1f] transition"
>
About Us</a> */}
          <div className="flex mt-7">
            <Link
              href="/about"
              className="Custome_Orange_button flex items-center justify-center gap-3"
            >
              About Us <FaArrowRightLong className="h-[20px] w-[20px]" />
            </Link>
          </div>

        </div>

        {/* Right Side: Animated Image */}
        <div className="col-span-12 sm:col-span-5 flex justify-center sm:justify-end mt-8 sm:mt-0">
          <div className="g_anim_1">
            <div className="box1">
              {/* <Image
                src="/images/rotet_img.webp"
                ref={imageRef}
                alt="Fruxinfo digital transformation illustration"
                width={600}
                height={600}
                loading="eager"
                className="w-full max-w-sm sm:max-w-md rounded-2xl shadow-lg hover:shadow-[#E77025]/50 transition-shadow duration-300"
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
              /> */}
               <Image
                src="/images/rotet_img.webp"
                ref={imageRef}
                alt="Fruxinfo digital transformation illustration"
                width={600}
                height={600}
                loading="eager"
                className="w-full max-w-sm sm:max-w-md rounded-2xl shadow-lg transition-shadow duration-300"
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
              />
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>
);
}
