/* Abstract, compliance-safe vertical artwork — no client logos, no brand marks.
   Each case gets a generated data-motif built from its own operating signature. */
/* Tints mirror components/core/Tag.jsx's vertical map, so tag dot and artwork always agree. */
const CA_TINT = { igaming:'#7C7CFF', forex:'#2FD5DA', fintech:'#3B6BFF', ecommerce:'#B45CF7', nutra:'#8BB4FF', ngo:'#7C5CFF' };

function CAigaming(c) {
  const bars = [18,26,22,34,30,44,40,58,52,72,66,88];
  return (<>
    {[0,1,2,3].map(i => (
      <circle key={i} cx="72" cy="150" r={40 + i * 34} fill="none" stroke={c} strokeWidth="1" opacity={.3 - i * .06} />
    ))}
    {bars.map((h, i) => (
      <rect key={i} x={150 + i * 19} y={176 - h} width="7" height={h} rx="1"
        fill={c} opacity={.28 + i * .055} />
    ))}
    <path d="M150 158 L378 92" stroke={c} strokeWidth="1.5" strokeDasharray="3 6" opacity=".7" />
  </>);
}

function CAforex(c) {
  const candles = [[0,54,84,60,78],[1,44,76,50,70],[2,50,88,58,66],[3,38,70,44,62],[4,46,80,52,56],
    [5,34,66,40,52],[6,40,74,46,44],[7,28,60,34,40],[8,34,68,40,34],[9,22,54,28,30],[10,28,62,34,24],[11,16,48,22,18]];
  return (<>
    {candles.map(([i, lo, hi, o, cl]) => {
      const x = 44 + i * 29, top = 190 - hi, bot = 190 - lo;
      const yo = 190 - Math.max(o, cl), hgt = Math.abs(o - cl) + 4;
      return (<g key={i} opacity={.35 + i * .05}>
        <line x1={x + 5} x2={x + 5} y1={top} y2={bot} stroke={c} strokeWidth="1" />
        <rect x={x} y={yo} width="11" height={hgt} rx="1" fill={c} />
      </g>);
    })}
    <path d="M40 150 C 120 140, 200 112, 290 84 S 372 52, 392 44" fill="none" stroke="#fff" strokeWidth="1.2" opacity=".35" />
  </>);
}

function CAcrypto(c) {
  const nodes = [[64,70],[126,132],[112,44],[196,92],[184,170],[262,52],[276,138],[340,96],[348,178],[228,28]];
  const links = [[0,1],[0,2],[1,3],[2,3],[1,4],[3,5],[3,6],[4,6],[5,7],[6,7],[6,8],[5,9],[2,9],[7,8]];
  return (<>
    {links.map(([a, b], i) => (
      <line key={i} x1={nodes[a][0]} y1={nodes[a][1]} x2={nodes[b][0]} y2={nodes[b][1]}
        stroke={c} strokeWidth="1" opacity=".3" />
    ))}
    {nodes.map(([x, y], i) => (<g key={i}>
      <circle cx={x} cy={y} r={i % 3 === 0 ? 7 : 4} fill={c} opacity={i % 3 === 0 ? .9 : .55} />
      <circle cx={x} cy={y} r={i % 3 === 0 ? 15 : 10} fill="none" stroke={c} strokeWidth="1" opacity=".22" />
    </g>))}
  </>);
}

function CAecommerce(c) {
  const cells = [];
  for (let r = 0; r < 4; r++) for (let k = 0; k < 9; k++) cells.push([r, k]);
  return (<>
    {cells.map(([r, k]) => {
      const on = (k * 3 + r * 5) % 7 < 3;
      return <rect key={r + '-' + k} x={44 + k * 36} y={40 + r * 34} width="26" height="24" rx="3"
        fill={on ? c : 'transparent'} stroke={c} strokeWidth="1" opacity={on ? .18 + r * .14 : .16} />;
    })}
    <path d="M44 186 C 130 186, 150 60, 244 60 S 330 150, 392 150" fill="none" stroke={c} strokeWidth="1.5" opacity=".75" />
  </>);
}

const CA_ART = { igaming:CAigaming, forex:CAforex, crypto:CAcrypto, ecommerce:CAecommerce };

function CaseArt({ id, v, label, height = 200 }) {
  const c = CA_TINT[v] || CA_TINT[id] || '#7C5CFF';
  const art = (CA_ART[id] || CAcrypto)(c);
  return (
    <div style={{ position:'relative', height, overflow:'hidden',
      background:'radial-gradient(120% 140% at 12% 0%, ' + c + '2E 0%, transparent 58%), linear-gradient(160deg,#131227 0%,#08070F 72%)' }}>
      <svg viewBox="0 0 400 225" preserveAspectRatio="xMidYMid slice"
        style={{ position:'absolute', inset:0, width:'100%', height:'100%' }} aria-hidden="true">
        {art}
      </svg>
      <div style={{ position:'absolute', inset:0,
        background:'linear-gradient(to top, rgba(6,5,12,.96) 0%, rgba(6,5,12,.72) 26%, rgba(6,5,12,0) 62%)' }} />
      <div style={{ position:'absolute', left:20, bottom:16, display:'flex', alignItems:'center', gap:10 }}>
        <span style={{ width:6, height:6, borderRadius:99, background:c }} />
        <span style={{ fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'.16em',
          textTransform:'uppercase', color:'rgba(255,255,255,.62)' }}>{label}</span>
      </div>
    </div>
  );
}
Object.assign(window, { CaseArt });