// aerOS — QR code visual. Deterministic module grid w/ finder patterns (hi-fi placeholder). Exports to window.
function QRCode({ value = '', size = 160, fg = '#0f172a', bg = '#ffffff', quiet = true, logo }) {
  const N = 29;
  // deterministic pattern from string
  let h = 2166136261;
  for (let i = 0; i < value.length; i++) { h ^= value.charCodeAt(i); h = Math.imul(h, 16777619); }
  const rng = (i) => { let x = Math.sin((h % 100000) + i * 12.9898) * 43758.5453; return x - Math.floor(x); };
  const isFinder = (r, c) => {
    const inBox = (br, bc) => r >= br && r < br + 7 && c >= bc && c < bc + 7;
    return inBox(0, 0) || inBox(0, N - 7) || inBox(N - 7, 0);
  };
  const finderDark = (r, c) => {
    const box = (br, bc) => {
      const rr = r - br, cc = c - bc;
      if (rr < 0 || rr > 6 || cc < 0 || cc > 6) return null;
      const edge = rr === 0 || rr === 6 || cc === 0 || cc === 6;
      const core = rr >= 2 && rr <= 4 && cc >= 2 && cc <= 4;
      return edge || core;
    };
    return box(0, 0) ?? box(0, N - 7) ?? box(N - 7, 0);
  };
  const cells = [];
  const cw = 100 / N;
  for (let r = 0; r < N; r++) {
    for (let c = 0; c < N; c++) {
      let dark;
      if (isFinder(r, c)) { dark = finderDark(r, c); if (dark == null) dark = false; }
      else if (r < 8 && c < 8) dark = false;
      else if (r < 8 && c >= N - 8) dark = false;
      else if (r >= N - 8 && c < 8) dark = false;
      else dark = rng(r * N + c) > 0.52;
      if (dark) cells.push(<rect key={r + '-' + c} x={(c * cw).toFixed(2)} y={(r * cw).toFixed(2)} width={(cw * 1.02).toFixed(2)} height={(cw * 1.02).toFixed(2)} fill={fg} rx={cw * 0.18} />);
    }
  }
  const pad = quiet ? 8 : 0;
  return (
    <div style={{ width: size, height: size, background: bg, borderRadius: 10, padding: pad, position: 'relative', boxSizing: 'border-box' }}>
      <svg viewBox="0 0 100 100" style={{ width: '100%', height: '100%', display: 'block' }}>
        {cells}
      </svg>
      {logo && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}>
          <div style={{ width: size * 0.24, height: size * 0.24, borderRadius: 8, background: bg, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 0 4px ' + bg }}>{logo}</div>
        </div>
      )}
    </div>
  );
}
window.QRCode = QRCode;
