// Atmospheric striped placeholder for renders/screens we don't have yet.
// Swap for <img> or <video> when real assets land.

function Placeholder({ label = 'render', height = 220, tone = 'warm', style }) {
  const palettes = {
    warm: { a: '#1c130d', b: '#241813', c: '#ff7a35' },
    cool: { a: '#0e1218', b: '#141a23', c: '#ff7a35' },
    flat: { a: '#0a0a0a', b: '#111111', c: '#ff7a35' },
  };
  const p = palettes[tone] || palettes.warm;
  const stripes = `repeating-linear-gradient(135deg, ${p.a} 0 14px, ${p.b} 14px 28px)`;
  return (
    <div style={{
      position: 'relative', height, width: '100%',
      background: stripes, overflow: 'hidden', ...style,
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(120% 80% at 30% 20%, ${p.c}11, transparent 60%)`,
      }} />
      <div style={{
        position: 'absolute', left: 12, bottom: 10,
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.55)',
        background: 'rgba(0,0,0,0.4)', padding: '4px 8px', borderRadius: 2,
        border: '1px solid rgba(255,255,255,0.08)',
      }}>{label}</div>
      <div style={{
        position: 'absolute', right: 12, top: 10,
        fontFamily: 'JetBrains Mono, ui-monospace, monospace',
        fontSize: 9, letterSpacing: '0.18em', color: 'rgba(255,255,255,0.3)',
      }}>// placeholder</div>
    </div>
  );
}

window.GFX_COMPONENTS = window.GFX_COMPONENTS || {};
window.GFX_COMPONENTS.Placeholder = Placeholder;