// Placeholder building illustration — minimal geometric, not copying any real photo

function BuildingPlaceholder({ seed = 0, width = 100, height = 100 }) {
  // Deterministic variants based on seed
  const variants = [
    { bg: '#E8E2D6', accent: '#A89B82', windows: '#F5F1E8' },
    { bg: '#DCE4E0', accent: '#7A8F84', windows: '#EEF2F0' },
    { bg: '#E4DCD6', accent: '#9B8376', windows: '#F1EAE4' },
    { bg: '#D8DCE4', accent: '#7684A0', windows: '#E9ECF2' },
  ];
  const v = variants[seed % variants.length];
  const cols = 5;
  const rows = 7;
  const rowOffset = seed % 3;

  return (
    <svg width={width} height={height} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 8 }}>
      <rect width="100" height="100" fill={v.bg}/>
      {/* Sky tone */}
      <rect width="100" height="40" fill={v.bg} opacity="0.7"/>
      {/* Building silhouette */}
      <rect x="12" y="22" width="76" height="78" fill={v.accent} opacity="0.55"/>
      <rect x="18" y="14" width="40" height="86" fill={v.accent} opacity="0.75"/>
      <rect x="60" y="30" width="30" height="70" fill={v.accent} opacity="0.6"/>
      {/* Windows grid */}
      {Array.from({ length: rows }).map((_, r) =>
        Array.from({ length: cols }).map((_, c) => {
          const skip = ((r + c + rowOffset) * 7) % 11 === 0;
          return (
            <rect
              key={`${r}-${c}`}
              x={21 + c * 7}
              y={20 + r * 10}
              width={4}
              height={5}
              fill={skip ? v.accent : v.windows}
              opacity={skip ? 0.4 : 0.9}
            />
          );
        })
      )}
      {/* Right tower windows */}
      {Array.from({ length: 5 }).map((_, r) => (
        <rect key={`rt-${r}`} x={68} y={36 + r * 10} width={14} height={4} fill={v.windows} opacity={0.85}/>
      ))}
    </svg>
  );
}

Object.assign(window, { BuildingPlaceholder });