/* Full-bleed Console app wrapper */

const CONSOLE_PALETTE = ["#cdfc51", "#6fe0e8"];  // [primary, secondary]
const CONSOLE_SCANLINES = 0.03;
const CONSOLE_DENSITY = "normal";  // 'tight' | 'normal' | 'airy'

function darken(hex, amount = 0.35) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const f = (c) => Math.max(0, Math.round(c * (1 - amount)));
  return '#' + [f(r), f(g), f(b)].map((c) => c.toString(16).padStart(2, '0')).join('');
}

function ConsoleApp() {
  const [primary, secondary] = CONSOLE_PALETTE;
  const densityClass = CONSOLE_DENSITY === 'tight' ? 'density-tight'
                     : CONSOLE_DENSITY === 'airy' ? 'density-airy'
                     : '';
  return (
    <ConsoleArtboard
      primary={primary}
      primaryDim={darken(primary, 0.35)}
      secondary={secondary}
      secondaryDim={darken(secondary, 0.4)}
      scanlines={CONSOLE_SCANLINES}
      densityClass={densityClass}
    />
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ConsoleApp />);