Relay Carousel

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import {
  animate,
  AnimatePresence,
  motion,
  useMotionValue,
  useMotionValueEvent,
  useReducedMotion,
  useTransform,
  type AnimationPlaybackControls,
  type MotionStyle,
  type MotionValue,
} from "motion/react";

import { cn } from "@/lib/utils";

/**
 * Keep:
 * - Every card is placed and sized from one motion value, `place`, through CSS variables
 *   (`--offset`, `--grow`, `--ahead`, `--drift`); the sizes live in CSS (`SIZES`), so the server
 *   renders the strip already laid out.
 * - The leaving quote lifts off first, the strip glides on one spring, and the new quote sets in
 *   line by line only once the strip is within `RELAY.settle` of its slot and nothing is dragging.
 * - A drag lands where the flick was heading and hands its speed to the glide as `velocity`, so a
 *   release never snaps.
 * - The strip is endless: slots are virtualized around the lead, and only the copy nearest the
 *   lead (`canonical`) is announced and focusable; repeats are `aria-hidden` and `inert`.
 * - Photo drift and zoom are CSS-only behind `motion-safe:`, so reduced motion turns them off
 *   without a hydration mismatch; it also jumps the strip and holds autoplay until played.
 */
const TIMING = {
  /** The strip gliding to a new lead: a spring with no bounce, over `duration`. */
  glide: { type: "spring", bounce: 0 },
  /** How long the strip takes to glide to a new lead, in ms (the `duration` prop). */
  duration: 750,
  /** Between the lead's quote lines setting in, in ms (the `stagger` prop). */
  stagger: 80,
  /** The strip leaning toward a hovered arrow, and back. */
  lean: { type: "spring", visualDuration: 0.35, bounce: 0 },
  /** Release speed carried into where a drag lands, in seconds of travel. */
  flick: 0.2,
  /** How recently the pointer must have moved for a release to carry its speed, in ms. */
  fresh: 80,
  /** Without sideways wheel input before the strip snaps, in ms. */
  wheelIdle: 140,
  /** The autoplay ring filling over `autoPlay`, as an easing. */
  ring: "linear",
  /** The ring fading as autoplay pauses and plays, as a Tailwind class. */
  ringFade: "duration-300",
  /** A quote line, label or extra lifting off when its card stops leading, as Tailwind classes. */
  hide: "duration-200 ease-out",
  /** A quote line setting in from the blur once the strip lands, as Tailwind classes. */
  show: "group-data-[shown=true]/relay:duration-700 group-data-[shown=true]/relay:ease-[cubic-bezier(0.16,1,0.3,1)]",
  /** A resting card's photo brightening on hover, as a Tailwind class. */
  brighten: "duration-500",
  /** A round button's hover and press, as Tailwind classes. */
  button: "duration-200 ease-out",
  /** An arrow nudging on its button's hover, as Tailwind classes. */
  nudge: "duration-200 ease-out",
  /** The counter's digits rolling to the new lead. */
  count: { type: "spring", visualDuration: 0.4, bounce: 0 },
} as const;

/* ─────────────────────────────────────────────────────────
 * RELAY CAROUSEL STORYBOARD
 *
 *  rest     a strip of photo cards that runs off the right edge.
 *           The first card is the lead: wider and taller than
 *           the rest, its photo under a scrim, its quote set
 *           above the name. The others show a name and a role.
 *           Cards that already led fade into the left margin
 *  relay    next/prev, a click on a card, keys or autoplay pass
 *           the lead on. The leaving quote lifts off first, then
 *           the strip glides on one spring: the old lead shrinks
 *           and slides out while the new one grows into its
 *           place. Photos drift inside their cards as they
 *           travel (14px a card) and the lead's eases back from
 *           a 6% zoom. Once the strip has nearly landed, the new
 *           quote sets in line by line from a soft blur
 *  drag     pull the strip with a finger or the mouse, or swipe
 *           sideways on a trackpad. It snaps to the nearest
 *           card, carrying the flick's speed
 *  play     with autoPlay, the ring around the pause button fills
 *           as the timer. It holds while the pointer or keyboard
 *           focus is inside, or the carousel is off screen
 *  loop     the strip never ends. Cards are virtualized and
 *           repeated when there are too few to fill a wide screen
 *  narrow   the lead fills the width with the next card peeking,
 *           and the controls move under the strip
 *  reduced  no glide, blur or autoplay: the lead switches at once
 * ───────────────────────────────────────────────────────── */

const RELAY = {
  settle: 0.3, // cards from rest at which the new quote starts to set in
  drag: 6, // px a press travels before it counts as a drag
  lean: 0.04, // cards the strip leans toward an arrow under the pointer
} as const;

