// Shared design tokens and small utilities for Timeblind animation.
// Loaded BEFORE all scene files.

// LocalSprite: like Sprite, but reads its time from the parent SpriteContext
// (i.e. local-to-scene time) rather than the global timeline. Use this inside
// scenes that are themselves wrapped in a SceneGate. Children get a NEW
// SpriteContext where time is relative to this LocalSprite's start.
function LocalSprite({ start = 0, end = Infinity, children }) {
  const parent = React.useContext(SpriteContext);
  const t = parent.localTime;
  if (t < start || t > end) return null;
  const duration = end - start;
  const localTime = Math.max(0, t - start);
  const progress = duration > 0 && isFinite(duration)
    ? clamp(localTime / duration, 0, 1)
    : 0;
  const value = { localTime, progress, duration, visible: true };
  return (
    <SpriteContext.Provider value={value}>
      {typeof children === 'function' ? children(value) : children}
    </SpriteContext.Provider>
  );
}

const TB = {
  // Core
  bg:      '#faf7f2',          // warmer than codebase, more inviting
  bgDeep:  '#f1ece3',
  fg:      '#1f1d1a',
  muted:   '#8b857c',
  rail:    '#e7e2d6',

  // Accent system — warm orange anchor + supporting pastels
  orange:  '#ff6b35',
  orangeSoft: '#ffd9c7',
  peach:   '#ffc7a8',
  butter:  '#f5d97a',
  sage:    '#b8d4a8',
  sky:     '#a8c8e8',
  lavender:'#c8b8e0',
  rose:    '#f0a8b8',
  mint:    '#bce4d4',

  // Type
  display: '"Nunito", "SF Pro Rounded", system-ui, sans-serif',
  body:    '"Nunito", "SF Pro Rounded", system-ui, sans-serif',
  mono:    '"JetBrains Mono", ui-monospace, monospace',
};

// Stage dimensions
const STAGE_W = 1920;
const STAGE_H = 1080;

// fmt minute -> "h:mm" (24h)
function fmtTime(min) {
  const h = Math.floor(min / 60);
  const m = min % 60;
  return `${h}:${String(m).padStart(2, '0')}`;
}

// fmt minute -> "h:mm am/pm"
function fmtTime12(min) {
  const h24 = Math.floor(min / 60);
  const m = min % 60;
  const ampm = h24 >= 12 ? 'pm' : 'am';
  const h12 = h24 % 12 === 0 ? 12 : h24 % 12;
  return `${h12}:${String(m).padStart(2, '0')} ${ampm}`;
}

// Add a CSS keyframes block once
function injectStyles() {
  if (document.getElementById('tb-styles')) return;
  const s = document.createElement('style');
  s.id = 'tb-styles';
  s.textContent = `
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap');
    @keyframes tb-pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.04); opacity: 0.92; }
    }
    @keyframes tb-tick {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(2deg); }
    }
    @keyframes tb-jitter {
      0%, 100% { transform: translate(0,0) rotate(var(--r, 0deg)); }
      25% { transform: translate(0.4px, -0.6px) rotate(calc(var(--r, 0deg) + 0.3deg)); }
      75% { transform: translate(-0.5px, 0.4px) rotate(calc(var(--r, 0deg) - 0.3deg)); }
    }
    @keyframes tb-wobble {
      0%, 100% { transform: rotate(-1deg); }
      50% { transform: rotate(1deg); }
    }
  `;
  document.head.appendChild(s);
}
injectStyles();

Object.assign(window, { TB, STAGE_W, STAGE_H, fmtTime, fmtTime12, LocalSprite });