"use client";

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

gsap.registerPlugin(ScrollTrigger);

const AboutBanner = () => {
  const textRefs = useRef<(HTMLParagraphElement | null)[]>([]);

  useEffect(() => {
    textRefs.current.forEach((el) => {
      if (el) {
        gsap.to(el, {
          color: "#000",
          scrollTrigger: {
            trigger: el,
            start: "top 60%",
            end: "top 30%",
            scrub: true,
          },
        });
      }
    });
  }, []);

  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 (
    <div className="py-16 px-4 md:px-8">
      <div className="max-w-[1200px] mx-auto overflow-hidden">
        {/* Banner Heading */}
        <div className="relative text-center md:text-left py-16">
          <h1 data-aos="fade-right" className="text-[#3A3A3A] text-4xl md:text-5xl lg:text-6xl font-bold Manrope"> Real hands <br /> Real websites <br />  Real growth
          <div data-aos="fade-left" className="why_choose_stiki_page">
            <Image src="/images/why_choose_stiki_page.svg" width={1200} height={600} alt="Web Design" />
          </div>
          </h1>
        </div>

        {/* Image Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-12 gap-4 my-16">
            {/* Left Side Large Image */}
            <div className="sm:col-span-5">
                <Image src="/images/result_img_1.webp" width={1200} height={600} className="w-full h-auto object-cover rounded-lg" alt="Main Image" />
            </div>

            {/* Right Side Images Grid */}
            <div className="sm:col-span-7 flex flex-col gap-4">
                {/* Two Images Side-by-Side on PC, Full Width on Mobile */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <Image src="/images/result_img_2.webp" width={1200} height={600} className="w-full h-auto object-cover rounded-lg" alt="Image 2"/>
                <Image src="/images/result_img_3.webp" width={1200} height={600} className="w-full h-auto object-cover rounded-lg" alt="Image 3"/>
                </div>

                {/* Full-Width Image Below */}
                <div>
                <Image src="/images/result_img_4.webp" width={1200} height={600} className="w-full h-auto object-cover rounded-lg" alt="Image 4"/>
                </div>
            </div>
        </div>


        {/* Text Content */}
        <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
          <div className="md:col-span-7 text-justify">
            <p ref={(el) => {textRefs.current[0] = el; }} className="text-lg text-[#AAAAAA] leading-relaxed">Founded in 2011, Fruxinfo is a trusted digital agency in India. We specialise in web design, SEO, development, and digital marketing. For over 15 years, our team has delivered reliable solutions that help businesses grow from startups to global companies.</p>
            <p ref={(el) => {textRefs.current[1] = el; }} className="text-lg text-[#AAAAAA] mt-4 leading-relaxed"> We have 15 years of experience in building high-performing websites and improving search rankings. Our team offers simple, effective design and SEO solutions to help your business grow.</p>
            <p ref={(el) => {textRefs.current[2] = el; }} className="text-lg text-[#AAAAAA] mt-4 leading-relaxed"> Web design and SEO are our passion at Fruxinfo. With 470+ successful projects and outstanding reviews, we help brands grow through clear communication and real results.</p>
          </div>

          {/* Info Boxes */}
          <div className="md:col-span-5 flex flex-col gap-6 px-4">
            {[
              { title: "15+ YEARS", value: "OFEXCELLENCE" },
              { title: "We're in both places.", value: "India & USA" },
              { title: "15 years", value: "550+ smiles" },
            ].map((item, index) => (
              <div
                key={index}
                className="border-l-4 border-[#E77025] pl-4 py-2"
              >
                <h4 className="text-lg text-[#E77025] font-semibold">
                  {item.title}
                </h4>
                <h2 className="text-3xl text-[#000] font-bold">{item.value}</h2>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AboutBanner;
