// Moodboard — "Life beyond the work": a full-bleed horizontal photo band that
// drifts left→right on its own (pauses on hover). Each tile is a drop-in slot.
//
// Layout matches the reference: COLUMNS alternate between a single full-height
// "tall" photo and a "stack" of two photos. Slot ids are kept stable (life-1…9)
// so any images already dropped persist across this layout change.
const { useRef: useRefMood, useEffect: useEffectMood } = React;

const MOOD_BAND_H = 600;   // band height
const MOOD_GAP = 22;       // horizontal gap between columns (per-column margin
                           // so the two stacked copies are an exact half-track → seamless loop)
const MOOD_VGAP = 18;      // vertical gap inside a stacked column

const MOOD_COLUMNS = [
  { type: "tall",  w: 360, items: [{ id: "life-1", hint: "City lights", src: "uploads/pasted-1781535982828-0.png" }] },
  { type: "stack", w: 380, items: [{ id: "life-2", hint: "Tennis", src: "uploads/pasted-1781291458609-0.png" }, { id: "life-3", hint: "Open road", src: "uploads/pasted-1781536646242-0.png" }] },
  { type: "tall",  w: 420, items: [{ id: "life-4", hint: "Window seat", src: "uploads/pasted-1781535512104-0.png" }] },
  { type: "stack", w: 380, items: [{ id: "life-5", hint: "Talks & ideas", src: "uploads/4828A257-9D54-4FFE-871D-FD110720FF15_1_105_c.jpeg" }, { id: "life-6", hint: "Slow mornings", src: "uploads/pasted-1781536781298-0.png" }] },
  { type: "tall",  w: 360, items: [{ id: "life-7", hint: "The crew", src: "uploads/042B79E4-2D5D-48A7-A419-9F1EE0C7BABC_1_105_c.jpeg" }] },
  { type: "stack", w: 380, items: [{ id: "life-8", hint: "Good company", src: "uploads/7CA898A2-AA92-4E6D-BC19-312896B61033_1_201_a.jpeg" }, { id: "life-9", hint: "River days", src: "uploads/9C7236F9-79F9-4015-9255-98899DDCD885_1_105_c.jpeg" }] },
];

function MoodTile({ item }) {
  return (
    <div
      className="mood-tile relative w-full rounded-2xl overflow-hidden border border-stroke bg-surface"
      style={{ flex: "1 1 0", minHeight: 0 }}
    >
      <image-slot
        id={item.id}
        src={item.src}
        shape="rect"
        fit="cover"
        placeholder={item.hint}
        class="absolute inset-0"
      ></image-slot>
    </div>
  );
}

function MoodColumn({ col }) {
  return (
    <div
      className="shrink-0 flex flex-col"
      style={{ width: col.w, height: MOOD_BAND_H, marginRight: MOOD_GAP, gap: MOOD_VGAP }}
    >
      {col.items.map((it) => (
        <MoodTile key={it.id} item={it} />
      ))}
    </div>
  );
}

function Moodboard() {
  const ref = useRefMood(null);

  useEffectMood(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const els = ref.current.querySelectorAll(".reveal-up");
    const anims = [];
    els.forEach((el, i) => {
      anims.push(
        window.gsap.to(el, {
          opacity: 1, y: 0, duration: 0.8, ease: "power2.out", delay: i * 0.06,
          scrollTrigger: { trigger: el, start: "top 90%", once: true },
        })
      );
    });
    return () => anims.forEach((a) => a.scrollTrigger && a.scrollTrigger.kill());
  }, []);

  return (
    <section id="Moodboard" ref={ref} className="bg-bg py-16 md:py-24 overflow-hidden">
      {/* Compact header */}
      <div className="max-w-content mx-auto px-6 md:px-10 lg:px-16 mb-12 md:mb-14">
        <div className="reveal-up max-w-xl">
          <div className="flex items-center gap-3 mb-5">
            <span className="w-8 h-px bg-stroke"></span>
            <span className="text-xs text-muted uppercase tracking-[0.3em] whitespace-nowrap">Off the clock</span>
          </div>
          <h2 className="tracking-tight text-text-primary leading-[1.05]" style={{ fontSize: "clamp(30px, 7.5vw, 48px)" }}>
            Life beyond <span className="font-display italic" style={{ color: "rgb(80, 134, 191)" }}>the work</span>
          </h2>
          <p className="mt-5 text-sm md:text-base text-muted max-w-md text-balance">
            Cooking, tennis, travel, and the people and places that keep me curious outside of product design.
          </p>
        </div>
      </div>

      {/* Full-bleed drifting band */}
      <div className="mood-mask relative w-full overflow-hidden" style={{ height: MOOD_BAND_H }}>
        <div
          className="mood-track absolute top-0 left-0 flex"
          style={{ animation: "mood-right 70s linear infinite" }}
        >
          {[...MOOD_COLUMNS, ...MOOD_COLUMNS].map((col, i) => (
            <div key={i} aria-hidden={i >= MOOD_COLUMNS.length ? "true" : undefined} className="shrink-0">
              <MoodColumn col={col} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Moodboard });