// Card sizes live in CSS, so the server renders the strip already laid out. cqi is the carousel's width.
const SIZES = [
  "[--relay-gap:0.75rem]",
  "[--relay-l:min(calc(100cqi_-_2_*_var(--relay-inset)_-_2.75rem),22rem)]",
  "[--relay-s:calc(var(--relay-l)_*_0.6)]",
  "[--relay-hs:calc(var(--relay-s)_*_1.3)]",
  "[--relay-hl:calc(var(--relay-l)_*_1.12)]",
  "@2xl:[--relay-gap:1rem]",
  "@2xl:[--relay-l:clamp(19rem,40cqi,25rem)]",
  "@2xl:[--relay-s:calc(var(--relay-l)_*_0.62)]",
  "@2xl:[--relay-hs:calc(var(--relay-s)_*_1.25)]",
  "@2xl:[--relay-hl:calc(var(--relay-hs)_*_1.2)]",
].join(" ");

const INSET =
  "[--relay-inset:max(1.25rem,calc((100cqi_-_76rem)_/_2))] @2xl:[--relay-inset:max(2.5rem,calc((100cqi_-_76rem)_/_2))]";

const mod = (n: number, m: number) => ((n % m) + m) % m;

type Metrics = { width: number; inset: number; s: number; l: number; gap: number };

type Relay = {
  count: number;
  lead: number;
  revealed: number | null;
  /** ms between quote lines setting in. */
  stagger: number;
  /** px a photo drifts inside its card per card travelled. */
  drift: number;
  /** Where the strip is, in slots: the glide plus any lean toward a hovered arrow. */
  place: MotionValue<number>;
  go: (slot: number) => void;
  onKeyDown: (event: React.KeyboardEvent) => void;
};

type Slot = { slot: number; index: number; canonical: boolean };

const RelayContext = React.createContext<Relay | null>(null);
const SlotContext = React.createContext<Slot>({ slot: 0, index: 0, canonical: true });

function useRelay() {
  const relay = React.useContext(RelayContext);
  if (!relay) throw new Error("<RelayCarouselItem> must be rendered inside <RelayCarousel>.");
  return relay;
}

const subscribeNothing = () => () => {};

/* ── RelayCarousel ──────────────────────────────────────── */

export interface RelayCarouselProps extends Omit<React.HTMLAttributes<HTMLElement>, "onChange"> {
  /** Shown top left, in line with the lead card. The controls sit opposite it. */
  heading?: React.ReactNode;
  /** The card that leads. Leave unset to let the carousel manage it. */
  index?: number;
  /** The card that leads first. */
  defaultIndex?: number;
  /** Called with the new lead's index, whatever moved it. */
  onIndexChange?: (index: number) => void;
  /** Passes the lead on every this many ms, with a pause button. Off for reduced motion until played. */
  autoPlay?: number;
  /** Left edge of the heading and the lead card, as a CSS length. `cqi` is the carousel's width. */
  inset?: string;
  /** Milliseconds the strip takes to glide to a new lead. */
  duration?: number;
  /** Milliseconds between the lead's quote lines setting in. */
  stagger?: number;
  /** How far each photo drifts inside its card per card the strip travels, in px. `0` keeps the photos still. */
  drift?: number;
}

/**
 * A looping strip of photo cards. The first card leads, larger, with its quote
 * showing; passing the lead on slides the strip and grows the next card into place.
 */
