"use client";

import { useLayoutEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { processSteps } from "@/lib/content/company";

gsap.registerPlugin(ScrollTrigger);

/**
 * The pinned horizontal "loom rail": the five delivery stages travel across
 * the viewport like thread across a loom while the section holds.
 * Falls back to a vertical list under reduced motion / touch-small screens.
 */
export default function ProcessRail() {
  const wrap = useRef<HTMLDivElement>(null);
  const rail = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const narrow = window.innerWidth < 900;
    if (reduced || narrow) return;

    const ctx = gsap.context(() => {
      const railEl = rail.current!;
      const distance = () => railEl.scrollWidth - window.innerWidth;

      gsap.to(railEl, {
        x: () => -distance(),
        ease: "none",
        scrollTrigger: {
          trigger: wrap.current,
          start: "top top",
          end: () => `+=${distance()}`,
          scrub: 0.6,
          pin: true,
          invalidateOnRefresh: true,
        },
      });

      // thread progress line
      gsap.fromTo(
        ".process-thread",
        { scaleX: 0 },
        {
          scaleX: 1,
          ease: "none",
          scrollTrigger: {
            trigger: wrap.current,
            start: "top top",
            end: () => `+=${distance()}`,
            scrub: 0.6,
          },
        }
      );
    }, wrap);

    return () => ctx.revert();
  }, []);

  return (
    <section className="weave-light on-light relative overflow-clip" aria-label="How we deliver">
      <div ref={wrap} className="flex min-h-[100svh] flex-col justify-center py-20 max-[899px]:min-h-0">
        <div className="mx-auto w-full max-w-[1280px] px-5 md:px-10">
          <p className="eyebrow">How we deliver</p>
          <h2 className="mt-4 max-w-[700px] text-[clamp(2rem,3.6vw,3.1rem)] font-semibold text-lhi">
            A disciplined path from ambition to operation.
          </h2>
        </div>

        <div className="relative mt-12 max-[899px]:mt-10">
          <div
            className="process-thread absolute left-0 top-[5px] hidden h-[2px] w-full origin-left bg-gradient-to-r from-azure-deep via-ice to-azure min-[900px]:block"
            aria-hidden
          />
          <div
            ref={rail}
            className="flex gap-6 pl-5 pr-5 max-[899px]:flex-col md:pl-10 min-[900px]:w-max min-[900px]:pr-[40vw]"
          >
            {processSteps.map((s) => (
              <article
                key={s.n}
                className="relative w-full rounded-xl border border-black/10 bg-white p-7 pt-9 min-[900px]:w-[min(420px,38vw)]"
              >
                <span
                  className="absolute -top-[5px] left-7 hidden h-3 w-3 rotate-45 border-2 border-azure-deep bg-bone min-[900px]:block"
                  aria-hidden
                />
                <span className="font-[family-name:var(--font-mono)] text-[0.75rem] tracking-[0.14em] text-azure-deep">
                  {s.n}
                </span>
                <h3 className="mt-2 text-[1.35rem] font-semibold text-lhi">{s.title}</h3>
                <p className="mt-2.5 text-[0.95rem] leading-relaxed text-lmid">{s.body}</p>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}