/* ═══════════════════════════════════════════════════════════════════
   COIN HEADER · identity + live price + 24h stats + correlation strip
   ═══════════════════════════════════════════════════════════════════ */

function CoinHeader({ coin, live }) {
  const chgUp = live.chg >= 0;
  return (
    <header style={{
      display: 'grid',
      gridTemplateColumns: 'auto 1fr auto',
      gap: 24, alignItems: 'center',
      padding: '14px 22px',
      borderBottom: `1px solid ${ST.border}`,
      background: ST.bg2,
      minHeight: 76,
    }}>
      {/* identity */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <CoinGlyph sym={coin.sym} size={42} />
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontSize: 18, fontWeight: 600, color: ST.ink, letterSpacing: '-0.01em' }}>
              {coin.name}
            </span>
            <span className="mono" style={{ fontSize: 12, color: ST.ink3 }}>
              {coin.sym}/USDT
            </span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 4 }}>
            <span className="mono" style={{
              fontSize: 10, color: ST.ink3, letterSpacing: '0.08em',
              padding: '2px 6px', background: ST.panel, borderRadius: 3,
              border: `1px solid ${ST.border}`,
            }}>RANK #{coin.rank}</span>
            <GroupPill group={coin.group} />
            <span className="mono" style={{ fontSize: 10, color: ST.ink3 }}>
              MCAP <span style={{ color: ST.ink2 }}>$42.18B</span>
            </span>
          </div>
        </div>
      </div>

      {/* price block */}
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 22 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
            <span className="num" id="hdr-price" style={{
              fontSize: 36, fontWeight: 500, color: ST.ink,
              letterSpacing: '-0.02em', lineHeight: 1,
            }}>${ST_fmt.price(live.price)}</span>
            <ChangeBlock chg={live.chg} chgAbs={live.chgAbs} />
          </div>
          <div style={{ display: 'flex', gap: 18, marginTop: 8, alignItems: 'baseline' }}>
            <KvInline k="24H HIGH"  v={`$${ST_fmt.price(live.high)}`} />
            <KvInline k="24H LOW"   v={`$${ST_fmt.price(live.low)}`} />
            <KvInline k="VOL 24H"   v={`$${live.vol.toFixed(2)}B`} />
            <KvInline k="LAST"      v={live.lastTs} />
          </div>
        </div>
      </div>

      {/* correlation strip */}
      <div style={{ display: 'flex', alignItems: 'stretch', gap: 18 }}>
        <CorrBlock dir="moves with" arrow="◀" coins={[
          { sym: 'BTC', score: 0.84 },
          { sym: 'ETH', score: 0.71 },
        ]} c={ST.blue} />
        <div style={{ width: 1, background: ST.border }} />
        <CorrBlock dir="leads" arrow="▶" coins={[
          { sym: 'SUI',  score: 0.78 },
          { sym: 'NEAR', score: 0.69 },
          { sym: 'APT',  score: 0.62 },
        ]} c={ST.violet} />
      </div>
    </header>
  );
}

function ChangeBlock({ chg, chgAbs }) {
  const up = chg >= 0;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 6,
      padding: '4px 8px', borderRadius: 4,
      background: up ? ST.greenFog : ST.redFog,
      border: `1px solid ${up ? ST.green + '40' : ST.red + '40'}`,
    }}>
      <svg width="10" height="10" viewBox="0 0 10 10">
        <path d={up ? 'M 5 2 L 9 7 L 1 7 Z' : 'M 5 8 L 1 3 L 9 3 Z'}
          fill={up ? ST.green : ST.red} />
      </svg>
      <span className="num" style={{ fontSize: 14, color: up ? ST.green : ST.red, fontWeight: 500 }}>
        {chgAbs >= 0 ? '+' : ''}{ST_fmt.price(chgAbs)}
      </span>
      <span className="num" style={{ fontSize: 14, color: up ? ST.green : ST.red, fontWeight: 600 }}>
        ({ST_fmt.pct(chg, 2)})
      </span>
    </div>
  );
}