export function RelayCarousel({
  heading,
  index,
  defaultIndex = 0,
  onIndexChange,
  autoPlay,
  inset,
  duration = TIMING.duration,
  stagger = TIMING.stagger,
  drift = 14,
  className,
  children,
  onPointerEnter,
  onPointerLeave,
  onFocus,
  onBlur,
  ...props
}: RelayCarouselProps) {
  const items = React.Children.toArray(children).filter(
    (child): child is React.ReactElement<RelayCarouselItemProps> => React.isValidElement(child),
  );
  const count = items.length;
  const reduced = useReducedMotion() ?? false;
  const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false);
  const id = React.useId();
  const trackId = `${id}-track`;

  /* The lead is a slot on an endless strip; its item is the slot modulo the count. */
  const start = count ? mod(index ?? defaultIndex, count) : 0;
  const [lead, setLead] = React.useState({ slot: start, turn: 0 });
  const [step, setStep] = React.useState(1);
  const [announcement, setAnnouncement] = React.useState("");
  const active = count ? mod(lead.slot, count) : -1;

  // A controlled index moves the lead the short way round.
  const [syncedIndex, setSyncedIndex] = React.useState(index);
  if (index !== syncedIndex) {
    setSyncedIndex(index);
    if (index !== undefined && count && mod(index, count) !== active) {
      let delta = mod(index - active, count);
      if (delta > count / 2) delta -= count;
      setLead({ slot: lead.slot + delta, turn: lead.turn + 1 });
      setStep(Math.sign(delta));
    }
  }

  const pos = useMotionValue(start);
  // Pointing at an arrow leans the strip a little that way, a hint of where it's about to go.
  const lean = useMotionValue(0);
  const place = useTransform(() => pos.get() + lean.get());
  const leanTo = (to: number) => {
    if (!reduced) animate(lean, to, TIMING.lean);
  };
  const glide = React.useRef<AnimationPlaybackControls | null>(null);
  const release = React.useRef(0);
  const latest = React.useRef({ lead, count, items, onIndexChange });
  React.useLayoutEffect(() => {
    latest.current = { lead, count, items, onIndexChange };
  });

  const go = React.useCallback((slot: number, source: "user" | "auto" = "user") => {
    const { lead, count, items, onIndexChange } = latest.current;
    if (!count) return;
    const next = { slot, turn: lead.turn + 1 };
    latest.current.lead = next;
    setLead(next);
    if (slot !== lead.slot) setStep(Math.sign(slot - lead.slot));
    const index = mod(slot, count);
    if (source === "user") {
      const { name, role, quote } = items[index].props;
      setAnnouncement(
        `${index + 1} of ${count}. ${name}${typeof role === "string" ? `, ${role}` : ""}. “${quote}”`,
      );
    }
    if (slot !== lead.slot) onIndexChange?.(index);
  }, []);

  // Every new lead (or a snap back after a short drag) glides the strip to it.
  React.useEffect(() => {
    if (reduced) {
      pos.jump(lead.slot);
      return;
    }
    const controls = animate(pos, lead.slot, {
      ...TIMING.glide,
      visualDuration: duration / 1000,
      velocity: release.current,
    });
    release.current = 0;
    glide.current = controls;
    return () => controls.stop();
  }, [lead, reduced, pos, duration]);

  /* What the strip shows: the slots around the lead and wherever the strip is passing. */
  const [span, setSpan] = React.useState<[number, number]>([start, start]);
  const [revealed, setRevealed] = React.useState<number | null>(start);
  const [dragging, setDragging] = React.useState(false);
  useMotionValueEvent(pos, "change", (value) => {
    const low = Math.floor(value);
    const high = Math.ceil(value);
    setSpan((prev) => (prev[0] === low && prev[1] === high ? prev : [low, high]));
    const slot = latest.current.lead.slot;
    setRevealed(Math.abs(value - slot) < RELAY.settle ? slot : null);
  });

  const trackRef = React.useRef<HTMLDivElement>(null);
  const probeRef = React.useRef<HTMLDivElement>(null);
  const [metrics, setMetrics] = React.useState<Metrics | null>(null);
  React.useLayoutEffect(() => {
    const track = trackRef.current;
    const probe = probeRef.current;
    if (!track || !probe) return;
    const [inset, s, l, gap] = Array.from(probe.children) as HTMLElement[];
    const observer = new ResizeObserver(() => {
      const next = {
        width: track.clientWidth,
        inset: inset.offsetWidth,
        s: s.offsetWidth,
        l: l.offsetWidth,
        gap: gap.offsetWidth,
      };
      setMetrics((prev) =>
        prev &&
        prev.width === next.width &&
        prev.inset === next.inset &&
        prev.s === next.s &&
        prev.l === next.l &&
        prev.gap === next.gap
          ? prev
          : next,
      );
    });
    observer.observe(track);
    for (const el of [inset, s, l, gap]) observer.observe(el);
    return () => observer.disconnect();
  }, []);

  const pitch = metrics ? metrics.s + metrics.gap : 1;
  const before = metrics ? Math.ceil(metrics.inset / pitch) + 1 : 2;
  const after = metrics ? Math.ceil((metrics.width - metrics.inset - metrics.l) / pitch) + 1 : 0;
  const low = Math.min(span[0], lead.slot) - before;
  const high = Math.max(Math.max(span[1], lead.slot) + after, low + count - 1);
  const slots: Slot[] = [];
  if (count === 1) slots.push({ slot: lead.slot, index: 0, canonical: true });
  else if (count) {
    // Each item is announced once: the copy nearest the lead. Repeats are decoration.
    const nearest = new Map<number, number>();
    for (let slot = low; slot <= high; slot++) {
      const i = mod(slot, count);
      const best = nearest.get(i);
      if (best === undefined || Math.abs(slot - lead.slot) <= Math.abs(best - lead.slot)) {
        nearest.set(i, slot);
      }
    }
    for (let slot = low; slot <= high; slot++) {
      const i = mod(slot, count);
      slots.push({ slot, index: i, canonical: nearest.get(i) === slot });
    }
  }

  /* Autoplay: the ring fills while nothing holds it, then the lead moves on. */
  const progress = useMotionValue(0);
  const [paused, setPaused] = React.useState<boolean | null>(null);
  const [hovered, setHovered] = React.useState(false);
  const [focused, setFocused] = React.useState(false);
  const [seen, setSeen] = React.useState(true);
  const canPlay = !!autoPlay && autoPlay > 0 && count > 1;
  const playing = canPlay && !(paused ?? (hydrated && reduced));
  const held = hovered || focused || dragging || !seen;

  React.useLayoutEffect(() => {
    progress.jump(0);
  }, [lead.slot, progress]);

  React.useEffect(() => {
    if (!playing || held) return;
    const controls = animate(progress, 1, {
      duration: ((autoPlay ?? 0) / 1000) * (1 - progress.get()),
      ease: TIMING.ring,
      onComplete: () => go(latest.current.lead.slot + 1, "auto"),
    });
    return () => controls.stop();
  }, [playing, held, lead.slot, autoPlay, progress, go]);

  React.useEffect(() => {
    const track = trackRef.current;
    if (!canPlay || !track) return;
    let inView = true;
    const update = () => setSeen(inView && document.visibilityState === "visible");
    const observer = new IntersectionObserver(
      ([entry]) => {
        inView = entry.isIntersecting;
        update();
      },
      { threshold: 0.25 },
    );
    observer.observe(track);
    document.addEventListener("visibilitychange", update);
    return () => {
      observer.disconnect();
      document.removeEventListener("visibilitychange", update);
    };
  }, [canPlay]);

  /* Dragging: the strip follows the pointer, then lands where the flick was heading. */
  const pointer = React.useRef({
    id: -1,
    x: 0,
    from: 0,
    moved: false,
    swallow: false,
    samples: [] as { x: number; t: number }[],
  });

  const unit = () => {
    const m = metrics;
    return m ? (m.s + m.l) / 2 + m.gap : 300;
  };

  const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
    const p = pointer.current;
    p.swallow = false;
    if (count < 2 || event.button !== 0) return;
    if ((event.target as HTMLElement).closest("a, input, textarea, select, [data-relay-extra]")) return;
    p.id = event.pointerId;
    p.x = event.clientX;
    p.from = pos.get();
    p.moved = false;
    p.samples = [{ x: event.clientX, t: event.timeStamp }];
  };

  const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
    const p = pointer.current;
    if (event.pointerId !== p.id) return;
    const dx = event.clientX - p.x;
    if (!p.moved) {
      if (Math.abs(dx) < RELAY.drag) return;
      p.moved = true;
      glide.current?.stop();
      p.from = pos.get() + dx / unit();
      event.currentTarget.setPointerCapture(event.pointerId);
      setDragging(true);
    }
    pos.set(p.from - dx / unit());
    p.samples.push({ x: event.clientX, t: event.timeStamp });
    if (p.samples.length > 6) p.samples.shift();
  };

  const endDrag = (event: React.PointerEvent<HTMLDivElement>) => {
    const p = pointer.current;
    if (event.pointerId !== p.id) return;
    p.id = -1;
    if (!p.moved) return;
    p.swallow = true;
    setDragging(false);
    const first = p.samples[0];
    const last = p.samples[p.samples.length - 1];
    const elapsed = last.t - first.t;
    const speed = elapsed > 0 && event.timeStamp - last.t < TIMING.fresh ? (last.x - first.x) / elapsed : 0; // px/ms
    const cards = -(speed * 1000) / unit(); // cards/s, positive toward the next card
    const reach = Math.max(1, Math.ceil((metrics?.width ?? 1000) / pitch) - 1);
    const landing = Math.round(pos.get() + cards * TIMING.flick);
    const slot = Math.max(Math.round(p.from) - reach, Math.min(Math.round(p.from) + reach, landing));
    release.current = reduced ? 0 : cards;
    go(slot);
  };

  /* Sideways trackpad swipes scrub the strip and snap once they stop. */
  React.useEffect(() => {
    const track = trackRef.current;
    if (!track || count < 2) return;
    let timer = 0;
    const onWheel = (event: WheelEvent) => {
      if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
      event.preventDefault();
      glide.current?.stop();
      setDragging(true);
      const m = metrics;
      const size = m ? (m.s + m.l) / 2 + m.gap : 300;
      pos.set(pos.get() + event.deltaX / size);
      window.clearTimeout(timer);
      timer = window.setTimeout(() => {
        setDragging(false);
        go(Math.round(pos.get()));
      }, TIMING.wheelIdle);
    };
    track.addEventListener("wheel", onWheel, { passive: false });
    return () => {
      track.removeEventListener("wheel", onWheel);
      window.clearTimeout(timer);
    };
  }, [count, metrics, pos, go]);

  /* Keys: ←/→ pass the lead, Home/End go the short way to the first and last card. Focus follows the lead. */
  const keyboard = React.useRef(false);
  const onKeyDown = (event: React.KeyboardEvent) => {
    const slot = latest.current.lead.slot;
    const toIndex = (i: number) => {
      let delta = mod(i - slot, count);
      if (delta > count / 2) delta -= count;
      return slot + delta;
    };
    let to: number | null = null;
    if (event.key === "ArrowRight") to = slot + 1;
    else if (event.key === "ArrowLeft") to = slot - 1;
    else if (event.key === "Home") to = toIndex(0);
    else if (event.key === "End") to = toIndex(count - 1);
    if (to === null) return;
    event.preventDefault();
    keyboard.current = true;
    go(to);
  };
  React.useEffect(() => {
    if (!keyboard.current) return;
    keyboard.current = false;
    trackRef.current?.querySelector<HTMLElement>(`[data-relay-slot="${lead.slot}"]`)?.focus();
  }, [lead]);

  return (
    <RelayContext.Provider
      value={{ count, lead: lead.slot, revealed: dragging ? null : revealed, stagger, drift, place, go, onKeyDown }}
    >
      <section
        {...props}
        aria-roledescription="carousel"
        className={cn("@container relative w-full", className)}
        onPointerEnter={(event) => {
          if (event.pointerType === "mouse") setHovered(true);
          onPointerEnter?.(event);
        }}
        onPointerLeave={(event) => {
          setHovered(false);
          onPointerLeave?.(event);
        }}
        onFocus={(event) => {
          if (event.target.matches(":focus-visible")) setFocused(true);
          onFocus?.(event);
        }}
        onBlur={(event) => {
          if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false);
          onBlur?.(event);
        }}
      >
        <div
          className={cn("grid grid-cols-[minmax(0,1fr)_auto]", inset === undefined && INSET, SIZES)}
          style={inset === undefined ? undefined : ({ "--relay-inset": inset } as React.CSSProperties)}
        >
          {heading != null && (
            <div className="col-start-1 row-start-1 min-w-0 self-end pr-4 pl-[var(--relay-inset)] @2xl:pr-10">
              {heading}
            </div>
          )}

          <div
            className={cn(
              "col-span-2 row-start-3 mt-5 flex items-center gap-2 px-[var(--relay-inset)]",
              "@2xl:col-span-1 @2xl:col-start-2 @2xl:row-start-1 @2xl:mt-0 @2xl:self-end @2xl:pl-0",
              count < 2 && "hidden",
            )}
          >
            <Counter active={active} count={count} step={step} reduced={reduced} />
            <RoundButton
              label="Previous"
              controls={trackId}
              onClick={() => go(lead.slot - 1)}
              onHover={(on) => leanTo(on ? -RELAY.lean : 0)}
            >
              <Arrow direction={-1} />
            </RoundButton>
            <RoundButton
              label="Next"
              controls={trackId}
              onClick={() => go(lead.slot + 1)}
              onHover={(on) => leanTo(on ? RELAY.lean : 0)}
            >
              <Arrow direction={1} />
            </RoundButton>
            {canPlay && (
              <RoundButton
                label={playing ? "Pause" : "Play"}
                controls={trackId}
                onClick={() => setPaused(playing)}
              >
                <svg aria-hidden viewBox="0 0 40 40" className="pointer-events-none absolute -inset-px -rotate-90">
                  <motion.circle
                    cx="20"
                    cy="20"
                    r="19.25"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="1.5"
                    style={{ pathLength: progress, opacity: playing ? 1 : 0 }}
                    className={`transition-opacity ${TIMING.ringFade}`}
                  />
                </svg>
                {playing ? <PauseIcon /> : <PlayIcon />}
              </RoundButton>
            )}
          </div>

          <div
            ref={trackRef}
            id={trackId}
            className={cn(
              "relative col-span-2 row-start-2 -my-2 h-[calc(var(--relay-hl)_+_1rem)] touch-pan-y overflow-hidden select-none",
              // Cards that already led fade into the margin. Phones have no room for one, so it's hidden there.
              "[mask-image:linear-gradient(to_right,transparent_calc(var(--relay-inset)_-_var(--relay-gap)),#000_calc(var(--relay-inset)_-_0.25rem))]",
              "@2xl:[mask-image:linear-gradient(to_right,transparent,#000_calc(var(--relay-inset)_-_0.5rem))]",
              heading != null ? "mt-6 @2xl:mt-10" : "@2xl:mt-6",
              count > 1 && (dragging ? "cursor-grabbing" : "cursor-grab"),
            )}
            onPointerDown={onPointerDown}
            onPointerMove={onPointerMove}
            onPointerUp={endDrag}
            onPointerCancel={endDrag}
            onClickCapture={(event) => {
              if (!pointer.current.swallow) return;
              pointer.current.swallow = false;
              event.preventDefault();
              event.stopPropagation();
            }}
            onDragStart={(event) => event.preventDefault()}
          >
            <div ref={probeRef} aria-hidden className="invisible absolute h-0">
              <div className="w-[var(--relay-inset)]" />
              <div className="w-[var(--relay-s)]" />
              <div className="w-[var(--relay-l)]" />
              <div className="w-[var(--relay-gap)]" />
            </div>
            {slots.map((slot) => (
              <SlotContext.Provider key={slot.slot} value={slot}>
                {items[slot.index]}
              </SlotContext.Provider>
            ))}
          </div>
        </div>
        <p aria-live="polite" aria-atomic className="sr-only">
          {announcement}
        </p>
      </section>
    </RelayContext.Provider>
  );
}

