// variations.jsx — side-by-side exploration frames on the host canvas.
// Relies on core.jsx + popover.jsx globals. Mounts each frame as a direct body child.

const baseT = { appearance:'Dark', accent:'#276EF1', panelWidth:'Standard', density:'Comfortable', homeLayout:'Standard', recordButton:'Top', recordingStyle:'Meter' };
const noop = () => {};

function Frame({ t, screen, elapsed, width }) {
  return (
    <div style={{ ...themeVars(t.appearance==='Light'?'light':'dark', t.accent),
      width, borderRadius:14, overflow:'hidden',
      background:'var(--pop-bg)', border:'1px solid var(--pop-border)', boxShadow:'var(--pop-shadow)' }}>
      <Popover t={t} screen={screen} go={noop} elapsed={elapsed||0} startRec={noop} stopRec={noop} openApp={noop} detached={false} toggleDetach={noop} width={width}/>
    </div>
  );
}

// caption + subcaption above each frame
function mountFrame({ x, y, label, sub, t, screen, elapsed }) {
  const width = PANEL_W[t.panelWidth] || 360;
  const wrap = document.createElement('div');
  wrap.style.cssText = `position:absolute; left:${x}px; top:${y}px; width:${width}px;`;
  const head = document.createElement('div');
  head.style.cssText = "margin-bottom:14px; font-family:'Inter',sans-serif;";
  head.innerHTML = `<div style="font-size:15px;font-weight:700;color:#15151b;letter-spacing:-0.01em">${label}</div>
    <div style="font-size:12.5px;color:#5a5a66;margin-top:2px;font-family:'JetBrains Mono',monospace">${sub}</div>`;
  const mount = document.createElement('div');
  wrap.appendChild(head); wrap.appendChild(mount);
  document.body.appendChild(wrap);
  ReactDOM.createRoot(mount).render(<Frame t={t} screen={screen} elapsed={elapsed} width={width}/>);
}

const COL = [60, 520, 980];
const ROW = [90, 880, 1660, 2300];

const FRAMES = [
  // Row 0 — home layout
  { x:COL[0], y:ROW[0], label:'Home — Standard', sub:'record top · recent list', t:{...baseT} },
  { x:COL[1], y:ROW[0], label:'Home — Focused', sub:'hero record · peek of recents', t:{...baseT, homeLayout:'Focused'} },
  { x:COL[2], y:ROW[0], label:'Home — Record at bottom', sub:'list first · action pinned', t:{...baseT, recordButton:'Bottom'} },
  // Row 1 — density + light
  { x:COL[0], y:ROW[1], label:'List — Comfortable', sub:'default row rhythm', t:{...baseT} },
  { x:COL[1], y:ROW[1], label:'List — Compact', sub:'tighter rows, more on screen', t:{...baseT, density:'Compact'} },
  { x:COL[2], y:ROW[1], label:'Home — Light', sub:'system-adaptive appearance', t:{...baseT, appearance:'Light'} },
  // Row 2 — recording treatments
  { x:COL[0], y:ROW[2], label:'Recording — Level meters', sub:'per-source bars', t:{...baseT}, screen:'recording', elapsed:16 },
  { x:COL[1], y:ROW[2], label:'Recording — Waveform', sub:'scrolling waveform', t:{...baseT, recordingStyle:'Waveform'}, screen:'recording', elapsed:16 },
  { x:COL[2], y:ROW[2], label:'Recording detail', sub:'summary in the popover', t:{...baseT}, screen:'detail' },
];

FRAMES.forEach(f => mountFrame({ ...f, screen: f.screen || 'home' }));