// Architectural placeholder visuals — SVG facade patterns in the brand palette
// Neutral charcoal/stone cells with occasional gold accents (matches the cube logo).
// `hue` only nudges the warm tint slightly + seeds the pattern.

const { useMemo } = React;

function Placeholder({ hue = 30, label, variant = "tower", dark = false }) {
  // Brand-neutral tones — warm gray, barely tinted by hue
  const bg = `oklch(${dark ? 20 : 90}% 0.006 ${hue})`;
  const bgDeep = `oklch(${dark ? 14 : 82}% 0.01 ${hue})`;
  const cell = `oklch(${dark ? 60 : 42}% 0.008 ${hue})`; // charcoal gray
  const cellSoft = `oklch(${dark ? 40 : 68}% 0.008 ${hue})`;
  const gold = "#c9a23b";

  const cols = variant === "wide" ? 18 : 10;
  const rows = variant === "wide" ? 9 : 16;

  const cells = useMemo(() => {
    const out = [];
    const rnd = (i, j) => {
      const x = Math.sin(i * 9.7 + j * 3.3 + hue) * 43758.5453;
      return x - Math.floor(x);
    };
    for (let j = 0; j < rows; j++) {
      for (let i = 0; i < cols; i++) {
        const r = rnd(i, j);
        out.push({ i, j, lit: r > 0.62, bright: r > 0.9, gold: r > 0.955 });
      }
    }
    return out;
  }, [cols, rows, hue]);

  return (
    <svg viewBox={`0 0 ${cols * 10} ${rows * 10}`} preserveAspectRatio="xMidYMid slice" role="img" aria-label={label}>
      <defs>
        <linearGradient id={`g-${hue}-${variant}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={bg} />
          <stop offset="100%" stopColor={bgDeep} />
        </linearGradient>
      </defs>
      <rect width="100%" height="100%" fill={`url(#g-${hue}-${variant})`} />
      {/* Horizon line */}
      <line x1="0" y1={rows * 10 - 6} x2={cols * 10} y2={rows * 10 - 6} stroke={cellSoft} strokeWidth="0.4" />
      {/* Facade grid */}
      {cells.map(({ i, j, lit, bright, gold: g }, idx) => {
        const x = i * 10 + 1.2;
        const y = j * 10 + 1.2;
        const fill = g ? gold : bright ? cell : cellSoft;
        const opacity = g ? 0.95 : bright ? 0.85 : lit ? 0.45 : 0.12;
        return (
          <rect key={idx} x={x} y={y} width="7.6" height="7.6" fill={fill} opacity={opacity} />
        );
      })}
      <rect x="0" y="0" width="100%" height="1" fill={cellSoft} opacity="0.4" />
    </svg>
  );
}

window.Placeholder = Placeholder;