"use client";

import { useRef } from "react";
import { motion, useScroll, useTransform, useReducedMotion } from "motion/react";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { productionChain } from "@/content/divisions";

/**
 * The vertical integration argument, drawn as a single thread running through
 * every stage of production. The thread draws itself as you scroll, so the
 * point is made by the motion rather than by the copy.
 */
export function Integration() {
  const ref = useRef<HTMLDivElement>(null);
  const reduced = useReducedMotion();

  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start 80%", "end 60%"],
  });

  const draw = useTransform(scrollYProgress, [0, 0.9], [0, 1]);

  return (
    <section className="section grain relative bg-[var(--ink)]">
      <div className="shell">
        <SectionHeading
          eyebrow="Vertically integrated"
          title="One thread, from raw cotton to finished garment."
          lede="Most exporters buy fabric and sew it. Three Stars spins the yarn, knits the cloth, dyes it, finishes it, cuts it, stitches it, embroiders it and prints it. Nothing leaves the group between the bale and the box, which is why lead times hold and shade matching does not drift."
        />

        <div ref={ref} className="mt-20">
          {/* The running thread. */}
          <div className="relative">
            <svg
              viewBox="0 0 1200 60"
              preserveAspectRatio="none"
              className="hidden h-14 w-full md:block"
              aria-hidden="true"
            >
              <path
                d={THREAD_PATH}
                fill="none"
                stroke="var(--rule)"
                strokeWidth="1"
              />
              <motion.path
                d={THREAD_PATH}
                fill="none"
                stroke="var(--thread)"
                strokeWidth="1.6"
                strokeLinecap="round"
                style={{ pathLength: draw }}
              />
            </svg>
          </div>

          <ol className="grid grid-cols-2 gap-x-6 gap-y-10 md:-mt-4 md:grid-cols-4 lg:grid-cols-8">
            {productionChain.map((stage, i) => (
              <motion.li
                key={stage.step}
                className="relative"
                initial={{ opacity: 0, y: 22 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, amount: 0.5 }}
                transition={{
                  duration: reduced ? 0 : 0.6,
                  delay: reduced ? 0 : i * 0.07,
                  ease: [0.16, 1, 0.3, 1],
                }}
              >
                <span className="data block text-[11px] text-[var(--thread)]">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <h3 className="mt-2 text-base text-[var(--cotton)]">
                  {stage.step}
                </h3>
                <p className="mt-1.5 text-[13px] leading-relaxed text-[var(--melange)]">
                  {stage.note}
                </p>
              </motion.li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

// A gentle sine running the width of the chain, the path a thread takes when it
// is laid across a warp rather than pulled straight.
const THREAD_PATH =
  "M0 40 C 75 40, 75 14, 150 14 S 225 40, 300 40 S 375 14, 450 14 S 525 40, 600 40 S 675 14, 750 14 S 825 40, 900 40 S 975 14, 1050 14 S 1125 40, 1200 40";