"use client";  // ✅ Add this at the top to make it a Client Component

import { useRef, useEffect } from "react";
import React from "react";
import Image from "next/image";

export default function Services() {
  const sectionRef = useRef<HTMLDivElement | null>(null);
  const textScrollRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    let cancelled = false;
    let ctx: { revert: () => void } | undefined;

    // Load GSAP lazily so it stays out of the initial page bundle.
    (async () => {
      const [{ default: gsap }, { ScrollTrigger }] = await Promise.all([
        import("gsap"),
        import("gsap/ScrollTrigger"),
      ]);
      gsap.registerPlugin(ScrollTrigger);
      if (cancelled || !textScrollRef.current || !sectionRef.current) return;

      ctx = gsap.context(() => {
        const textWidth = textScrollRef.current!.scrollWidth + 300;
        const containerWidth = sectionRef.current!.clientWidth;

        gsap.to(textScrollRef.current, {
          x: `-${textWidth - containerWidth}px`,
          ease: "none",
          immediateRender: false,
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top top",
            end: `+=${textWidth - containerWidth * 1.2}px`,
            pin: true,
            scrub: 2,
            anticipatePin: 1,
            invalidateOnRefresh: true,
          },
        });
      });
    })();

    return () => {
      cancelled = true;
      if (ctx) ctx.revert();
    };
  }, []);

  return (
  // <section 
  //   className="InnovativeSolutions bg-[#FCFCFC] py-16 lg:py-28"
  //   aria-labelledby="solutions-heading"
  // >
  <section 
  className="InnovativeSolutions bg-[#FCFCFC] pt-16 pb-8 lg:pt-28 lg:pb-2"
>
    <div className="max-w-7xl mx-auto px-6 text-center">
      {/* Section Heading */}
      <h2 
        id="solutions-heading"
        data-aos="fade-up"
        className="text-[30px] md:text-[40px] lg:text-[48px] font-bold text-[#141414] leading-tight Manrope"
      >
        Innovative <span className="text-[#E77025]">Digital Solutions</span> for Modern Businesses
      </h2>
      <p 
        data-aos="fade-up" 
        data-aos-delay="100"
        className="mt-4 text-[16px] md:text-[18px] text-[#555] max-w-3xl mx-auto leading-relaxed"
      >
        At <strong>Fruxinfo</strong>, we combine creativity, strategy, and technology to deliver 
        impactful solutions that accelerate business growth. From crafting intuitive designs 
        to developing scalable apps — we empower your brand to thrive in the digital era.
      </p>

      {/* Services Grid */}
      {/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mt-14">
 
        <div 
          data-aos="zoom-in" 
          className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition p-8 flex flex-col items-center"
        >
          <Image src="/images/Services_img_1.webp" alt="Creative Design Service" width={150} height={150} className="object-contain w-full h-full" />
          <h3 className="mt-5 text-[22px] font-semibold text-[#141414]">Creative Design</h3>
          <p className="mt-3 text-[#555] text-[15px] leading-relaxed">
            Build a powerful visual identity that sets your brand apart. 
            We create designs that are modern, user-focused, and emotionally engaging.
          </p>
          <a href="/graphic-design" className="mt-4 text-[#E77025] font-semibold hover:underline">
            View More →
          </a>
        </div>

        <div 
          data-aos="zoom-in" 
          data-aos-delay="100"
          className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition p-8 flex flex-col items-center"
        >
          <Image src="/images/Services_img_2.webp" alt="Web Development Service" width={150} height={150} className="object-contain w-full h-full" />
          <h3 className="mt-5 text-[22px] font-semibold text-[#141414]">Web Development</h3>
          <p className="mt-3 text-[#555] text-[15px] leading-relaxed">
            We build fast, secure, and scalable websites optimized for search engines and conversions. 
            Your online presence starts here.
          </p>
          <a href="/web-development" className="mt-4 text-[#E77025] font-semibold hover:underline">
            View More →
          </a>
        </div>
        <div 
          data-aos="zoom-in" 
          data-aos-delay="200"
          className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition p-8 flex flex-col items-center"
        >
          <Image src="/images/Services_img_3.webp" alt="App Development Service" width={150} height={150} className="object-contain w-full h-full" />
          <h3 className="mt-5 text-[22px] font-semibold text-[#141414]">App Development</h3>
          <p className="mt-3 text-[#555] text-[15px] leading-relaxed">
            Transform your business with high-performance mobile apps for Android & iOS — 
            designed for speed, scalability, and smooth UX.
          </p>
          <a href="/app-development" className="mt-4 text-[#E77025] font-semibold hover:underline">
            View More →
          </a>
        </div>

        <div 
          data-aos="zoom-in" 
          data-aos-delay="300"
          className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition p-8 flex flex-col items-center"
        >
          <Image src="/images/Services_img_4.webp" alt="Marketing Strategy Service" width={150} height={150} className="object-contain w-full h-full" />
          <h3 className="mt-5 text-[22px] font-semibold text-[#141414]">Marketing Strategy</h3>
          <p className="mt-3 text-[#555] text-[15px] leading-relaxed">
            Reach the right audience with data-driven marketing strategies that deliver measurable growth 
            and long-term brand awareness.
          </p>
          <a href="/digital-marketing" className="mt-4 text-[#E77025] font-semibold hover:underline">
            View More →
          </a>
        </div>
      </div> */}
    </div>
  </section>
);

}