// PastelCardRow.jsx — How we work: tall cards with WebGL process visuals.
function ProcessCard({ step, title, body, visual }) {
  return (
    <article className="zg-process-card">
      <div className="zg-process-card-copy">
        <span className="zg-process-step">— Step {step}</span>
        <h3 className="zg-process-title">{title}</h3>
        <p className="zg-process-body">{body}</p>
      </div>
      <ProcessVisual variant={visual} step={step} />
    </article>
  );
}

function PastelCardRow() {
  const sectionRef = React.useRef(null);
  const playedRef = React.useRef(false);

  const steps = [
    {
      step: "01",
      title: "Find the workflow",
      body: "Repeated, painful work close to the business.",
      visual: "orb",
    },
    {
      step: "02",
      title: "Map the process",
      body: "Rules, exceptions, files, and where humans sign off.",
      visual: "grid",
    },
    {
      step: "03",
      title: "Build the system",
      body: "Data connected. Agents built. In production in four to six weeks.",
      visual: "stack",
    },
    {
      step: "04",
      title: "Keep improving",
      body: "Real users, real data, real edge cases — we tune from there.",
      visual: "arc",
    },
  ];

  React.useEffect(() => {
    const section = sectionRef.current;
    if (!section) return undefined;

    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const gsap = window.gsap;

    const clearMotion = (cards) => {
      if (!gsap) return;
      cards.forEach((card) => {
        gsap.set(card, { clearProps: "transform,opacity" });
        card
          .querySelectorAll(
            ".zg-process-step, .zg-process-title, .zg-process-body, .zg-process-stage, .zg-process-floor"
          )
          .forEach((el) => {
            gsap.set(el, { clearProps: "all" });
          });
      });
    };

    const play = () => {
      if (playedRef.current) return;
      playedRef.current = true;

      const opener = section.querySelector(".zg-process-opener");
      const label = section.querySelector(".zg-process-opener .label");
      const title = section.querySelector(".zg-process-opener h2");
      const lede = section.querySelector(".zg-process-lede");
      const cards = section.querySelectorAll(".zg-process-card");

      if (reduced || !gsap) {
        section.classList.add("zg-process-section--revealed");
        return;
      }

      const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

      tl.from(opener, { opacity: 0, y: 28, duration: 0.7 })
        .from(label, { opacity: 0, y: 14, duration: 0.55 }, "-=0.55")
        .from(title, { opacity: 0, y: 24, duration: 0.75 }, "-=0.45")
        .from(lede, { opacity: 0, x: 28, duration: 0.7 }, "-=0.45");

      cards.forEach((card, index) => {
        const step = card.querySelector(".zg-process-step");
        const cardTitle = card.querySelector(".zg-process-title");
        const body = card.querySelector(".zg-process-body");
        const stage = card.querySelector(".zg-process-stage");
        const floor = card.querySelector(".zg-process-floor");
        const position = index === 0 ? "-=0.08" : "-=0.48";

        tl.fromTo(
          card,
          { opacity: 0, y: 64, scale: 0.96, transformOrigin: "50% 100%" },
          { opacity: 1, y: 0, scale: 1, duration: 0.9, transformOrigin: "50% 100%" },
          position
        );

        if (step) {
          tl.fromTo(step, { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.5 }, "<0.14");
        }

        if (cardTitle) {
          tl.fromTo(
            cardTitle,
            { opacity: 0, y: 22 },
            { opacity: 1, y: 0, duration: 0.58 },
            "<0.08"
          );
        }

        if (body) {
          tl.fromTo(body, { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.52 }, "<0.06");
        }

        if (stage) {
          tl.fromTo(
            stage,
            { opacity: 0, scale: 0.7, y: 36, transformOrigin: "50% 80%" },
            {
              opacity: 1,
              scale: 1,
              y: 0,
              duration: 1.05,
              ease: "back.out(1.4)",
              transformOrigin: "50% 80%",
            },
            "<0.02"
          );
        }

        if (floor) {
          tl.fromTo(
            floor,
            { opacity: 0, scale: 0.55, transformOrigin: "50% 100%" },
            { opacity: 0.82, scale: 1, duration: 0.85, ease: "power2.out" },
            "<0.18"
          );
        }
      });

      tl.add(() => {
        section.classList.add("zg-process-section--revealed");
        clearMotion(cards);
      });
    };

    const io = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          play();
          io.disconnect();
        }
      },
      { threshold: 0.18 }
    );

    io.observe(section);
    return () => io.disconnect();
  }, []);

  return (
    <section
      id="approach"
      ref={sectionRef}
      className="zg-process-section"
      aria-labelledby="zg-process-title"
    >
      <div className="zg-container">
        <header className="zg-process-header">
          <div className="zg-process-opener">
            <span className="label">How we work</span>
            <h2 id="zg-process-title">
              Start with one workflow.
              <span className="muted">
                Build the <span className="zg-highlight">roadmap</span> from there.
              </span>
            </h2>
          </div>
          <p className="zg-process-lede">
            We sit with operators, map the messy workflow, build the system, and
            keep improving it once real users and real data show up.
          </p>
        </header>

        <div className="zg-process-grid">
          {steps.map((s) => (
            <ProcessCard key={s.step} {...s} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.PastelCardRow = PastelCardRow;