// art.jsx — logo mark, line icons, set glyphs, and the booster PackArt

// ── Rook mark: a simple crenellated tower (chess rook / fortress) ──
function RookMark({ size = 28, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <path d="M7 7h3v3h3V7h3v3h3V7h3v7l-2 2v8l2 2v1H7v-1l2-2v-8L7 14V7z"
            fill={color} stroke={color} strokeWidth="1.4" strokeLinejoin="round"/>
      <rect x="13.4" y="18" width="5.2" height="6" rx="1" fill="var(--paper)" opacity="0.85"/>
    </svg>
  );
}

// ── Line icon set ──
const ICONS = {
  shop:   'M3 9.5 12 3l9 6.5M5 9v11h14V9',
  grid:   'M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z',
  cart:   'M3 4h2l2.2 11.2a1.5 1.5 0 0 0 1.5 1.2h8.1a1.5 1.5 0 0 0 1.5-1.2L21 7H6M9 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM18 21a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  user:   'M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM5 20a7 7 0 0 1 14 0',
  plus:   'M12 5v14M5 12h14',
  minus:  'M5 12h14',
  chevR:  'M9 5l7 7-7 7',
  chevL:  'M15 5l-7 7 7 7',
  chevDown:'M5 9l7 7 7-7',
  check:  'M4 12.5l5 5L20 6',
  truck:  'M3 6h11v9H3zM14 9h4l3 3v3h-7M7 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM18 19a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z',
  cal:    'M4 6h16v15H4zM4 10h16M8 3v4M16 3v4',
  pin:    'M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11zM12 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
  shield: 'M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z',
  spark:  'M12 3l1.8 5.6L19 10l-5.2 1.4L12 17l-1.8-5.6L5 10l5.2-1.4L12 3z',
  heart:  'M12 20s-7-4.6-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.4-7 10-7 10z',
  clock:  'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
  bell:   'M6 10a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6M10 20a2 2 0 0 0 4 0',
  tag:    'M3 12V4h8l9 9-8 8-9-9zM7.5 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
  flame:  'M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c0-1 .8-1.5.8-1.5C16 12 17 14 17 16a5 5 0 0 1-10 0c0-4 5-5 5-13z',
  arrowR: 'M5 12h14M13 6l6 6-6 6',
  share:  'M12 14V4M8 8l4-4 4 4M5 12v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7',
  info:   'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 8h.01M11 12h1v5',
  receipt:'M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2zM8 8h8M8 12h8M8 16h5',
  star:   'M12 3l2.6 6.3 6.8.5-5.2 4.4 1.6 6.6L12 17.8 6.2 21.3l1.6-6.6L2.6 9.8l6.8-.5z',
  cards:  'M3.5 8.5h10v11h-10zM7.5 8.5v-4h10v11h-3.5',
  users:  'M9 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM3 20a6 6 0 0 1 12 0M16 5.2a3 3 0 0 1 0 5.8M15.6 14a6 6 0 0 1 5.4 6',
  swap:   'M4 9h13l-4-4M20 15H7l4 4',
  trophy: 'M7 4h10v4a5 5 0 0 1-10 0zM7 6.5H4.5v1.5a3 3 0 0 0 3 3M17 6.5h2.5v1.5a3 3 0 0 1-3 3M9 19.5h6M10 15v4.5M14 15v4.5',
  nav:    'M3 11l18-8-8 18-2-8-8-2z',
  gift:   'M4 11h16v9H4zM4 7h16v4H4zM12 7v13M12 7C12 4 10 3 8.5 3.5S7 7 12 7zM12 7c0-3 2-4 3.5-3.5S17 7 12 7z',
  fire:   'M12 3c1 3-2 4-2 7a2 2 0 0 0 4 0c0-1 .8-1.5.8-1.5C16 12 17 14 17 16a5 5 0 0 1-10 0c0-4 5-5 5-13z',
  layers: 'M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 17l9 5 9-5',
  wave:   'M3 8.5c2.2-2.4 4.8-2.4 7 0s4.8 2.4 7 0M3 14.5c2.2-2.4 4.8-2.4 7 0s4.8 2.4 7 0',
  leaf:   'M20 4C9 4 4 11 4 20c9 0 16-5 16-16zM4 20C9 14 13 10 18 7.5',
  bolt:   'M13 2L4 14h6l-1 8 9-12h-6l1-8z',
  snow:   'M12 3v18M4.2 7.5l15.6 9M19.8 7.5l-15.6 9',
  // viewfinder — four corner brackets over a scan line
  scan:   'M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3M4 12h16',
  // globe — the language control
  globe:  'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3c2.5 2.4 3.8 5.4 3.8 9S14.5 18.6 12 21c-2.5-2.4-3.8-5.4-3.8-9S9.5 5.4 12 3z',
};
function Icon({ name, size = 22, color = 'currentColor', sw = 2, fill = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill ? color : 'none'}
         stroke={fill ? 'none' : color} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d={ICONS[name]} />
    </svg>
  );
}

