// EraPlaceholder.jsx — striped archival + photoreal placeholder blocks.
// Two visual modes: 'archival' (sepia, noisy, grainy) and 'photoreal' (full-color saturated).
// Never draws real imagery — uses gradients, diagonal stripes, era-specific tonal palettes,
// and a monospace archive ref stamp so it reads unambiguously as "placeholder for a real shot".

const ERA_PALETTES = {
  'stone-age':     { archival: ['#2b2420', '#3a2f26'], photoreal: ['#8a6b4a', '#3d2a1a', '#c9a57a'], label: 'STONE AGE',        sub: 'c. 10,000 BCE', ref: 'LR-SA-014' },
  'ancient-rome':  { archival: ['#2a2419', '#3d3225'], photoreal: ['#c48b4a', '#5a3a1f', '#e8c088'], label: 'ANCIENT ROME',     sub: 'c. 79 CE',      ref: 'LR-AR-207' },
  'medieval':      { archival: ['#201c1a', '#302a24'], photoreal: ['#3d4a4f', '#1a1f24', '#8a7a5a'], label: 'MEDIEVAL',         sub: '1387 CE',       ref: 'LR-MD-091' },
  'victorian':     { archival: ['#24201c', '#35302a'], photoreal: ['#4a3a2a', '#1f1712', '#a88858'], label: 'VICTORIAN LONDON', sub: '1888',          ref: 'LR-VL-342' },
  'wwi':           { archival: ['#1e1c18', '#2d2a24'], photoreal: ['#4a4230', '#22201a', '#7a6a4a'], label: 'WORLD WAR I',      sub: '1917 · Ypres',  ref: 'LR-W1-488' },
  'titanic':       { archival: ['#1a1d22', '#2a2f36'], photoreal: ['#2a3540', '#0e1318', '#6a7a88'], label: 'TITANIC',          sub: '1912 · Atlantic', ref: 'LR-TT-912' },
  'ww2':           { archival: ['#1c1a16', '#2a2822'], photoreal: ['#3a3828', '#1a1812', '#6a6248'], label: 'WORLD WAR II',     sub: '1944 · Europe',   ref: 'LR-W2-644' },
  'renaissance':   { archival: ['#221c14', '#332a1e'], photoreal: ['#8a6a3a', '#3a2a15', '#d4b070'], label: 'RENAISSANCE',      sub: '1503 · Florence', ref: 'LR-RN-503' },
  'western':       { archival: ['#241d15', '#382c1d'], photoreal: ['#a86a3a', '#3a2210', '#d89a5a'], label: 'OLD WEST',         sub: '1876 · Frontier', ref: 'LR-WW-876' },
};

function EraPlaceholder({ era = 'wwi', mode = 'photoreal', showStamp = true, style = {}, children, label, sub, ref: refProp }) {
  const p = ERA_PALETTES[era] || ERA_PALETTES.wwi;
  const [c1, c2, c3] = mode === 'photoreal' ? p.photoreal : [...p.archival, p.archival[0]];
  const stripeColor = mode === 'archival' ? 'rgba(255,245,220,0.04)' : 'rgba(0,0,0,0.18)';
  const vignette = 'radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.55) 100%)';
  const base = mode === 'photoreal'
    ? `linear-gradient(135deg, ${c1} 0%, ${c2} 55%, ${c3 || c1} 100%)`
    : `linear-gradient(180deg, ${c1} 0%, ${c2} 100%)`;

  const stripeSize = 14;
  const stripes = `repeating-linear-gradient(135deg, transparent 0 ${stripeSize - 2}px, ${stripeColor} ${stripeSize - 2}px ${stripeSize}px)`;
  const grain = mode === 'archival'
    ? `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.7  0 0 0 0 0.5  0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E")`
    : `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")`;

  return (
    <div style={{
      position: 'relative',
      width: '100%', height: '100%',
      backgroundImage: `${vignette}, ${stripes}, ${grain}, ${base}`,
      backgroundSize: 'cover, auto, 200px, cover',
      overflow: 'hidden',
      filter: mode === 'archival' ? 'sepia(0.6) contrast(1.05) brightness(0.85)' : 'none',
      ...style,
    }}>
      {showStamp && (
        <div style={{
          position: 'absolute', top: 12, left: 12,
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          fontSize: 9, letterSpacing: 1.5, color: 'rgba(255,245,220,0.7)',
          display: 'flex', gap: 10, alignItems: 'center',
        }}>
          <span style={{ width: 6, height: 6, background: mode === 'photoreal' ? '#e8a156' : 'rgba(255,245,220,0.6)', borderRadius: '50%' }} />
          <span>{refProp || p.ref}</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span style={{ opacity: 0.7 }}>{mode === 'archival' ? 'SOURCE' : 'RECONSTRUCTION'}</span>
        </div>
      )}
      <div style={{
        position: 'absolute', bottom: 16, left: 16, right: 16,
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        color: 'rgba(255,245,220,0.9)',
      }}>
        <div style={{ fontSize: 10, letterSpacing: 2, opacity: 0.7 }}>{sub || p.sub}</div>
        <div style={{ fontSize: 13, letterSpacing: 1, fontWeight: 600, marginTop: 2 }}>{label || p.label}</div>
      </div>
      {children}
    </div>
  );
}

Object.assign(window, { EraPlaceholder, ERA_PALETTES });