/* ── RelayCarouselItem ──────────────────────────────────── */

export interface RelayCarouselItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "role"> {
  /** Who said it. Shown on every card. */
  name: string;
  /** Their role and company, under the name. */
  role?: React.ReactNode;
  /** What they said, without quotation marks. Shown while the card leads. */
  quote: string;
  /** Photo URL. Cut to the lead card's size, so a resting card shows its top middle. */
  image: string;
  /** Alt text for the photo. */
  alt?: string;
  /** Small text in the lead card's top corner, like a place or a product. */
  label?: React.ReactNode;
  /** Classes for the quote, like a serif face. */
  quoteClassName?: string;
  /** Classes for the photo. The card is a `group/relay` with `data-state="lead"` or `"rest"`. */
  imageClassName?: string;
  /** Pinned to the lead card's bottom right corner, like a link to the full story. */
  children?: React.ReactNode;
}

/** One card. Render inside `RelayCarousel`. */
export function RelayCarouselItem({
  name,
  role,
  quote,
  image,
  alt = "",
  label,
  quoteClassName,
  imageClassName,
  className,
  children,
  ...props
}: RelayCarouselItemProps) {
  const { count, lead, revealed, stagger, drift: driftPx, place, go, onKeyDown } = useRelay();
  const { slot, index, canonical } = React.useContext(SlotContext);
  const isLead = slot === lead;
  const shown = isLead && revealed === slot;

  // Where this card sits, in cards from the lead slot, and how much of the lead it is.
  const offset = useTransform(place, (value) => slot - value);
  const grow = useTransform(offset, (d) => Math.max(0, 1 - Math.abs(d)));
  const ahead = useTransform(offset, (d) => Math.min(1, Math.max(0, d)));
  const drift = useTransform(offset, (d) => Math.max(-2, Math.min(2, d)));

  // Quote lines set in one after another, so each word learns which line it landed on.
  const quoteRef = React.useRef<HTMLParagraphElement>(null);
  const cardRef = React.useRef<HTMLDivElement>(null);
  React.useLayoutEffect(() => {
    const paragraph = quoteRef.current;
    const card = cardRef.current;
    if (!paragraph || !card) return;
    const assign = () => {
      let line = -1;
      let top = -Infinity;
      for (const word of Array.from(paragraph.children) as HTMLElement[]) {
        if (word.offsetTop > top + 2) {
          line += 1;
          top = word.offsetTop;
        }
        word.style.setProperty("--line", String(line));
      }
      card.style.setProperty("--lines", String(line + 1));
    };
    assign();
    const observer = new ResizeObserver(assign);
    observer.observe(paragraph);
    document.fonts?.ready.then(assign);
    return () => observer.disconnect();
  }, [quote]);

  const words = quote.trim().split(/\s+/);
  const reveal = `opacity-0 transition-[opacity,translate,filter] ${TIMING.hide} motion-safe:translate-y-[0.5em] motion-safe:blur-[6px] group-data-[shown=true]/relay:opacity-100 ${TIMING.show} motion-safe:group-data-[shown=true]/relay:translate-y-0 motion-safe:group-data-[shown=true]/relay:blur-none`;

  return (
    <motion.div
      ref={cardRef}
      data-relay-slot={slot}
      data-state={isLead ? "lead" : "rest"}
      data-shown={shown}
      role="group"
      aria-roledescription="slide"
      aria-label={`${index + 1} of ${count}: ${name}`}
      aria-hidden={canonical ? undefined : true}
      inert={!canonical}
      tabIndex={isLead && canonical ? 0 : -1}
      onKeyDown={onKeyDown}
      className={cn(
        "group/relay absolute top-2 left-0 outline-none",
        "h-[calc(var(--relay-hs)_+_(var(--relay-hl)_-_var(--relay-hs))_*_var(--grow))] w-[calc(var(--relay-s)_+_(var(--relay-l)_-_var(--relay-s))_*_var(--grow))]",
        "[transform:translateX(calc(var(--relay-inset)_+_var(--offset)_*_(var(--relay-s)_+_var(--relay-gap))_+_var(--ahead)_*_(var(--relay-l)_-_var(--relay-s))))]",
      )}
      style={
        {
          "--offset": offset,
          "--grow": grow,
          "--ahead": ahead,
          "--drift": drift,
          "--relay-drift": `${driftPx}px`,
        } as MotionStyle
      }
    >
      <div
        {...props}
        className={cn(
          "relative isolate size-full overflow-hidden rounded-2xl bg-zinc-800 text-white",
          "outline-current group-focus-visible/relay:outline-2 group-focus-visible/relay:outline-offset-2",
          className,
        )}
      >
        {/* eslint-disable-next-line @next/next/no-img-element -- a remote photo in an installable component */}
        <img
          src={image}
          alt={alt}
          draggable={false}
          decoding="async"
          className={cn(
            "pointer-events-none absolute top-0 left-1/2 h-[var(--relay-hl)] w-[var(--relay-l)] max-w-none object-cover",
            // Drift and zoom are CSS-only, so reduced motion turns them off without a hydration mismatch.
            "[--zoom:0] [--drift-px:0px] motion-safe:[--zoom:0.06] motion-safe:[--drift-px:var(--relay-drift)]",
            "[transform:translateX(calc(-50%_-_var(--drift)_*_var(--drift-px)))_scale(calc(1_+_var(--zoom)_*_(1_-_var(--grow))))] [transform-origin:50%_30%]",
            `transition-[filter] ${TIMING.brighten} group-data-[state=rest]/relay:brightness-[0.88] group-data-[state=rest]/relay:group-hover/relay:brightness-100`,
            imageClassName,
          )}
        />
        {/* A light foot for the caption on every card, and a deeper scrim the lead's quote sits on. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgb(0_0_0/0.62),rgb(0_0_0/0.18)_30%,transparent_52%)]"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_top,rgb(0_0_0/0.82),rgb(0_0_0/0.62)_38%,rgb(0_0_0/0.2)_72%,rgb(0_0_0/0.28))] opacity-[var(--grow)]"
        />

        {/* A hairline inner edge keeps a dark card's corners crisp on a dark page. */}
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 z-20 rounded-[inherit] ring-1 ring-white/10 ring-inset"
        />

        {!isLead && (
          <button
            type="button"
            tabIndex={-1}
            aria-label={`Show ${name}'s quote`}
            onClick={() => go(slot)}
            className="absolute inset-0 z-10 cursor-pointer"
          />
        )}

        {label != null && (
          <div
            className={cn(
              "pointer-events-none absolute top-0 left-0 z-20 p-5 text-xs font-medium tracking-wide text-white/80 @2xl:p-6",
              reveal,
            )}
          >
            {label}
          </div>
        )}

        <div className="pointer-events-none absolute inset-x-0 bottom-0 z-20 p-[calc(0.875rem_+_0.375rem_*_var(--grow))] @2xl:p-[calc(0.875rem_+_0.625rem_*_var(--grow))]">
          <div className="relative">
            <blockquote
              aria-hidden={isLead ? undefined : true}
              className={cn(
                "absolute bottom-full left-0 mb-4 w-[calc(var(--relay-l)_-_2.5rem)] @2xl:mb-5 @2xl:w-[calc(var(--relay-l)_-_3rem)]",
                "text-[clamp(1rem,calc(var(--relay-l)_*_0.05),1.3125rem)] leading-[1.4] font-medium tracking-[-0.01em] text-pretty",
                quoteClassName,
              )}
            >
              <p ref={quoteRef}>
                {words.map((word, i) => (
                  <React.Fragment key={i}>
                    <span
                      className={cn("relative inline-block", reveal)}
                      style={{ transitionDelay: shown ? `calc(var(--line, 0) * ${stagger}ms)` : undefined }}
                    >
                      {i === 0 && <span className="absolute right-full">“</span>}
                      {word}
                      {i === words.length - 1 && "”"}
                    </span>
                    {i < words.length - 1 && " "}
                  </React.Fragment>
                ))}
              </p>
            </blockquote>
            <div className="max-w-full pr-12">
              <div className="truncate text-sm leading-5 font-medium">{name}</div>
              {role != null && <div className="truncate text-xs leading-4 text-white/70">{role}</div>}
            </div>
          </div>
        </div>

        {children != null && (
          <div
            data-relay-extra
            inert={!isLead}
            className={cn(
              "absolute right-0 bottom-0 z-30 p-3.5 @2xl:p-5",
              reveal,
              "group-data-[state=rest]/relay:pointer-events-none",
            )}
            style={{ transitionDelay: shown ? `calc(var(--lines, 1) * ${stagger}ms)` : undefined }}
          >
            {children}
          </div>
        )}
      </div>
    </motion.div>
  );
}