function KvInline({ k, v }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
      <span className="eyebrow" style={{ fontSize: 9 }}>{k}</span>
      <span className="num" style={{ fontSize: 12, color: ST.ink2, fontWeight: 500 }}>{v}</span>
    </div>
  );
}

function GroupPill({ group }) {
  const g = ST_GROUP[group];
  return (
    <span className="mono" style={{
      fontSize: 9, letterSpacing: '0.1em',
      color: g.c, background: `${g.c}14`,
      padding: '2px 6px', borderRadius: 3,
      border: `1px solid ${g.c}40`,
      fontWeight: 600,
    }}>{group.toUpperCase()}</span>
  );
}

function CorrBlock({ dir, arrow, coins, c }) {
  return (
    <div>
      <div className="eyebrow" style={{ fontSize: 9, color: c, opacity: 0.8 }}>
        {arrow} {dir}
      </div>
      <div style={{ display: 'flex', gap: 5, marginTop: 6 }}>
        {coins.map(({ sym, score }) => (
          <div key={sym} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
          }}>
            <div style={{
              padding: '3px 7px',
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 11, fontWeight: 600,
              color: c,
              background: `${c}10`,
              border: `1px solid ${c}30`,
              borderRadius: 4,
            }}>{sym}</div>
            <div className="mono" style={{ fontSize: 9, color: ST.ink4 }}>
              ρ {score.toFixed(2)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── Coin glyph (real-looking, per-coin gradient + monogram) ───────── */
function CoinGlyph({ sym, size = 32 }) {
  // per-coin palette
  const PAL = {
    SOL:  ['#9945FF', '#14F195'],
    BTC:  ['#F7931A', '#FFB13B'],
    ETH:  ['#627EEA', '#3C5BCB'],
    BNB:  ['#F0B90B', '#F8D33A'],
    XRP:  ['#23292F', '#5A6066'],
    DOGE: ['#C2A633', '#E1C757'],
    AVAX: ['#E84142', '#F8696A'],
    SUI:  ['#4DA2FF', '#80C0FF'],
    NEAR: ['#000000', '#5F8AFA'],
    APT:  ['#0EA5E9', '#1E2A3A'],
  };
  const [a, b] = PAL[sym] || ['#5A6276', '#3D4458'];
  const gid = `cg-${sym}`;
  return (
    <div style={{ position: 'relative', width: size, height: size, flexShrink: 0 }}>
      <svg width={size} height={size} viewBox="0 0 32 32">
        <defs>
          <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%"   stopColor={a} />
            <stop offset="100%" stopColor={b} />
          </linearGradient>
        </defs>
        <circle cx="16" cy="16" r="15" fill={`url(#${gid})`} />
        <circle cx="16" cy="16" r="15" stroke="rgba(255,255,255,0.08)" strokeWidth="1" fill="none" />
        {sym === 'SOL' ? (
          // Solana mark: three slanted parallelograms (gradient hint)
          <g>
            <path d="M 9.0 10.8 L 23.0 10.8 L 20.6 13.4 L 6.6 13.4 Z"  fill="#ffffff" />
            <path d="M 6.6 14.8 L 20.6 14.8 L 23.0 17.4 L 9.0 17.4 Z"  fill="#ffffff" />
            <path d="M 9.0 18.8 L 23.0 18.8 L 20.6 21.4 L 6.6 21.4 Z"  fill="#ffffff" />
          </g>
        ) : (
          <text x="16" y="20.5" textAnchor="middle"
            fontFamily="JetBrains Mono" fontSize="12" fontWeight="700"
            fill="#ffffff">{sym[0]}</text>
        )}
      </svg>
    </div>
  );
}

window.CoinHeader = CoinHeader;
window.CoinGlyph = CoinGlyph;
window.GroupPill = GroupPill;