// small set glyph (uses Icon names mapped per set)
const SET_GLYPH = { flame:'flame', wave:'wave', leaf:'leaf', bolt:'bolt', snow:'snow', star:'star' };

// ── Booster PackArt: stylized original foil pouch ──
function PackArt({ set, w = 132, h = 178, sheen = true, style = {} }) {
  const crimp = 7;
  return (
    <div style={{
      width: w, height: h, position: 'relative', flexShrink: 0,
      borderRadius: 14, ...style,
    }}>
      {/* crimped top strip */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: crimp + 6,
        borderTopLeftRadius: 14, borderTopRightRadius: 14, overflow: 'hidden', zIndex: 3,
        background: `repeating-linear-gradient(90deg, ${set.c2} 0 5px, ${set.c1} 5px 10px)`,
        opacity: 0.9,
      }} />
      {/* body */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: 14, overflow: 'hidden',
        background: `linear-gradient(150deg, ${set.c1} 0%, ${set.c2} 92%)`,
        boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.12), inset 0 -30px 50px rgba(0,0,0,0.28)',
      }}>
        {/* radial glow */}
        <div style={{ position: 'absolute', top: '32%', left: '50%', width: '150%', height: '60%',
          transform: 'translate(-50%,-50%)',
          background: `radial-gradient(closest-side, ${set.accent}55, transparent 70%)` }} />
        {/* big watermark glyph */}
        <div style={{ position: 'absolute', right: -14, bottom: 2, opacity: 0.16, color: '#fff' }}>
          <Icon name={SET_GLYPH[set.icon] || 'spark'} size={120} fill color="#fff" />
        </div>
        {/* foil sheen */}
        {sheen && (
          <div style={{ position: 'absolute', top: 0, bottom: 0, width: '40%', left: 0,
            background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent)',
            animation: 'sheen 4.5s ease-in-out infinite', mixBlendMode: 'overlay' }} />
        )}
        {/* header band */}
        {w >= 88 && (
          <div style={{ position: 'absolute', top: crimp + 12, left: 12, right: 12, display: 'flex', alignItems: 'center', gap: 6, color: '#fff' }}>
            <RookMark size={15} color="#fff" />
            <span style={{ fontFamily: "var(--ff-mono)", fontSize: 8.5, fontWeight: 700, letterSpacing: '0.12em', opacity: 0.85 }}>ROOK'S</span>
          </div>
        )}
        {/* set name */}
        <div style={{ position: 'absolute', left: w < 88 ? 8 : 12, right: w < 88 ? 8 : 12, bottom: w < 88 ? 8 : 12, color: '#fff' }}>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: w < 70 ? 11 : w < 110 ? 15 : 18, lineHeight: 0.96, textShadow: '0 1px 8px rgba(0,0,0,0.35)' }}>{set.name}</div>
          {w >= 88 && <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 8.5, marginTop: 4, opacity: 0.8, letterSpacing: '0.08em' }}>10 CARDS · {set.era.toUpperCase()}</div>}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RookMark, Icon, PackArt });

// ── Rarity stars ──
function RarityStars({ rarity, size = 9, color }) {
  const n = RARITY[rarity].stars;
  const c = color || RARITY[rarity].color;
  return (
    <span style={{ display: 'inline-flex', gap: 1.5 }}>
      {Array.from({ length: 5 }).map((_, i) => (
        <Icon key={i} name="star" size={size} fill={i < n} color={i < n ? c : 'rgba(255,255,255,0.3)'} sw={1.6} />
      ))}
    </span>
  );
}

