// Shared: generates the visual look for a case study "tile" —
// an SVG-based abstract keyart built from the case's color palette +
// client initials. Looks like campaign artwork, not a placeholder.

window.CaseArt = function CaseArt({ caseItem, variant = 'block', style = {} }) {
  const c = caseItem;
  const initials = (c.client || '??').replace(/[^A-Za-z0-9]/g, '').slice(0, 2).toUpperCase();

  const base = {
    width: '100%',
    height: '100%',
    position: 'relative',
    overflow: 'hidden',
    background: c.color,
    color: c.altColor,
    ...style,
  };

  if (variant === 'split') {
    return (
      <div style={base}>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
          <div style={{ background: c.color }} />
          <div style={{ background: c.altColor }} />
        </div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', mixBlendMode: 'difference', color: '#fff', fontFamily: 'inherit', fontWeight: 800, fontSize: 'clamp(48px, 14vw, 180px)', letterSpacing: '-0.05em', lineHeight: 0.85 }}>
          {initials}
        </div>
        <div style={{ position: 'absolute', bottom: 14, left: 14, right: 14, display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', mixBlendMode: 'difference', color: '#fff' }}>
          <span>{c.shortTitle}</span>
          <span>{c.year}</span>
        </div>
      </div>
    );
  }

  if (variant === 'gradient') {
    return (
      <div style={{ ...base, background: `radial-gradient(circle at 30% 40%, ${c.altColor}40, transparent 60%), linear-gradient(135deg, ${c.color} 0%, ${c.color} 60%, ${shade(c.color, -20)} 100%)` }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.1, backgroundImage: 'repeating-linear-gradient(45deg, #fff 0 1px, transparent 1px 8px)' }} />
        <div style={{ position: 'absolute', top: 16, left: 18, fontSize: 11, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: c.altColor, opacity: 0.9 }}>
          {c.sectorTag} / {c.year}
        </div>
        <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18, fontWeight: 700, fontSize: 'clamp(18px, 3.5vw, 34px)', lineHeight: 1, letterSpacing: '-0.02em', color: c.altColor }}>
          {c.shortTitle}
        </div>
      </div>
    );
  }

  if (variant === 'stripes') {
    const stripes = [c.color, c.altColor, c.color];
    return (
      <div style={{ ...base, background: c.altColor }}>
        <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateRows: '1fr 1fr 1fr' }}>
          {stripes.map((col, i) => <div key={i} style={{ background: col, transform: i === 1 ? 'skewY(-2deg)' : 'none', transformOrigin: 'left' }} />)}
        </div>
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'inherit', fontWeight: 900, fontSize: 'clamp(40px, 12vw, 140px)', letterSpacing: '-0.04em', color: '#fff', mixBlendMode: 'difference' }}>
          {c.client}
        </div>
      </div>
    );
  }

  if (variant === 'big-metric') {
    const metric = c.metrics && c.metrics[0];
    return (
      <div style={{ ...base, background: c.color, padding: 20, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: c.altColor, opacity: 0.85 }}>
          {c.client}
        </div>
        <div>
          <div style={{ fontWeight: 900, fontSize: 'clamp(48px, 12vw, 140px)', lineHeight: 0.85, letterSpacing: '-0.05em', color: c.altColor, fontFamily: 'inherit' }}>
            {metric?.value || '—'}
          </div>
          <div style={{ fontSize: 12, fontWeight: 500, letterSpacing: '0.05em', color: c.altColor, opacity: 0.85, marginTop: 6 }}>
            {metric?.label || ''}
          </div>
        </div>
      </div>
    );
  }

  // default 'block'
  return (
    <div style={{ ...base, background: c.color, display: 'flex', alignItems: 'flex-end', padding: 16 }}>
      <div style={{ color: c.altColor }}>
        <div style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.8, fontWeight: 500 }}>{c.sectorTag}</div>
        <div style={{ fontWeight: 800, fontSize: 'clamp(20px, 4vw, 40px)', lineHeight: 0.95, letterSpacing: '-0.02em' }}>
          {c.client}
        </div>
      </div>
    </div>
  );
};

function shade(hex, pct) {
  const h = hex.replace('#', '');
  const n = parseInt(h, 16);
  let r = (n >> 16) & 0xff, g = (n >> 8) & 0xff, b = n & 0xff;
  const f = pct / 100;
  r = Math.round(r + (f < 0 ? r * f : (255 - r) * f));
  g = Math.round(g + (f < 0 ? g * f : (255 - g) * f));
  b = Math.round(b + (f < 0 ? b * f : (255 - b) * f));
  return '#' + [r, g, b].map(x => Math.max(0, Math.min(255, x)).toString(16).padStart(2, '0')).join('');
}
window.shadeColor = shade;