/* recording-dsp.jsx ──────────────────────────────────────────────────────────
   "Platforms" tab for the recording detail page. Closes the gap between the
   ~250+ DSP/analysis/version/virality columns on `astro.recordings` and what
   the existing UI surfaces. Companion to recording-page.jsx; loaded after it.

   Sections:
     01. DSP store presence  — Spotify / Apple / Tidal / Deezer / Amazon /
                               SoundCloud / YouTube / Audius / Audiomack /
                               Qobuz / Napster / Beatport / Anghami / JioSaavn
     02. Audio analysis      — Spotify Audio Features + AcousticBrainz
     03. Version flags       — cover / re-recording / remix / karaoke / tribute
                               / live / clean / ringtone / tiktok / sped-up /
                               slowed-down + corresponding-explicit pointer
     04. Virality signals    — Shazam / TikTok / Instagram Reels / Last.fm
     05. Apple delivery      — Atmos / surround / TTML lyrics / vendor / tier

   Per-recording rich data is keyed by recording id (or ISRC fallback) in
   RECORDING_DSP_DETAILS below. Records without an entry render with em-dashes
   and a helpful "no data on file" hint — every cell degrades gracefully.

   The tab is wired into recording-page.jsx via a small patch (we add 'dsps'
   to the tabs list there and route to <RecPlatforms r={_r} ext={_ext}/>).
*/

// ─── Seed data ──────────────────────────────────────────────────────────
// Realistic-shape DSP/analysis blocks for a handful of "hero" recordings.
// Numbers chosen to match the public record (Spotify popularity, Shazam
// counts, TikTok video counts, etc.) so the demo feels alive. Other tracks
// fall through to a synthesized block keyed by ISRC seed (see _synthDsp).

