// Bricklet — Brand mosaic placeholders (palette-driven decorative grids)
const BRAND_PALETTE = [
  '#FBF7F0', '#F4ECDF', '#EADBC2', '#DCC4A0', '#C5A878',
  '#1F140C', '#4A3A2A', '#6B5944', '#A89684',
  '#1A2E9E', '#2A3CB8', '#5566D4', '#8E9AE8', '#C9CFF5',
  '#1F3550', '#344E6A', '#5A748F',
  '#98A6B5', '#C2CCD7',
  '#7C3552', '#B96A8A',
];

function seededPalette(seed, count) {
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
  const out = [];
  for (let i = 0; i < count; i++) {
    h = (h * 1664525 + 1013904223) >>> 0;
    out.push(BRAND_PALETTE[h % BRAND_PALETTE.length]);
  }
  return out;
}

const TONE_PALETTES = {
  warm:   ['#EADBC2','#DCC4A0','#C5A878','#A89684','#6B5944','#4A3A2A','#1A2E9E','#7C3552'],
  cool:   ['#F4ECDF','#C9CFF5','#8E9AE8','#5566D4','#1A2E9E','#091245','#1F3550','#1F140C'],
  studio: ['#FBF7F0','#EADBC2','#A89684','#1F3550','#344E6A','#5A748F','#98A6B5','#1A2E9E'],
  plum:   ['#F4ECDF','#EADBC2','#B96A8A','#7C3552','#501F35','#1F140C','#4A3A2A','#1A2E9E'],
};

function PortraitMosaic({ cols = 18, seed = 'a', tone = 'warm', animate = true }) {
  const cells = [];
  const cy = cols * 0.45, cx = cols / 2;
  const pal = TONE_PALETTES[tone] || TONE_PALETTES.warm;

  const seedRand = (() => {
    let h = 1779033703 ^ seed.length;
    for (let i = 0; i < seed.length; i++) {
      h = Math.imul(h ^ seed.charCodeAt(i), 3432918353);
      h = (h << 13) | (h >>> 19);
    }
    return () => {
      h = Math.imul(h ^ (h >>> 16), 2246822507);
      h = Math.imul(h ^ (h >>> 13), 3266489909);
      h ^= h >>> 16;
      return ((h >>> 0) % 1_000_000) / 1_000_000;
    };
  })();

  for (let r = 0; r < cols; r++) {
    for (let c = 0; c < cols; c++) {
      const dx = (c - cx) / (cols * 0.42);
      const dy = (r - cy) / (cols * 0.55);
      const d = Math.sqrt(dx * dx + dy * dy);
      let palIdx;
      const noise = seedRand();
      if (d < 0.55) {
        palIdx = noise < 0.4 ? 1 : noise < 0.75 ? 2 : 3;
      } else if (d < 0.85) {
        palIdx = noise < 0.5 ? 4 : noise < 0.85 ? 5 : 6;
      } else {
        palIdx = noise < 0.4 ? 0 : noise < 0.7 ? 1 : noise < 0.92 ? 2 : 7;
      }
      const color = pal[palIdx % pal.length];
      const delay = animate ? (r * 24 + c * 4) : 0;
      cells.push(
        <span key={`${r}-${c}`} className="brick-cell"
          style={{ background: color, animationDelay: `${delay}ms` }} />
      );
    }
  }

  return (
    <div style={{
      position: 'absolute', inset: 0, padding: 16,
      display: 'grid',
      gridTemplateColumns: `repeat(${cols}, 1fr)`,
      gridTemplateRows: `repeat(${cols}, 1fr)`,
      gap: 2,
    }}>
      {cells}
    </div>
  );
}

window.PortraitMosaic = PortraitMosaic;
window.BRAND_PALETTE = BRAND_PALETTE;
window.seededPalette = seededPalette;