
"use client";
import React, { useEffect, useRef, useState } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const JourneyDemo = () => {
    const textRefs = useRef<HTMLParagraphElement[]>([]);
    const [isSticky, setIsSticky] = useState(false);
    const [showMenu, setShowMenu] = useState(false);
    const sectionRef = useRef<HTMLDivElement>(null); // ✅ Correct Type

    useEffect(() => {
        // GSAP Animations
        textRefs.current.forEach((el) => {
            if (!el) return;
            gsap.to(el, {
                color: "#FFF",
                scrollTrigger: {
                    trigger: el,
                    start: "top 60%",
                    end: "top 30%",
                    scrub: true,
                    onLeave: () => gsap.to(el, { color: "#7c7c7cdb" }),
                    onEnterBack: () => gsap.to(el, { color: "#FFF" }),
                    onLeaveBack: () => gsap.to(el, { color: "#7c7c7cdb" }),
                },
            });
        });

        ScrollTrigger.refresh();

        // Sticky Menu + Show/Hide Logic
        const handleScroll = () => {
            if (!sectionRef.current) return;

            const sectionTop = sectionRef.current.getBoundingClientRect().top;
            const sectionBottom = sectionRef.current.getBoundingClientRect().bottom;
            const windowHeight = window.innerHeight;
            const screenCenter = windowHeight / 2;

            if (sectionTop < screenCenter && sectionBottom > screenCenter) {
                setShowMenu(true);
            } else {
                setShowMenu(false);
            }

            // Sticky Logic
            const menu = document.querySelector(".menu") as HTMLUListElement | null;
            if (!menu) return;

            const menuTop = menu.offsetTop;
            if (window.scrollY > menuTop) {
                setIsSticky(true);
            } else {
                setIsSticky(false);
            }
        };

        window.addEventListener("scroll", handleScroll);
        return () => {
            window.removeEventListener("scroll", handleScroll);
        };
    }, []);

    return (
        <div ref={sectionRef} className="jorneyDemo py-20 bg-black">
            {showMenu && (
                <ul className={`menu ${isSticky ? "sticky" : ""}`}>
                    {/* Menu items here */}
                </ul>
            )}

            <div className="max-w-[1200px] mx-auto overflow-hidden px-3">
                <div className="grid lg:grid-cols-12 py-5 years_scroll">
                    <div className="col-span-12 sm:col-span-3"></div>
                    <div className="col-span-12 sm:col-span-9">
                        {[
                            { year: "2026", title: "Our Present. Our Future", text: "we are working on 12 active projects. These projects use Laravel, Next.js, Node.js, HTML, PHP, and Flutter. We want to become a world leader in Laravel, Next.js, Node.js, PHP, and Flutter. We are ready for the future with modern web and app development.\n\nOur commitment to innovation is driven by Promax Card, our flagship digital business card launched in April 2024. Promax Card uses NFC technology to make networking simple and smart. It helps professionals share contact information instantly and provides useful real-time analytics. This product shows that we don't just follow the future — we help build it."},
                            { year: "2022", title: "Global Scaling & High-Performance Engineering", text: "In 2022, we completed over 400 projects and grew to 250 international clients. We mastered technologies like Laravel, Next.js, Node.js, HTML, PHP, and Flutter. This helped us build fast, high-quality applications for businesses around the world. 2022 proved that we are a trusted partner for scalable, global solutions." },
                            { year: "2019", title: "The Year Fruxinfo Leveled Up", text: "2019 was a transformative year for Fruxinfo, as we crossed the milestone of 200+ completed projects for over 100 global clients. This era marked our specialization in Laravel development, where our team began engineering highly scalable, custom web applications across diverse industry sectors.\n\n As demand for our expertise surged, we successfully expanded into international markets, earning a reputation for high-quality software solutions. Through strategic global partnerships and key industry certifications, we solidified our credibility as an established provider of bespoke digital architecture." },
                            { year: "2016", title: " Specialized eCommerce Growth & PHP Excellence", text: "In 2016, Fruxinfo pivoted toward the high-growth eCommerce sector, specializing in building scalable online stores using OpenCart, WordPress, and Magento. Leveraging our deep expertise in PHP and CodeIgniter, we expanded our technical team to engineer complex, dynamic web solutions for a rapidly growing client base.\n\nWith the successful delivery of 15+ major eCommerce platforms, we became the 'partner of choice' for brands transitioning to digital storefronts. This year established our core foundation in full-stack development and high-conversion digital commerce architecture." },
                            { year: "2012", title: " The Foundation of Digital Excellence", text: "In 2012, Fruxinfo began its journey as a bold team of digital innovators. Our founding team composed of expert .NET developers, UI/UX designers, and brand strategists was united by a single mission: to provide small businesses with enterprise-grade digital footprints.\n\n We focused on engineering high-performance static and dynamic websites that balanced aesthetic appeal with technical precision. These early projects established the standard of excellence that still defines us today, helping our first clients move from local presence to digital-first competitors." },
                        ].map((item, index) => (
                            <div key={index} className="year_heilight py-5">
                                <h2 className="text-[#E77025] text-4xl font-bold text-start ">
                                    {item.year} <span className="text-[#FFF] text-2xl">- {item.title}</span>
                                </h2>
                                <p style={{ textAlign: "justify" }}
                                    ref={(el) => {
                                        if (el) textRefs.current[index] = el;
                                    }}
                                    className="text-[16px] md:text-[20px] text-[#7c7c7cdb] text-start "
                                >
                                   {item.text.split("\n\n").map((para, i) => (
                                        <span key={i}>
                                            {para}
                                            <br /><br />
                                            </span>
                                        ))}
                                </p>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default JourneyDemo;