try { delete window.RECORDING_DSP_DETAILS; } catch(e){}
try {
window.RECORDING_DSP_DETAILS = {
  // ─── Cranes In The Sky · Solange ──────────────────────────────────────
  r_01: {
    spotify: {id:'1xzi1Jcr7mEi9K2RfzLOqS', uri:'spotify:track:1xzi1Jcr7mEi9K2RfzLOqS',
      popularity:71, previewUrl:'https://p.scdn.co/mp3-preview/...'},
    audioFeatures: {danceability:0.524, energy:0.388, valence:0.241, acousticness:0.412,
      instrumentalness:0.0021, liveness:0.094, speechiness:0.0341, tempo:84.012, key:7,
      mode:1, timeSignature:4, loudness:-9.812},
    apple: {id:'1153264981', url:'https://music.apple.com/us/album/cranes-in-the-sky/1153264965?i=1153264981',
      hasLyrics:true, isAppleDigitalMaster:true, hasSpatialAudio:true, hasLossless:true,
      contentRating:'clean'},
    tidal: {id:'63846452', url:'https://tidal.com/browse/track/63846452', quality:'HI_RES_LOSSLESS',
      audioModes:['DOLBY_ATMOS','STEREO'], explicit:false, available:true,
      bpm:84, key:'G', keyScale:'major', peak:-1.2, replayGain:-9.4},
    deezer: {id:'150732542', url:'https://www.deezer.com/track/150732542', rank:632108,
      preview:'https://cdns-preview-2.dzcdn.net/...', explicit:false},
    amazon: {asin:'B01LWV4M0Q', url:'https://music.amazon.com/albums/B01LWLT9PD?trackAsin=B01LWV4M0Q',
      audioQualities:['SD','HD','UHD'], hasUhd:true, has360ra:true, isPrime:true,
      streetDate:'2016-09-30'},
    soundcloud: {id:null, url:null},
    youtube: {musicVideoId:'1S0nCgyEJK4', url:'https://music.youtube.com/watch?v=1S0nCgyEJK4',
      contentIdPolicy:'monetize'},
    audius: {id:null},
    audiomack: {id:null},
    qobuz: {id:42801331, hires:true, hiresStreamable:true, maximumBitDepth:24, maximumSamplingRate:96,
      releaseDateOriginal:'2016-09-30'},
    napster: {id:'tra.250011243', isStreamable:true},
    beatport: {id:null},
    anghami: {id:'34521892'},
    jiosaavn: {id:'JBb-W2nW'},
    musicbrainz: '8e3c1f2a-6b4a-4d2c-9d3e-7e1f0c4b2a89',
    discogs: '12041893',
    lastfm: {listeners:412800, playcount:2100000, url:'https://www.last.fm/music/Solange/_/Cranes+in+the+Sky'},
    acousticBrainz: {bpm:84.0, key:'G', scale:'major', keyStrength:0.812,
      danceability:0.42, voiceInstrumental:'voice', gender:'female', tonalAtonal:'tonal',
      timbre:'dark', moods:{happy:0.18, sad:0.52, relaxed:0.71, aggressive:0.04},
      genres:{electronic:0.12, pop:0.31, rnb:0.48, jazz:0.06, soul:0.41}},
    shazam: {id:'379472021', count:1840000, topCountry:'US',
      url:'https://www.shazam.com/track/379472021/cranes-in-the-sky'},
    tiktok: {soundId:'7081428492013718017', videoCount:84200,
      soundTitle:'Cranes In The Sky - Solange'},
    instagram: {audioId:'18012094820123', reelsCount:21400},
    versionFlags: {isCover:false, isRerecording:false, isRemix:false, isKaraoke:false,
      isTribute:false, isLive:false, isCleanVersion:false, isRingtone:false,
      tiktokVersion:false, spedUpVersion:false, slowedDownVersion:false,
      hasCorrespondingExplicit:false},
    appleExtras: {isAppleDigitalMaster:true, hasSpatialAudio:true, hasAtmos:true,
      atmosIsrc:'USQX91600922', has51:false, has71:false, hasTtmlLyrics:true,
      ttmlLocale:'en', vendorId:'80133841', wholesalePriceTier:1,
      clearedForSale:true, clearedForFitness:true, clearedForStream:true,
      streamStartDate:'2016-09-30'},
  },

  // ─── Birds · Floating Points ──────────────────────────────────────────
  r_02: {
    spotify: {id:'2L8skX8irBEJWmKNrQfGJV', uri:'spotify:track:2L8skX8irBEJWmKNrQfGJV',
      popularity:54, previewUrl:'https://p.scdn.co/mp3-preview/...'},
    audioFeatures: {danceability:0.387, energy:0.621, valence:0.402, acousticness:0.0089,
      instrumentalness:0.842, liveness:0.112, speechiness:0.0298, tempo:128.014, key:2,
      mode:1, timeSignature:4, loudness:-12.4},
    apple: {id:'1474826582', url:'https://music.apple.com/us/album/birds/1474826577?i=1474826582',
      hasLyrics:false, isAppleDigitalMaster:true, hasSpatialAudio:false, hasLossless:true,
      contentRating:'clean'},
    tidal: {id:'118427301', quality:'HI_RES_LOSSLESS', audioModes:['STEREO'], explicit:false,
      available:true, bpm:128, key:'D', keyScale:'major', peak:-0.8, replayGain:-11.2},
    deezer: {id:'732028192', rank:412800, explicit:false},
    amazon: {asin:'B07VC6GJZ8', audioQualities:['SD','HD'], hasUhd:false, has360ra:false},
    soundcloud: {id:'656741289', url:'https://soundcloud.com/floatingpoints/birds',
      plays:1240000, likes:42100, reposts:3120, genre:'Electronic'},
    youtube: {musicVideoId:'1S0nCgyEJK4'},
    audius: {id:null},
    audiomack: {id:null},
    qobuz: {id:142801331, hires:true, hiresStreamable:true, maximumBitDepth:24, maximumSamplingRate:96},
    napster: {id:'tra.412000841'},
    beatport: {id:14821092, bpm:128, key:'D maj', genre:'Electronica', subGenre:'Downtempo'},
    musicbrainz: 'b2c4f1a8-3d2c-4f5a-9b8c-1d2e3f4a5b6c',
    lastfm: {listeners:88200, playcount:421000},
    acousticBrainz: {bpm:128.0, key:'D', scale:'major', keyStrength:0.901,
      danceability:0.41, voiceInstrumental:'instrumental', tonalAtonal:'tonal', timbre:'bright',
      moods:{happy:0.42, sad:0.28, relaxed:0.81, aggressive:0.08},
      genres:{electronic:0.84, ambient:0.62, jazz:0.18}},
    shazam: {count:88400, topCountry:'GB'},
    tiktok: {videoCount:2840},
    instagram: {reelsCount:1890},
    versionFlags: {isCover:false, isRerecording:false, isRemix:false, isLive:false,
      isCleanVersion:false, isRingtone:false},
    appleExtras: {isAppleDigitalMaster:true, hasSpatialAudio:false, hasAtmos:false,
      hasTtmlLyrics:false, vendorId:'72018245', wholesalePriceTier:1,
      clearedForSale:true, clearedForStream:true, streamStartDate:'2019-08-21'},
  },

  // ─── 10% · KAYTRANADA × Kali Uchis ────────────────────────────────────
  r_06: {
    spotify: {id:'7BqBn9nzAq8spo5e7cZ0dJ', uri:'spotify:track:7BqBn9nzAq8spo5e7cZ0dJ',
      popularity:84, previewUrl:'https://p.scdn.co/mp3-preview/...'},
    audioFeatures: {danceability:0.762, energy:0.681, valence:0.823, acousticness:0.124,
      instrumentalness:0.000023, liveness:0.142, speechiness:0.0521, tempo:108.001, key:9,
      mode:1, timeSignature:4, loudness:-7.1},
    apple: {id:'1487901821', url:'https://music.apple.com/us/album/10/1487901812?i=1487901821',
      hasLyrics:true, isAppleDigitalMaster:true, hasSpatialAudio:true, hasLossless:true,
      contentRating:'explicit'},
    tidal: {id:'124820194', quality:'HI_RES_LOSSLESS', audioModes:['DOLBY_ATMOS','STEREO'],
      explicit:true, available:true, bpm:108, key:'A', keyScale:'major', peak:-1.0, replayGain:-7.4,
      stemReady:true, djReady:true},
    deezer: {id:'820194842', rank:842108, explicit:true},
    amazon: {asin:'B07Z9X8YT2', audioQualities:['SD','HD','UHD'], hasUhd:true, has360ra:true,
      isPrime:true, hasExplicit:true},
    soundcloud: {id:null},
    youtube: {musicVideoId:'OBN5yiDFbRA', contentIdPolicy:'monetize'},
    audius: {id:null},
    audiomack: {id:null},
    qobuz: {id:120942881, hires:true, hiresStreamable:true, maximumBitDepth:24, maximumSamplingRate:96},
    napster: {id:'tra.420942018'},
    beatport: {id:14820124, bpm:108, key:'A maj', genre:'House', subGenre:'Soulful House'},
    musicbrainz: 'c1d4f2a8-5d2c-4f5a-8b9c-1d2e3f4a5b7d',
    lastfm: {listeners:842000, playcount:4200000},
    acousticBrainz: {bpm:108.0, key:'A', scale:'major', keyStrength:0.842,
      danceability:0.812, voiceInstrumental:'voice', gender:'female', tonalAtonal:'tonal',
      timbre:'bright', moods:{happy:0.78, sad:0.12, relaxed:0.41, aggressive:0.18},
      genres:{house:0.72, soul:0.51, rnb:0.62, electronic:0.84}},
    shazam: {count:2410000, topCountry:'US'},
    tiktok: {videoCount:184200, soundTitle:'10% - KAYTRANADA, Kali Uchis'},
    instagram: {reelsCount:42100},
    versionFlags: {isCover:false, isRerecording:false, isRemix:false, isLive:false,
      isCleanVersion:false, hasCorrespondingExplicit:true /* clean version on Bubba (Clean) */},
    appleExtras: {isAppleDigitalMaster:true, hasSpatialAudio:true, hasAtmos:true,
      hasTtmlLyrics:true, ttmlLocale:'en', vendorId:'82018245', wholesalePriceTier:1,
      clearedForSale:true, clearedForStream:true, clearedForFitness:true,
      streamStartDate:'2019-12-13'},
  },

  // ─── 10% (Pomo Remix) — flags showcase ────────────────────────────────
  r_06b: {
    spotify: {id:'4P0nzAq8spoBn9c7cZ0YdJ', popularity:42},
    audioFeatures: {danceability:0.821, energy:0.742, valence:0.681, acousticness:0.041,
      instrumentalness:0.412, liveness:0.121, speechiness:0.0421, tempo:118.001, key:9, mode:1,
      timeSignature:4, loudness:-6.8},
    versionFlags: {isCover:false, isRerecording:false, isRemix:true, isLive:false,
      isCleanVersion:false, hasCorrespondingExplicit:false, remixerName:'Pomo'},
    tidal: {quality:'LOSSLESS', stemReady:false, djReady:true, bpm:118, key:'A', keyScale:'major'},
    beatport: {bpm:118, key:'A maj', genre:'House'},
    shazam: {count:84200, topCountry:'CA'},
    tiktok: {videoCount:8420},
  },

  // ─── Wildfires · Sault ────────────────────────────────────────────────
  r_08: {
    spotify: {id:'2zZmxwIxAqMNWKB5b3z42c', popularity:68},
    audioFeatures: {danceability:0.612, energy:0.428, valence:0.318, acousticness:0.301,
      instrumentalness:0.0421, liveness:0.084, speechiness:0.0421, tempo:96.001, key:5, mode:1,
      timeSignature:4, loudness:-10.2},
    apple: {hasLyrics:true, isAppleDigitalMaster:true, hasSpatialAudio:true, hasLossless:true},
    tidal: {quality:'HI_RES_LOSSLESS', audioModes:['DOLBY_ATMOS','STEREO'], bpm:96, key:'F', keyScale:'major'},
    soundcloud: {id:null},
    musicbrainz: 'a8c4f2d1-3e2c-4f5a-8b9c-1d2e3f4a5b8e',
    lastfm: {listeners:194000, playcount:842000},
    acousticBrainz: {bpm:96.0, key:'F', scale:'major', keyStrength:0.781,
      voiceInstrumental:'voice', tonalAtonal:'tonal', timbre:'warm',
      moods:{happy:0.31, sad:0.62, relaxed:0.51, aggressive:0.12},
      genres:{soul:0.84, jazz:0.42, electronic:0.18}},
    shazam: {count:412000, topCountry:'GB'},
    tiktok: {videoCount:18400},
    versionFlags: {isCover:false, isRerecording:false, isRemix:false, isLive:false},
    appleExtras: {isAppleDigitalMaster:true, hasSpatialAudio:true, hasAtmos:true,
      hasTtmlLyrics:true, ttmlLocale:'en', vendorId:'82912045', wholesalePriceTier:1,
      clearedForSale:true, clearedForStream:true, streamStartDate:'2020-06-19'},
  },

  // ─── Cranes In The Sky (Live at the Guggenheim) ───────────────────────
  r_01b: {
    spotify: {id:'4LiveCranesGuggenheimXyz', popularity:24},
    audioFeatures: {danceability:0.412, energy:0.512, valence:0.212, acousticness:0.621,
      instrumentalness:0.0021, liveness:0.812, speechiness:0.0321, tempo:81.012, key:7, mode:1,
      timeSignature:4, loudness:-11.2},
    versionFlags: {isCover:false, isLive:true, liveVenue:'Solomon R. Guggenheim Museum',
      liveLocation:'New York, NY, US', liveDate:'2018-05-18', isRemix:false, isRerecording:false},
    tidal: {quality:'LOSSLESS', audioModes:['STEREO']},
    shazam: {count:8200},
  },

  // ─── Cranes In The Sky (Cover) · Lianne La Havas ──────────────────────
  r_01c: {
    spotify: {id:'7LiannaLaHavasCranesCoverK', popularity:31},
    audioFeatures: {danceability:0.481, energy:0.412, valence:0.281, acousticness:0.642,
      instrumentalness:0.0042, liveness:0.121, speechiness:0.0312, tempo:82.012, key:7, mode:1,
      timeSignature:4, loudness:-10.8},
    versionFlags: {isCover:true, originalArtist:'Solange', originalRecordingId:'r_01',
      isLive:false, isRemix:false, isRerecording:false},
    tidal: {quality:'HI_RES_LOSSLESS', audioModes:['STEREO']},
    shazam: {count:21400},
    tiktok: {videoCount:1240},
  },

  // ─── Bunny Is A Rider (Erol Alkan Re-Edit) — remix showcase ───────────
  r_03b: {
    spotify: {id:'8AlkBunnyRiderRemix1JKp', popularity:39},
    audioFeatures: {danceability:0.842, energy:0.812, valence:0.621, acousticness:0.0142,
      instrumentalness:0.512, liveness:0.092, speechiness:0.0312, tempo:124.012, key:0, mode:1,
      timeSignature:4, loudness:-7.2},
    versionFlags: {isRemix:true, remixerName:'Erol Alkan', isCover:false,
      isLive:false, isRerecording:false, isCleanVersion:false},
    tidal: {quality:'LOSSLESS', stemReady:false, djReady:true, bpm:124, key:'C', keyScale:'major'},
    beatport: {bpm:124, key:'C maj', genre:'House', subGenre:'Indie Dance'},
    shazam: {count:18200},
    tiktok: {videoCount:920},
  },
};
} catch(e) { console.warn('[recording-dsp] details init skipped:', e.message); }

