/** Shared chrome: mark + section + page counter for all inner slides */
function SlideChrome({ page = '01', total = '14', section, invert = false }) {
  const color = invert ? 'rgba(255,255,255,0.7)' : 'var(--fg-muted)';
  const sep = invert ? 'rgba(255,255,255,0.22)' : 'var(--border)';
  return (
    <div style={chrome.bar}>
      <div style={chrome.left}>
        <img src="../../assets/craid-mark-pink.svg" alt="CRAiD" style={{ height: 22, width: 22, display: 'block' }} />
        {section && (
          <>
            <span style={{ ...chrome.sep, background: sep }} />
            <span style={{ ...chrome.section, color }}>{section}</span>
          </>
        )}
      </div>
      <span style={{ ...chrome.pg, color }}>{page} / {total}</span>
    </div>
  );
}

const chrome = {
  bar: { position: 'absolute', top: 32, left: 56, right: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 3 },
  left: { display: 'flex', alignItems: 'center', gap: 14 },
  sep: { width: 1, height: 14 },
  section: { fontSize: 11, fontWeight: 500, letterSpacing: '0.15em', textTransform: 'uppercase' },
  pg: { fontSize: 11, fontWeight: 500, letterSpacing: '0.1em' },
};

/** Shared slide frame (1280x720 base) */
function SlideBase({ children, bg = 'var(--bg)', label, style }) {
  return (
    <div data-screen-label={label} style={{
      position: 'relative', width: 1280, height: 720, overflow: 'hidden',
      background: bg, fontFamily: 'var(--font-sans)', color: 'var(--fg)',
      ...style,
    }}>
      {children}
    </div>
  );
}

Object.assign(window, { SlideChrome, SlideBase });