/* ── Controls ───────────────────────────────────────────── */

function RoundButton({
  label,
  controls,
  onClick,
  onHover,
  children,
}: {
  label: string;
  controls: string;
  onClick: () => void;
  onHover?: (on: boolean) => void;
  children: React.ReactNode;
}) {
  return (
    <button
      type="button"
      aria-label={label}
      aria-controls={controls}
      onClick={onClick}
      onPointerEnter={(event) => event.pointerType === "mouse" && onHover?.(true)}
      onPointerLeave={() => onHover?.(false)}
      className={cn(
        // Drawn in the text color around it, so the controls suit any background.
        "group/button relative grid size-11 shrink-0 cursor-pointer place-items-center rounded-full border border-current/15 @2xl:size-10",
        `transition-[background-color,border-color,scale] ${TIMING.button} hover:border-current/40 hover:bg-current/[0.07] active:scale-[0.94]`,
        "outline-current focus-visible:outline-2 focus-visible:outline-offset-2",
      )}
    >
      {children}
    </button>
  );
}

function Arrow({ direction }: { direction: 1 | -1 }) {
  return (
    <svg
      aria-hidden
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={cn(
        `size-4 transition-transform ${TIMING.nudge}`,
        direction > 0 ? "group-hover/button:translate-x-0.5" : "-scale-x-100 group-hover/button:-translate-x-0.5",
      )}
    >
      <path d="M3 8h10M9 4l4 4-4 4" />
    </svg>
  );
}