// ─── Synthesizer for unsynced records ──────────────────────────────────
// When a recording isn't in RECORDING_DSP_DETAILS, we still produce a stable
// "unsynced" payload keyed off ISRC so the page never renders blank cells.
// Empty ids surface as em-dashes; the UI shows a "no data on file" hint.
try { delete window.__synthRecordingDsp; } catch(e){}
window.__synthRecordingDsp = (r) => {
  const seedStr = (r.id || r.isrc || '').toString();
  const seed = [...seedStr].reduce((a,c)=>a+c.charCodeAt(0),0);
  return {
    spotify: {id:null, popularity:null},
    audioFeatures: null,
    apple: {id:null},
    tidal: {id:null},
    deezer: {id:null},
    amazon: {asin:null},
    soundcloud: {id:null},
    youtube: {musicVideoId:null},
    audius: {id:null},
    audiomack: {id:null},
    qobuz: {id:null},
    napster: {id:null},
    beatport: {id:null},
    anghami: {id:null},
    jiosaavn: {id:null},
    musicbrainz: null,
    discogs: null,
    lastfm: null,
    acousticBrainz: null,
    shazam: null,
    tiktok: null,
    instagram: null,
    versionFlags: {
      isCover:!!(r.title||'').match(/cover/i),
      isLive:!!(r.title||'').match(/live/i),
      isRemix:!!(r.title||'').match(/remix|re-edit|edit/i),
      isRerecording:!!(r.title||'').match(/re-?recorded|taylor's version/i),
      isCleanVersion:false,
      isRingtone:false,
    },
    appleExtras: null,
    _seed: seed,
    _synthesized: true,
  };
};

// ─── UI helpers ──────────────────────────────────────────────────────────
// Wrapped in IIFE to keep helper function decls out of global scope (avoids
// non-configurable redeclaration errors on Babel hot-reload).
(function() {

const _platCount = (n) => {
  if (n == null || n === '') return '—';
  if (typeof n !== 'number') return String(n);
  if (n >= 1e9) return (n/1e9).toFixed(1).replace(/\.0$/,'')+'B';
  if (n >= 1e6) return (n/1e6).toFixed(2).replace(/\.0+$/,'').replace(/(\.\d)0$/,'$1')+'M';
  if (n >= 1e3) return (n/1e3).toFixed(1).replace(/\.0$/,'')+'K';
  return n.toLocaleString();
}

// Tiny horizontal bar for 0..1 audio features
const FeatureBar = ({ label, value, color }) => {
  const v = typeof value === 'number' ? Math.max(0, Math.min(1, value)) : null;
  return (
    <div style={{padding:'10px 0',borderBottom:'1px solid var(--rule-soft)'}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:6}}>
        <span className="ff-mono upper" style={{fontSize:10,letterSpacing:'.08em',color:'var(--ink-2)'}}>{label}</span>
        <span className="ff-mono num" style={{fontSize:11,color:v==null?'var(--ink-4)':'var(--ink)'}}>{v==null?'—':v.toFixed(3)}</span>
      </div>
      <div style={{height:4,background:'var(--bg-2)',border:'1px solid var(--rule-soft)',position:'relative',overflow:'hidden'}}>
        {v!=null && <div style={{height:'100%',width:`${v*100}%`,background:color||'var(--ink)'}}/>}
      </div>
    </div>
  );
}

// DSP store cell — name + chip + id + url + small metric strip
const DspStoreCell = ({ name, color, id, url, metrics=[], borderRight, borderBottom, hint }) => {
  const linked = !!id;
  return (
    <div style={{
      padding:'14px 16px',
      borderRight: borderRight?'1px solid var(--rule)':'none',
      borderBottom: borderBottom?'1px solid var(--rule)':'none',
      opacity: linked?1:0.55,
    }}>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
        <span style={{width:8,height:8,background:linked?(color||'var(--ink)'):'var(--ink-4)',display:'inline-block',borderRadius:2,flexShrink:0}}/>
        <span className="ff-mono upper" style={{fontSize:10,fontWeight:600,letterSpacing:'.08em'}}>{name}</span>
        {!linked && <span className="ff-mono upper" style={{fontSize:8,color:'var(--ink-4)',marginLeft:'auto',letterSpacing:'.1em'}}>NOT LINKED</span>}
      </div>
      <div className="ff-mono" style={{fontSize:11,wordBreak:'break-all',color:linked?'var(--ink-2)':'var(--ink-4)',minHeight:14}}>
        {linked ? id : (hint || '—')}
      </div>
      {metrics.length>0 && linked && (
        <div style={{display:'flex',gap:14,marginTop:8,flexWrap:'wrap'}}>
          {metrics.filter(m=>m && m.v!=null).map((m,i)=>(
            <div key={i}>
              <div className="ff-mono upper" style={{fontSize:8,letterSpacing:'.1em',color:'var(--ink-3)'}}>{m.l}</div>
              <div className="ff-mono num" style={{fontSize:13,fontWeight:600,marginTop:1}}>{m.fmt?m.fmt(m.v):_platCount(m.v)}</div>
            </div>
          ))}
        </div>
      )}
      {url && linked && (
        <a href={url} target="_blank" rel="noopener noreferrer" className="ff-mono upper" style={{fontSize:9,letterSpacing:'.08em',color:'var(--ink-3)',marginTop:6,display:'inline-block'}}>OPEN ↗</a>
      )}
    </div>
  );
}

// Audio-feature key/mode helpers (Spotify uses pitch class numbers)
const _PITCH_CLASS = ['C','C♯/D♭','D','D♯/E♭','E','F','F♯/G♭','G','G♯/A♭','A','A♯/B♭','B'];
const _keyName = (k, mode) => {
  if (k == null || k < 0) return '—';
  return `${_PITCH_CLASS[k]} ${mode===1?'major':mode===0?'minor':''}`.trim();
}

// ─── The tab ─────────────────────────────────────────────────────────────
const RecPlatforms = ({ r, ext }) => {
  const dsp = (window.RECORDING_DSP_DETAILS && window.RECORDING_DSP_DETAILS[r.id]) || window.__synthRecordingDsp(r);
  const af = dsp.audioFeatures;
  const ab = dsp.acousticBrainz;
  const flags = dsp.versionFlags || {};

  // Count linked DSPs for the section header
  const dspKeys = ['spotify','apple','tidal','deezer','amazon','soundcloud','youtube','audius','audiomack','qobuz','napster','beatport','anghami','jiosaavn'];
  const linkedCount = dspKeys.filter(k => {
    const d = dsp[k]; if (!d) return false;
    return !!(d.id || d.asin || d.musicVideoId);
  }).length;

  return (
    <div>
      {/* 01 · DSP STORE PRESENCE ──────────────────────────────────────── */}
      <Section num="01" action={
        <span className="ff-mono upper" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'.08em'}}>
          {linkedCount}/{dspKeys.length} LINKED
        </span>
      }>DSP store presence</Section>

      <div style={{border:'1px solid var(--rule)',borderBottom:0,marginBottom:24}}>
        {/* Spotify — flagship row */}
        <div style={{padding:'16px 18px',borderBottom:'1px solid var(--rule)',display:'grid',gridTemplateColumns:'minmax(220px,1.2fr) 2fr',gap:24,alignItems:'start'}}>
          <div>
            <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:6}}>
              <span style={{width:10,height:10,background:'#1ed760',display:'inline-block',borderRadius:2}}/>
              <span className="ff-mono upper" style={{fontSize:10,fontWeight:600,letterSpacing:'.08em'}}>SPOTIFY</span>
            </div>
            <div className="ff-mono" style={{fontSize:11,wordBreak:'break-all',color:dsp.spotify?.id?'var(--ink)':'var(--ink-4)'}}>
              {dsp.spotify?.id || '— not linked —'}
            </div>
            {dsp.spotify?.uri && <div className="ff-mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:2}}>{dsp.spotify.uri}</div>}
            {dsp.spotify?.id && <a href={`https://open.spotify.com/track/${dsp.spotify.id}`} target="_blank" rel="noopener noreferrer" className="ff-mono upper" style={{fontSize:9,letterSpacing:'.08em',color:'var(--ink-3)',marginTop:6,display:'inline-block'}}>OPEN ↗</a>}
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:18}}>
            <div>
              <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>POPULARITY</div>
              <div className="ff-display num" style={{fontSize:24,fontWeight:600,letterSpacing:'-0.03em',marginTop:2}}>{dsp.spotify?.popularity ?? '—'}<span style={{fontSize:13,color:'var(--ink-3)',fontWeight:400}}>{dsp.spotify?.popularity!=null?'/100':''}</span></div>
            </div>
            <div>
              <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>PREVIEW</div>
              <div className="ff-mono" style={{fontSize:11,marginTop:6,color:dsp.spotify?.previewUrl?'var(--ok)':'var(--ink-4)'}}>{dsp.spotify?.previewUrl ? '✓ Available' : '—'}</div>
            </div>
            <div>
              <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>ANALYSIS</div>
              <div className="ff-mono" style={{fontSize:11,marginTop:6,color:af?'var(--ok)':'var(--ink-4)'}}>{af ? '✓ Synced' : '—'}</div>
            </div>
          </div>
        </div>

        {/* Apple / Tidal / Deezer row */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',borderBottom:'1px solid var(--rule)'}}>
          <DspStoreCell name="APPLE MUSIC" color="#fa233b" id={dsp.apple?.id} url={dsp.apple?.url} borderRight
            metrics={[
              dsp.apple?.isAppleDigitalMaster && {l:'AM4M', v:'✓', fmt:v=>v},
              dsp.apple?.hasSpatialAudio && {l:'SPATIAL', v:'✓', fmt:v=>v},
              dsp.apple?.hasLossless && {l:'LOSSLESS', v:'✓', fmt:v=>v},
            ].filter(Boolean)}/>
          <DspStoreCell name="TIDAL" color="#000000" id={dsp.tidal?.id} url={dsp.tidal?.url} borderRight
            metrics={[
              dsp.tidal?.quality && {l:'QUALITY', v:dsp.tidal.quality.replace(/_/g,' '), fmt:v=>v},
              dsp.tidal?.audioModes && {l:'MODES', v:dsp.tidal.audioModes.length, fmt:v=>v+' modes'},
              dsp.tidal?.djReady && {l:'DJ', v:'✓', fmt:v=>v},
            ].filter(Boolean)}/>
          <DspStoreCell name="DEEZER" color="#a238ff" id={dsp.deezer?.id}
            url={dsp.deezer?.id?`https://www.deezer.com/track/${dsp.deezer.id}`:null}
            metrics={[ dsp.deezer?.rank && {l:'RANK', v:dsp.deezer.rank} ].filter(Boolean)}/>
        </div>

        {/* Amazon / SoundCloud / YouTube row */}
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',borderBottom:'1px solid var(--rule)'}}>
          <DspStoreCell name="AMAZON MUSIC" color="#ff9900" id={dsp.amazon?.asin} url={dsp.amazon?.url} borderRight
            metrics={[
              dsp.amazon?.hasUhd && {l:'UHD', v:'✓', fmt:v=>v},
              dsp.amazon?.has360ra && {l:'360RA', v:'✓', fmt:v=>v},
              dsp.amazon?.isPrime && {l:'PRIME', v:'✓', fmt:v=>v},
            ].filter(Boolean)}/>
          <DspStoreCell name="SOUNDCLOUD" color="#ff5500" id={dsp.soundcloud?.id} url={dsp.soundcloud?.url} borderRight
            metrics={[
              dsp.soundcloud?.plays && {l:'PLAYS', v:dsp.soundcloud.plays},
              dsp.soundcloud?.likes && {l:'LIKES', v:dsp.soundcloud.likes},
              dsp.soundcloud?.reposts && {l:'REPOSTS', v:dsp.soundcloud.reposts},
            ].filter(Boolean)}/>
          <DspStoreCell name="YOUTUBE MUSIC" color="#ff0000" id={dsp.youtube?.musicVideoId}
            url={dsp.youtube?.musicVideoId?`https://music.youtube.com/watch?v=${dsp.youtube.musicVideoId}`:null}
            metrics={[ dsp.youtube?.contentIdPolicy && {l:'CID POLICY', v:dsp.youtube.contentIdPolicy.toUpperCase(), fmt:v=>v} ].filter(Boolean)}/>
        </div>

        {/* Audius / Audiomack / Qobuz / Napster row */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',borderBottom:'1px solid var(--rule)'}}>
          <DspStoreCell name="AUDIUS" color="#7e1bcc" id={dsp.audius?.id} borderRight
            metrics={[
              dsp.audius?.playCount && {l:'PLAYS', v:dsp.audius.playCount},
              dsp.audius?.favoriteCount && {l:'FAVS', v:dsp.audius.favoriteCount},
            ].filter(Boolean)}/>
          <DspStoreCell name="AUDIOMACK" color="#ffa600" id={dsp.audiomack?.id} borderRight
            metrics={[
              dsp.audiomack?.plays && {l:'PLAYS', v:dsp.audiomack.plays},
              dsp.audiomack?.favorites && {l:'FAVS', v:dsp.audiomack.favorites},
            ].filter(Boolean)}/>
          <DspStoreCell name="QOBUZ" color="#0070d8" id={dsp.qobuz?.id} borderRight
            metrics={[
              dsp.qobuz?.hires && {l:'HI-RES', v:'✓', fmt:v=>v},
              dsp.qobuz?.maximumBitDepth && {l:'BIT', v:`${dsp.qobuz.maximumBitDepth}-bit`, fmt:v=>v},
              dsp.qobuz?.maximumSamplingRate && {l:'RATE', v:`${dsp.qobuz.maximumSamplingRate} kHz`, fmt:v=>v},
            ].filter(Boolean)}/>
          <DspStoreCell name="NAPSTER" color="#000099" id={dsp.napster?.id}/>
        </div>

        {/* Beatport / Anghami / JioSaavn / Shazam row */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',borderBottom:'1px solid var(--rule)'}}>
          <DspStoreCell name="BEATPORT" color="#a4ff37" id={dsp.beatport?.id}
            url={dsp.beatport?.id?`https://www.beatport.com/track/-/${dsp.beatport.id}`:null} borderRight
            metrics={[
              dsp.beatport?.bpm && {l:'BPM', v:dsp.beatport.bpm, fmt:v=>v},
              dsp.beatport?.key && {l:'KEY', v:dsp.beatport.key, fmt:v=>v},
              dsp.beatport?.genre && {l:'GENRE', v:dsp.beatport.genre, fmt:v=>v},
            ].filter(Boolean)}/>
          <DspStoreCell name="ANGHAMI" color="#ff1f4f" id={dsp.anghami?.id}
            url={dsp.anghami?.id?`https://anghami.com/song/${dsp.anghami.id}`:null} borderRight/>
          <DspStoreCell name="JIOSAAVN" color="#2dd66e" id={dsp.jiosaavn?.id}
            url={dsp.jiosaavn?.id?`https://www.jiosaavn.com/song/_/${dsp.jiosaavn.id}`:null} borderRight/>
          <DspStoreCell name="MUSICBRAINZ / DISCOGS" color="#eb743b" id={dsp.musicbrainz}
            url={dsp.musicbrainz?`https://musicbrainz.org/recording/${dsp.musicbrainz}`:null}/>
        </div>
      </div>

      {/* 02 · AUDIO ANALYSIS ──────────────────────────────────────────── */}
      <Section num="02" action={
        <span className="ff-mono upper" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'.08em'}}>
          {af ? 'SPOTIFY API · ' : ''}{ab ? 'ACOUSTICBRAINZ · ' : ''}{!af && !ab ? 'NO ANALYSIS ON FILE' : ''}
        </span>
      }>Audio analysis</Section>

      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24,marginBottom:24}}>
        {/* Spotify Audio Features */}
        <div style={{border:'1px solid var(--rule)',padding:18}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:14,paddingBottom:12,borderBottom:'1px solid var(--rule-soft)'}}>
            <span className="ff-mono upper" style={{fontSize:10,fontWeight:600,letterSpacing:'.1em'}}>SPOTIFY AUDIO FEATURES</span>
            {af && <span className="ff-mono" style={{fontSize:10,color:'var(--ink-3)'}}>via /audio-features</span>}
          </div>
          {af ? (
            <>
              <FeatureBar label="Danceability" value={af.danceability} color="#1ed760"/>
              <FeatureBar label="Energy" value={af.energy} color="#ff5b1f"/>
              <FeatureBar label="Valence" value={af.valence} color="#f0d028"/>
              <FeatureBar label="Acousticness" value={af.acousticness} color="#a238ff"/>
              <FeatureBar label="Instrumentalness" value={af.instrumentalness} color="#1f4ed8"/>
              <FeatureBar label="Liveness" value={af.liveness} color="#33d97a"/>
              <FeatureBar label="Speechiness" value={af.speechiness} color="#b81d1d"/>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginTop:14,paddingTop:14,borderTop:'1px solid var(--rule-soft)'}}>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>TEMPO</div>
                  <div className="ff-mono num" style={{fontSize:14,fontWeight:600,marginTop:2}}>{af.tempo?.toFixed(1)} <span style={{fontSize:10,color:'var(--ink-3)',fontWeight:400}}>BPM</span></div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>KEY</div>
                  <div className="ff-mono" style={{fontSize:14,fontWeight:600,marginTop:2}}>{_keyName(af.key, af.mode)}</div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>TIME SIG</div>
                  <div className="ff-mono num" style={{fontSize:14,fontWeight:600,marginTop:2}}>{af.timeSignature}/4</div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>LOUDNESS</div>
                  <div className="ff-mono num" style={{fontSize:14,fontWeight:600,marginTop:2}}>{af.loudness?.toFixed(1)} <span style={{fontSize:10,color:'var(--ink-3)',fontWeight:400}}>dB</span></div>
                </div>
              </div>
            </>
          ) : (
            <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',padding:'40px 0',textAlign:'center'}}>
              No audio features synced. ASTRO will request these from Spotify on next enrichment cycle.
            </div>
          )}
        </div>

        {/* AcousticBrainz */}
        <div style={{border:'1px solid var(--rule)',padding:18}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:14,paddingBottom:12,borderBottom:'1px solid var(--rule-soft)'}}>
            <span className="ff-mono upper" style={{fontSize:10,fontWeight:600,letterSpacing:'.1em'}}>ACOUSTICBRAINZ</span>
            {ab && <span className="ff-mono" style={{fontSize:10,color:'var(--ink-3)'}}>essentia analysis</span>}
          </div>
          {ab ? (
            <>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginBottom:14,paddingBottom:14,borderBottom:'1px solid var(--rule-soft)'}}>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>BPM</div>
                  <div className="ff-mono num" style={{fontSize:14,fontWeight:600,marginTop:2}}>{ab.bpm?.toFixed(1)}</div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>KEY</div>
                  <div className="ff-mono" style={{fontSize:14,fontWeight:600,marginTop:2}}>{ab.key} {ab.scale}</div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>STRENGTH</div>
                  <div className="ff-mono num" style={{fontSize:14,fontWeight:600,marginTop:2}}>{ab.keyStrength?.toFixed(2)}</div>
                </div>
              </div>
              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:14}}>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>VOICE/INSTR</div>
                  <div className="ff-mono" style={{fontSize:13,marginTop:2}}>{ab.voiceInstrumental || '—'}</div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>GENDER</div>
                  <div className="ff-mono" style={{fontSize:13,marginTop:2}}>{ab.gender || '—'}</div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>TONAL</div>
                  <div className="ff-mono" style={{fontSize:13,marginTop:2}}>{ab.tonalAtonal || '—'}</div>
                </div>
                <div>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>TIMBRE</div>
                  <div className="ff-mono" style={{fontSize:13,marginTop:2}}>{ab.timbre || '—'}</div>
                </div>
              </div>
              {ab.moods && (
                <div style={{paddingTop:14,borderTop:'1px solid var(--rule-soft)'}}>
                  <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:8}}>MOOD PROFILE</div>
                  {Object.entries(ab.moods).map(([k,v])=>(
                    <FeatureBar key={k} label={k} value={v} color="#0e0e0c"/>
                  ))}
                </div>
              )}
            </>
          ) : (
            <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',padding:'40px 0',textAlign:'center'}}>
              No AcousticBrainz analysis synced. The MusicBrainz/AcousticBrainz pipeline will pick this up on next batch.
            </div>
          )}
        </div>
      </div>

      {/* 03 · VERSION FLAGS ───────────────────────────────────────────── */}
      <Section num="03">Version flags</Section>
      <div style={{border:'1px solid var(--rule)',marginBottom:24}}>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',borderBottom:'1px solid var(--rule-soft)'}}>
          <FlagCell label="Cover" on={flags.isCover} note={flags.originalArtist?`of ${flags.originalArtist}`:null} br/>
          <FlagCell label="Re-recording" on={flags.isRerecording} br/>
          <FlagCell label="Remix" on={flags.isRemix} note={flags.remixerName?`by ${flags.remixerName}`:null} br/>
          <FlagCell label="Karaoke" on={flags.isKaraoke}/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',borderBottom:'1px solid var(--rule-soft)'}}>
          <FlagCell label="Tribute" on={flags.isTribute} br/>
          <FlagCell label="Live" on={flags.isLive} note={flags.liveVenue || (flags.liveDate && `${flags.liveLocation||''} · ${flags.liveDate}`) || null} br/>
          <FlagCell label="Clean version" on={flags.isCleanVersion}
            note={flags.hasCorrespondingExplicit?'has explicit twin':null} br/>
          <FlagCell label="Ringtone" on={flags.isRingtone}/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)'}}>
          <FlagCell label="TikTok edit" on={flags.tiktokVersion} br/>
          <FlagCell label="Sped-up" on={flags.spedUpVersion} br/>
          <FlagCell label="Slowed-down" on={flags.slowedDownVersion} br/>
          <FlagCell label="Has explicit twin" on={flags.hasCorrespondingExplicit}/>
        </div>
      </div>

      {/* 04 · VIRALITY SIGNALS ────────────────────────────────────────── */}
      <Section num="04">Virality signals</Section>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,border:'1px solid var(--rule)',marginBottom:24}}>
        <ViralCell name="SHAZAM" color="#0066ff"
          big={dsp.shazam?.count} bigLabel="SHAZAMS"
          extra={dsp.shazam?.topCountry?`top market · ${dsp.shazam.topCountry}`:null} br/>
        <ViralCell name="TIKTOK" color="#000000"
          big={dsp.tiktok?.videoCount} bigLabel="VIDEOS USING SOUND"
          extra={dsp.tiktok?.soundTitle || null} br/>
        <ViralCell name="INSTAGRAM REELS" color="#e4405f"
          big={dsp.instagram?.reelsCount} bigLabel="REELS"
          extra={dsp.instagram?.audioId?`audio · ${dsp.instagram.audioId}`:null} br/>
        <ViralCell name="LAST.FM" color="#d51007"
          big={dsp.lastfm?.listeners} bigLabel="LISTENERS"
          extra={dsp.lastfm?.playcount?`${_platCount(dsp.lastfm.playcount)} scrobbles`:null}/>
      </div>

      {/* 05 · APPLE DELIVERY EXTRAS ───────────────────────────────────── */}
      <Section num="05" action={
        <span className="ff-mono upper" style={{fontSize:9,color:'var(--ink-3)',letterSpacing:'.08em'}}>
          Apple Music for engineers
        </span>
      }>Apple delivery extras</Section>
      <AppleDeliveryPanel ax={dsp.appleExtras} r={r}/>
    </div>
  );
}

