/** Big naked type at the bottom left. Active is full white, the next one is dimmed,
 *  everything lifts to readable while the list — or the feed — is being dragged. */
function CategoryRail({ items, index, onIndex, active, progress, bottom = 26 }) {
  const scroller = React.useRef(null);
  const nodes = React.useRef([]);
  const [touching, setTouching] = React.useState(false);

  // a anterior fica com um canto de fora (quando existe), pra dar de onde voltar
  const PEEK = 34;
  const offsetFor = (i) => {
    const el = nodes.current[i];
    if (!el || !scroller.current) return 0;
    return Math.max(0, el.offsetLeft - 16 - (i > 0 ? PEEK : 0));
  };

  React.useEffect(() => {
    if (!scroller.current) return;
    const base = offsetFor(index);
    const next = offsetFor(index + (progress > 0 ? 1 : -1));
    const target = progress ? base + Math.abs(progress) * (next - base) : base;
    scroller.current.scrollTo({ left: target, behavior: progress || touching ? "auto" : "smooth" });
  }, [index, progress]);

  const opacityFor = (i) => {
    if (active || touching) return i === index ? 1 : 0.72;
    if (i === index) return 1;
    if (i === index + 1) return 0.34;
    if (i === index - 1) return 0.26;
    return 0.12;
  };

  return (
    <div ref={scroller}
      onPointerDown={() => setTouching(true)}
      onPointerUp={() => setTouching(false)}
      onPointerCancel={() => setTouching(false)}
      onScroll={() => { if (!touching) return; }}
      style={{
        position: "absolute", left: 0, right: 0, bottom, zIndex: 40, pointerEvents: "auto",
        transition: "bottom 320ms var(--ease-out)",
        display: "flex", alignItems: "flex-end", gap: 26,
        padding: "0 16px", overflowX: "auto", overflowY: "hidden",
        scrollbarWidth: "none", WebkitOverflowScrolling: "touch",
        maskImage: "linear-gradient(to right, transparent 0, #000 18px, #000 86%, transparent 100%)",
        WebkitMaskImage: "linear-gradient(to right, transparent 0, #000 18px, #000 86%, transparent 100%)"
      }}>
      {items.map((c, i) => (
        <button key={c} ref={el => { nodes.current[i] = el; }} type="button" onClick={() => onIndex(i)}
          style={{
            background: "none", border: "none", padding: 0, cursor: "pointer", whiteSpace: "nowrap",
            fontFamily: "var(--font-display)", fontWeight: 900, fontStretch: "125%", textTransform: "uppercase",
            fontSize: 34, lineHeight: 1, letterSpacing: "-0.03em",
            color: "var(--white)", opacity: opacityFor(i),
            transition: "opacity var(--dur-base) var(--ease-out)"
          }}>{c}</button>
      ))}
      <span style={{ flex: "0 0 240px" }} />
    </div>
  );
}
Object.assign(window, { CategoryRail });