function PauseIcon() {
  return (
    <svg aria-hidden viewBox="0 0 16 16" fill="currentColor" className="size-4">
      <rect x="4" y="3" width="2.5" height="10" rx="0.75" />
      <rect x="9.5" y="3" width="2.5" height="10" rx="0.75" />
    </svg>
  );
}

function PlayIcon() {
  return (
    <svg aria-hidden viewBox="0 0 16 16" fill="currentColor" className="size-4 translate-x-px">
      <path d="M5 3.7v8.6a.7.7 0 0 0 1.06.6l6.9-4.3a.7.7 0 0 0 0-1.2l-6.9-4.3A.7.7 0 0 0 5 3.7Z" />
    </svg>
  );
}

function Counter({
  active,
  count,
  step,
  reduced,
}: {
  active: number;
  count: number;
  step: number;
  reduced: boolean;
}) {
  const pad = (n: number) => String(n).padStart(String(count).length < 2 ? 2 : String(count).length, "0");
  return (
    <div
      aria-hidden
      className="mr-auto flex items-center text-sm leading-5 tabular-nums @2xl:mr-3"
    >
      <span className="relative inline-flex h-5 overflow-hidden">
        <AnimatePresence mode="popLayout" initial={false} custom={step}>
          <motion.span
            key={active}
            custom={step}
            variants={{
              enter: (dir: number) => ({ y: reduced ? 0 : `${dir * 100}%`, opacity: 0 }),
              center: { y: 0, opacity: 1 },
              exit: (dir: number) => ({ y: reduced ? 0 : `${dir * -100}%`, opacity: 0 }),
            }}
            initial="enter"
            animate="center"
            exit="exit"
            transition={TIMING.count}
            className="block"
          >
            {pad(active + 1)}
          </motion.span>
        </AnimatePresence>
      </span>
      <span className="px-1.5 opacity-30">/</span>
      <span className="opacity-50">{pad(count)}</span>
    </div>
  );
}