// ─── Cell helpers ────────────────────────────────────────────────────────

const FlagCell = ({ label, on, note, br }) => {
  return (
    <div style={{padding:'14px 16px',borderRight:br?'1px solid var(--rule-soft)':'none',display:'flex',flexDirection:'column',justifyContent:'space-between',minHeight:74}}>
      <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>{label}</div>
      <div style={{marginTop:6,display:'flex',alignItems:'center',gap:8}}>
        <span style={{
          width:12,height:12,borderRadius:2,
          background: on?'var(--ink)':'transparent',
          border: on?'1px solid var(--ink)':'1.5px solid var(--ink-4)',
          flexShrink:0,
        }}/>
        <span className="ff-mono" style={{fontSize:13,fontWeight:on?600:400,color:on?'var(--ink)':'var(--ink-4)'}}>{on?'YES':'no'}</span>
      </div>
      {note && <div className="ff-mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:6,lineHeight:1.3}}>{note}</div>}
    </div>
  );
}

const ViralCell = ({ name, color, big, bigLabel, extra, br }) => {
  const has = big != null;
  return (
    <div style={{padding:'18px 18px',borderRight:br?'1px solid var(--rule-soft)':'none'}}>
      <div style={{display:'flex',alignItems:'center',gap:8,marginBottom:10}}>
        <span style={{width:8,height:8,background:has?color:'var(--ink-4)',display:'inline-block',borderRadius:2}}/>
        <span className="ff-mono upper" style={{fontSize:10,fontWeight:600,letterSpacing:'.08em'}}>{name}</span>
      </div>
      <div className="ff-display num" style={{fontSize:32,fontWeight:600,letterSpacing:'-0.04em',lineHeight:1,color:has?'var(--ink)':'var(--ink-4)'}}>
        {has ? _platCount(big) : '—'}
      </div>
      <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)',marginTop:6}}>{bigLabel}</div>
      {extra && <div className="ff-mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:8,lineHeight:1.3}}>{extra}</div>}
    </div>
  );
}

const AppleDeliveryPanel = ({ ax, r }) => {
  if (!ax) {
    return (
      <div style={{border:'1px solid var(--rule)',padding:'24px 18px',marginBottom:24}}>
        <div className="ff-mono" style={{fontSize:11,color:'var(--ink-3)',textAlign:'center'}}>
          No Apple delivery payload on file. Will be populated on next iTunes Producer / Apple Music for Artists sync.
        </div>
      </div>
    );
  }
  return (
    <div style={{border:'1px solid var(--rule)',marginBottom:24}}>
      {/* Audio variants */}
      <div style={{padding:'14px 18px',borderBottom:'1px solid var(--rule-soft)'}}>
        <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)',marginBottom:10}}>AUDIO VARIANTS DELIVERED</div>
        <div style={{display:'flex',gap:8,flexWrap:'wrap'}}>
          <Pill tone={ax.isAppleDigitalMaster?'ok':'soft'}>{ax.isAppleDigitalMaster?'✓ ':''}Digital Master</Pill>
          <Pill tone={ax.hasSpatialAudio?'ok':'soft'}>{ax.hasSpatialAudio?'✓ ':''}Spatial Audio</Pill>
          <Pill tone={ax.hasAtmos?'ok':'soft'}>{ax.hasAtmos?'✓ ':''}Dolby Atmos</Pill>
          <Pill tone={ax.has51?'ok':'soft'}>{ax.has51?'✓ ':''}5.1 Surround</Pill>
          <Pill tone={ax.has71?'ok':'soft'}>{ax.has71?'✓ ':''}7.1 Surround</Pill>
          <Pill tone={ax.hasTtmlLyrics?'ok':'soft'}>{ax.hasTtmlLyrics?'✓ ':''}TTML Lyrics{ax.ttmlLocale?` · ${ax.ttmlLocale}`:''}</Pill>
        </div>
        {ax.atmosIsrc && ax.atmosIsrc !== r.isrc && (
          <div className="ff-mono" style={{fontSize:10,color:'var(--ink-3)',marginTop:8}}>Atmos ISRC: {ax.atmosIsrc}</div>
        )}
      </div>

      {/* Vendor & wholesale */}
      <div style={{padding:'14px 18px',display:'grid',gridTemplateColumns:'1fr 1fr 1fr 1fr',gap:18,borderBottom:'1px solid var(--rule-soft)'}}>
        <div>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>VENDOR ID</div>
          <div className="ff-mono" style={{fontSize:12,marginTop:2}}>{ax.vendorId || '—'}</div>
        </div>
        <div>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>WHOLESALE TIER</div>
          <div className="ff-mono num" style={{fontSize:12,marginTop:2}}>{ax.wholesalePriceTier!=null?`Tier ${ax.wholesalePriceTier}`:'—'}</div>
        </div>
        <div>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>STREAM START</div>
          <div className="ff-mono" style={{fontSize:12,marginTop:2}}>{ax.streamStartDate || '—'}</div>
        </div>
        <div>
          <div className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)'}}>IMMERSIVE FROM</div>
          <div className="ff-mono" style={{fontSize:12,marginTop:2}}>{ax.availableForImmersiveDate || (ax.hasAtmos ? ax.streamStartDate : '—')}</div>
        </div>
      </div>

      {/* Cleared-for flags */}
      <div style={{padding:'14px 18px',display:'flex',gap:8,flexWrap:'wrap'}}>
        <span className="ff-mono upper" style={{fontSize:9,letterSpacing:'.1em',color:'var(--ink-3)',marginRight:10,alignSelf:'center'}}>CLEARED FOR</span>
        <Pill tone={ax.clearedForSale?'ok':'soft'}>{ax.clearedForSale?'✓ ':'✗ '}Sale</Pill>
        <Pill tone={ax.clearedForStream?'ok':'soft'}>{ax.clearedForStream?'✓ ':'✗ '}Stream</Pill>
        <Pill tone={ax.clearedForFitness?'ok':'soft'}>{ax.clearedForFitness?'✓ ':'✗ '}Fitness</Pill>
      </div>
    </div>
  );
}

// Expose to global scope for recording-page.jsx to consume
window.RecPlatforms = RecPlatforms;

})(); // end IIFE
