// Cinematic primitives — themed via cinematic.css.
// Marquee uses pure CSS animation; Odometer settles digits on mount.

const Marquee = ({ items, variant = "outline", separator = "·", speed = 60 }) => {
  const rowRef = React.useRef(null);
  React.useEffect(() => {
    const el = rowRef.current;
    if (!el) return;
    const w = el.scrollWidth / 2;
    if (!w) return;
    const dur = w / speed;
    el.style.animation = `cmMarquee ${dur}s linear infinite`;
  }, [items, speed]);
  const seg = (
    <span className="cm-marquee-content">
      {items.map((t, i) => (
        <React.Fragment key={i}>
          <span className="cm-marquee-item" dangerouslySetInnerHTML={{ __html: t }} />
          <span className="cm-marquee-sep" aria-hidden="true">{separator}</span>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className={`cm-marquee cm-marquee-${variant}`}>
      <div className="cm-marquee-row" ref={rowRef}>
        {seg}{seg}
      </div>
    </div>
  );
};

const Odometer = ({ value }) => {
  const digits = String(value).split("");
  const [settled, setSettled] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setSettled(true), 80);
    return () => clearTimeout(t);
  }, []);
  return (
    <span className="odometer" aria-label={String(value)}>
      {digits.map((d, i) => {
        if (!/[0-9]/.test(d)) return <span key={i} className="odo-fix">{d}</span>;
        return (
          <span key={i} className="odo-digit" aria-hidden="true">
            <span className="odo-strip" style={{ transform: `translateY(-${(settled ? Number(d) : 0)}em)` }}>
              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => <span key={n}>{n}</span>)}
            </span>
          </span>
        );
      })}
    </span>
  );
};

// Inject the marquee keyframes once.
(function injectMarqueeKeyframes() {
  if (document.getElementById("cm-marquee-kf")) return;
  const s = document.createElement("style");
  s.id = "cm-marquee-kf";
  s.textContent = "@keyframes cmMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }";
  document.head.appendChild(s);
})();

Object.assign(window, { Marquee, Odometer });