// ── CardFace: a single original trading card with rarity-driven foil ──
function CardFace({ card, w = 150, foil, faceUp = true, style = {}, className = '' }) {
  const s = w / 150;            // scale factor off the 150px reference width
  const h = Math.round(w * 1.4);
  const set = card.set || (typeof setById === 'function' ? setById(card.setId) : null);
  const r = RARITY[card.rarity];
  const isFoil = foil != null ? foil : (card.rarity === 'holo' || card.rarity === 'chase');
  const isChase = card.rarity === 'chase';
  const px = (n) => Math.round(n * s);

  return (
    <div className={className} style={{
      width: w, height: h, position: 'relative', flexShrink: 0,
      borderRadius: px(11), ...style,
    }}>
      {/* outer rarity frame + glow */}
      <div style={{
        position: 'absolute', inset: 0, borderRadius: px(11),
        background: `linear-gradient(145deg, ${r.tint}, ${r.color})`,
        boxShadow: isFoil
          ? `0 0 ${px(20)}px ${r.color}66, 0 ${px(8)}px ${px(18)}px rgba(0,0,0,0.3)`
          : `0 ${px(6)}px ${px(14)}px rgba(0,0,0,0.22)`,
        padding: px(3),
      }}>
        {/* card body */}
        <div style={{
          position: 'absolute', inset: px(3), borderRadius: px(8), overflow: 'hidden',
          background: `linear-gradient(165deg, ${set.c1} 0%, ${set.c2} 95%)`,
          boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.18)',
        }}>
          {/* radial glow behind portrait */}
          <div style={{ position: 'absolute', top: '34%', left: '50%', width: '160%', height: '60%',
            transform: 'translate(-50%,-50%)',
            background: `radial-gradient(closest-side, ${set.accent}55, transparent 72%)` }} />

          {/* holo foil overlay */}
          {isFoil && (
            <div className="holo-foil" style={{
              position: 'absolute', inset: 0, mixBlendMode: 'color-dodge',
              opacity: isChase ? 0.5 : 0.32,
              background: 'linear-gradient(115deg, #ff5e8a, #ffd866, #61ffce, #61b8ff, #c08aff, #ff5e8a)',
            }} />
          )}

          {/* top: name + HP */}
          <div style={{ position: 'absolute', top: px(8), left: px(9), right: px(9), display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: px(4), color: '#fff' }}>
            <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: px(13.5), lineHeight: 1, letterSpacing: '-0.01em', textShadow: '0 1px 4px rgba(0,0,0,0.5)' }}>{card.name}</div>
            <div style={{ fontFamily: 'var(--ff-mono)', fontWeight: 700, fontSize: px(9.5), whiteSpace: 'nowrap', textShadow: '0 1px 3px rgba(0,0,0,0.5)', flexShrink: 0, marginTop: px(1) }}>{card.hp}<span style={{ fontSize: px(7), opacity: 0.8 }}> HP</span></div>
          </div>

          {/* portrait window — the "creature" emblem */}
          <div style={{
            position: 'absolute', top: px(30), left: px(11), right: px(11), height: px(78),
            borderRadius: px(7), overflow: 'hidden',
            background: `linear-gradient(160deg, ${set.c2}, #00000055)`,
            boxShadow: 'inset 0 0 0 1.5px rgba(255,255,255,0.25)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(closest-side at 50% 40%, ${set.accent}66, transparent 70%)` }} />
            <Icon name={SET_GLYPH[set.icon] || 'spark'} size={px(56)} color="#fff" fill={isChase} sw={2.2} />
            {isChase && <div style={{ position: 'absolute', top: px(6), right: px(7) }}><Icon name="spark" size={px(16)} fill color={set.accent} /></div>}
          </div>

          {/* bottom: rarity + set */}
          <div style={{ position: 'absolute', left: px(10), right: px(10), bottom: px(9), color: '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <RarityStars rarity={card.rarity} size={px(9.5)} color={card.rarity === 'common' ? '#fff' : r.tint} />
              <span style={{ display: 'flex', alignItems: 'center', gap: px(3), opacity: 0.9 }}>
                <RookMark size={px(11)} color="#fff" />
                <span style={{ fontFamily: 'var(--ff-mono)', fontSize: px(6.5), fontWeight: 700, letterSpacing: '0.1em' }}>ROOK'S</span>
              </span>
            </div>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: px(7), opacity: 0.7, marginTop: px(3), letterSpacing: '0.06em', textTransform: 'uppercase' }}>{set.name} · #{String(card.idx + 1).padStart(3, '0')}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RarityStars, CardFace });