import type { CSSProperties } from "react";

type RevealAttributes = {
  "data-reveal": string;
  style?: CSSProperties;
};

/**
 * Spread onto any element to reveal it when it scrolls into view.
 * Styling lives in globals.css; RevealObserver toggles `.is-revealed`.
 * Do not use above the fold — the hero uses CSS-only animations instead.
 */
export function revealProps(delayMs = 0, variant: "rise" | "fade" = "rise"): RevealAttributes {
  return {
    "data-reveal": variant === "fade" ? "fade" : "",
    ...(delayMs ? { style: { "--reveal-delay": `${delayMs}ms` } as CSSProperties } : {}),
  };
}

/** Stagger helper for lists: 70ms per item, capped so long lists don't lag. */
export function staggerDelay(index: number, step = 70, max = 420): number {
  return Math.min(index * step, max);
}