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

function HorizontalScrollDiv() {
  const containerRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    const track = trackRef.current;
    if (!container || !track) return;

    const onScroll = () => {
      const rect = container.getBoundingClientRect();
      const scrollTop = window.scrollY - container.offsetTop;
      const maxScroll = container.scrollHeight - window.innerHeight;
      const progress = Math.min(Math.max(scrollTop / maxScroll, 0), 1);

      // Translate horizontally based on vertical scroll progress
      track.style.transform = `translateX(-${
        progress * (track.scrollWidth - window.innerWidth)
      }px)`;
    };

    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <section ref={containerRef} className="relative h-[200vh] lg:h-[500vh]">
      <div className="sticky top-0 h-screen overflow-hidden">
        <div ref={trackRef} className="flex h-full w-[600vw]">
          {/* Panel 1 */}
          <div className="w-screen bg-white flex justify-center md:justify-start lg:justify-center flex-col py-25 md:py-28 px-6 md:px-16 relative z-20">
            <div>
              <h2 className="text-start text-[28px] md:text-[40px] lg:text-[60px] font-bold font-kanit leading-tight mb-4 lg:mb-8">
                Different marketplaces. <br/>Different playbooks.{" "}
                <br/><span className="text-[#c4262c]">One growth partner.</span>
              </h2>
              <p className="text-start text-[16px] md:text-[20px] lg:text-[25px] font-semibold w-full max-w-[700px] mb-10">
                We don’t “copy-paste” strategies. Each platform demands a
                different approach — and we execute accordingly.
              </p>
            </div>
            <Image
              className="sm:absolute sm:bottom-10 right-10 md:w-100 lg:w-160"
              src="/assets/img/growth.png"
              alt="henj"
              width={600}
              height={300}
            />
            {/* <div className="absolute bottom-10 left-10 bg-[#de3737b6] blur-[300px] max-w-full w-100 h-50 rounded-full -z-10"></div>
            <div className="absolute bottom-10 left-10 bg-[#fdf064cd] blur-[300px] max-w-full w-70 h-50 rounded-full -z-10"></div> */}
          </div>
          <div className="w-screen bg-[#f3ecec] flex justify-center flex-col py-25 md:py-28 px-6 md:px-16 relative z-20">
            {/* <h2
              className="text-[70px] md:text-[170px] lg:text-[210px] font-semibold uppercase text-transparent bg-clip-text font-kanit leading-none absolute top-20 md:top-14 left-5 -z-10"
              style={{ WebkitTextStroke: "3px #ffffff4f" }}
            >
              Amazon
            </h2> */}

            <div className="flex flex-wrap gap-y-14">
              <div className="w-full lg:w-[70%]">
                <div className="pt-10 lg:pt-10 xl:pt-20">
                  <h2 className="text-[25px] md:text-[50px] lg:text-[70px] font-semibold text-[#2f2f2f] font-kanit leading-[0.9]">
                    Profit-first Amazon growth. Not just ads.
                  </h2>
                </div>
                <div className="w-full max-w-[500px] pt-5 lg:pt-10">
                  <p className="text-[15px] md:text-[18px] font-semibold font-inter text-neutral-600">
                    We fix the fundamentals before scaling spend — listings,
                    pricing, inventory, ads, and operations working together to
                    grow revenue and margins.
                  </p>
                </div>
              </div>
              <div className="w-full lg:w-[30%] flex justify-center flex-col">
                <div>
                  <Image
                    className="block mx-auto w-[200px] md:w-[180px] lg:w-[320px]"
                    src="/assets/img/amazon.webp"
                    alt="image"
                    width={400}
                    height={400}
                  />
                </div>
              </div>
            </div>
          </div>

          <div className="w-screen bg-[#dcdce9] flex justify-center flex-col py-25 md:py-28 px-6 md:px-16 relative z-20">
          {/*   <h2
              className="text-[70px] md:text-[170px] lg:text-[210px] font-semibold uppercase text-transparent bg-clip-text font-kanit leading-none absolute top-20 md:top-14 left-5 -z-10"
              style={{ WebkitTextStroke: "3px #ffffff4f" }}
            >
              Walmart
            </h2> */}

            <div className="flex flex-wrap gap-y-14">
              <div className="w-full lg:w-[70%]">
                <div className="pt-10 lg:pt-10 xl:pt-30">
                  <h2 className="text-[25px] md:text-[50px] lg:text-[70px] font-semibold text-[#2f2f2f] font-kanit leading-[0.9]">
                    Win the digital shelf not<br className="hidden lg:block"/> just presence.
                  </h2>
                </div>
                <div className="w-full max-w-[500px] pt-5 lg:pt-10">
                  <p className="text-[15px] md:text-[18px] font-semibold font-inter text-neutral-600">
                    We fix the fundamentals before scaling spend — listings,
                    pricing, inventory, ads, and operations working together to
                    grow revenue and margins.
                  </p>
                </div>
              </div>
              <div className="w-full lg:w-[30%] flex justify-center flex-col">
                <div>
                  <Image
                    className="block mx-auto w-[200px] md:w-[180px] lg:w-[320px]"
                    src="/assets/img/walmart.webp"
                    alt="image"
                    width={400}
                    height={400}
                  />
                </div>
              </div>
            </div>
          </div>
          {/* Panel 2 */}
          <div className="w-screen bg-[#e8e5e6] flex justify-center flex-col py-25 md:py-28 px-6 md:px-16 relative z-20">
          {/*   <h2
              className="text-[70px] md:text-[170px] lg:text-[210px] font-semibold uppercase text-transparent bg-clip-text font-kanit leading-none absolute top-20 md:top-14 left-5 -z-10"
              style={{ WebkitTextStroke: "3px #ffffff4f" }}
            >
              Ebay
            </h2> */}

            <div className="flex flex-wrap gap-y-14">
              <div className="w-full lg:w-[70%]">
                <div className="pt-10 lg:pt-10 xl:pt-20">
                  <h2 className="text-[25px] md:text-[50px] lg:text-[70px] font-semibold text-[#2f2f2f] font-kanit leading-[0.9]">
                    Turn complexity into consistent sales.
                  </h2>
                </div>
                <div className="w-full max-w-[500px] pt-5 lg:pt-10">
                  <p className="text-[15px] md:text-[18px] font-semibold font-inter text-neutral-600">
                    Catalog structure, pricing logic, promotions, and visibility
                    — optimized to unlock steady demand in a marketplace most
                    brands underutilize.
                  </p>
                </div>
              </div>
              <div className="w-full lg:w-[30%] flex justify-center flex-col">
                <div>
                  <Image
                    className="block mx-auto w-[200px] md:w-[180px] lg:w-[350px]"
                    src="/assets/img/ebay.webp"
                    alt="image"
                    width={400}
                    height={400}
                  />
                </div>
              </div>
            </div>
          </div>
          {/* Panel 3 */}
          <div className="w-screen bg-[#dadbd1] flex justify-center flex-col py-25 md:py-28 px-6 md:px-16 relative z-20">
           {/*  <h2
              className="text-[70px] md:text-[170px] lg:text-[210px] font-semibold uppercase text-transparent bg-clip-text font-kanit leading-none absolute top-20 md:top-14 left-5 -z-10"
              style={{ WebkitTextStroke: "3px #ffffff4f" }}
            >
              Etsy
            </h2> */}

            <div className="flex flex-wrap gap-y-14">
              <div className="w-full lg:w-[70%]">
                <div className="pt-10 lg:pt-10 xl:pt-20">
                  <h2 className="text-[25px] md:text-[50px] lg:text-[70px] font-semibold text-[#2f2f2f] font-kanit leading-[0.9]">
                    Scale without losing the<br className="hidden lg:block"/> brand soul.
                  </h2>
                </div>
                <div className="w-full max-w-[500px] pt-5 lg:pt-10">
                  <p className="text-[15px] md:text-[18px] font-semibold font-inter text-neutral-600">
                    Search-led optimization, storefront storytelling, and ad
                    strategy built for discovery — without compromising what
                    makes your brand unique.
                  </p>
                </div>
              </div>
              <div className="w-full lg:w-[30%] flex justify-center flex-col">
                <div>
                  <Image
                    className="block mx-auto w-[200px] md:w-[180px] lg:w-[400px]"
                    src="/assets/img/etsy-logo.webp"
                    alt="image"
                    width={400}
                    height={400}
                  />
                </div>
              </div>
            </div>
          </div>

          <div className="w-screen bg-[#e8e5e0] flex justify-center flex-col py-25 md:py-28 px-6 md:px-16 relative z-20">
           {/*  <h2
              className="text-[70px] md:text-[170px] lg:text-[210px] font-semibold uppercase text-transparent bg-clip-text font-kanit leading-none absolute top-20 md:top-14 left-5 -z-10"
              style={{ WebkitTextStroke: "3px #ffffff4f" }}
            >
              Target
            </h2> */}

            <div className="flex flex-wrap gap-y-14">
              <div className="w-full lg:w-[70%]">
                <div className="pt-10 lg:pt-10 xl:pt-15">
                  <h2 className="text-[25px] md:text-[50px] lg:text-[70px] font-semibold text-[#2f2f2f] font-kanit leading-[0.9]">
                    Retail discipline meets marketplace execution.
                  </h2>
                </div>
                <div className="w-full max-w-[500px] pt-5 lg:pt-10">
                  <p className="text-[15px] md:text-[18px] font-semibold font-inter text-neutral-600">
                    We align content, compliance, availability, and performance
                    marketing to help brands operate at Target’s standards — and
                    scale within them.
                  </p>
                </div>
              </div>
              <div className="w-full lg:w-[30%] flex justify-center flex-col">
                <div>
                  <Image
                    className="block mx-auto w-[200px] md:w-[180px] lg:w-[400px]"
                    src="/assets/img/target.webp"
                    alt="image"
                    width={400}
                    height={400}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default HorizontalScrollDiv;