// ── add-recording-edit-pane.jsx ──────────────────────────────
// EDIT pane for the Add Recording modal. Replaces the old 3 middle
// steps (DETAILS / AUDIO / RIGHTS) with the Add-Work Rights pattern:
// optional helper note + accordion sections, plus a left rail showing
// where this recording will live (linked work · linked releases).
//
// Recordings don't have edition variants like release groups, so the
// rail shows context, not a list of editable instances. After save
// the user manages alt-takes / remixes by creating sibling recordings
// (each gets its own ISRC), not editions of one.
//
// Helpers (Lbl, Inp, PerformersField, ContributorsField,
// RecordingOwnersField, CountrySelect, DateField) are exposed on
// `window` by globals.jsx and consumed here directly. The pane also
// reads window.WORK_BY_ID / window.RELEASES_BY_REC_ID to show context.
//
// Exposes window.RecordingEditPane({ form, set, w, openCtx }).

const { useState: _RyS } = React;

function _RySection({ id, title, icon, right, children, defaultOpen = false, forceOpen = false }) {
  const [open, setOpen] = _RyS(defaultOpen || forceOpen);
  if (forceOpen) {
    return (
      <div style={{ marginBottom: 14 }}>
        {right && <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 6 }}>{right}</div>}
        {children}
      </div>);
  }
  return (
    <section id={id} style={{
      marginBottom: 12,
      border: '1px solid var(--rule)',
      background: 'var(--bg-2)' }}>
      <header onClick={() => setOpen(o => !o)}
        style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '11px 14px', cursor: 'pointer',
          borderBottom: open ? '1px solid var(--rule)' : '0',
          background: 'var(--bg-2)' }}>
        <span style={{ fontSize: 13, color: 'var(--ink-3)', width: 16, textAlign: 'center' }}>{icon}</span>
        <div className="ff-display" style={{ fontSize: 13, fontWeight: 600, flex: 1, letterSpacing: '-0.01em' }}>{title}</div>
        {right && <div onClick={e => e.stopPropagation()}>{right}</div>}
        <span style={{
          fontSize: 14, color: 'var(--ink-3)',
          transform: open ? 'rotate(90deg)' : 'rotate(0deg)',
          transition: 'transform .15s' }}>›</span>
      </header>
      {open && <div style={{ padding: '14px 14px 4px' }}>{children}</div>}
    </section>);
}

// ── STATUS PILL ────────────────────────────────────────────────
const _RY_STATUSES = [
  { v: 'draft',     l: 'Draft',      tone: '#999' },
  { v: 'mastered',  l: 'Mastered',   tone: '#c4a252' },
  { v: 'released',  l: 'Released',   tone: '#3a8a52' },
  { v: 'takendown', l: 'Taken down', tone: '#a83232' },
  { v: 'archived',  l: 'Archived',   tone: '#5c5c5c' }
];

// ── small reusable atoms ───────────────────────────────────────
function _RyLbl({ children }) {
  return <div className="ff-mono upper" style={{ fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)', marginBottom: 6, marginTop: 2 }}>{children}</div>;
}
function _RyInp({ value, onChange, placeholder, type = 'text', mono = false }) {
  const safe = value == null ? '' : value;
  return (
    <input
      type={type}
      value={safe}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      className={mono ? 'ff-mono' : ''}
      style={{
        width: '100%', padding: '8px 10px', boxSizing: 'border-box',
        background: 'var(--bg)', border: '1px solid var(--rule)',
        fontSize: mono ? 12 : 13, color: 'var(--ink)', marginBottom: 14 }} />
  );
}
function _RySeg({ options, value, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
      {options.map(o => {
        const k = o.k != null ? o.k : o.v;
        const l = o.l;
        const active = value === k;
        return (
          <button key={k} onClick={() => onChange(k)} className="ff-mono upper" style={{
            padding: '6px 12px', fontSize: 10, letterSpacing: '.06em', cursor: 'pointer',
            background: active ? 'var(--ink)' : 'transparent',
            color: active ? 'var(--bg)' : 'var(--ink-2)',
            border: '1px solid var(--rule)' }}>{l}</button>
        );
      })}
    </div>
  );
}

// ── MAIN PANE ──────────────────────────────────────────────────
// Map wizard step → which sections show.
// When visibleStep is null/undefined, all sections show (legacy mode).
const _REC_STEP_SECTIONS = {
  basics: ['basics'],
  details: ['identifiers', 'genre', 'dates', 'content', 'audio', 'contributors', 'copyright', 'ownership']
};

function RecordingEditPane({ form, set, w, openCtx, visibleStep }) {
  const _showIds = visibleStep ? _REC_STEP_SECTIONS[visibleStep] || [] : null;
  const _shouldShow = (id) => _showIds === null || _showIds.includes(id);
  const _wizardMode = !!visibleStep;
  const PerformersField     = window.PerformersField;
  const ContributorsField   = window.ContributorsField;
  const RecordingOwnersField= window.RecordingOwnersField;
  const CountrySelect       = window.CountrySelect;

  const recStatus = form.recStatus || 'draft';
  const setStatus = (v) => set({ recStatus: v });
  const st = _RY_STATUSES.find(s => s.v === recStatus) || _RY_STATUSES[0];

  // Linked releases (if this recording was created in-flow from a release)
  const linkedReleases = openCtx?.returnLabel === 'release' && openCtx?.releaseTitle
    ? [{ title: openCtx.releaseTitle, type: 'parent' }]
    : [];

  return (
    <div style={{ display: 'grid', gridTemplateColumns: _wizardMode ? '1fr' : '180px 1fr', minHeight: _wizardMode ? '40vh' : '52vh' }}>
      {/* ─── LEFT RAIL — CONTEXT (hidden in wizard mode) ─────── */}
      {!_wizardMode &&
      <aside style={{
        borderRight: '1px solid var(--rule)',
        background: 'var(--bg-2)',
        padding: '14px 0' }}>
        <div className="ff-mono upper" style={{
          fontSize: 9, letterSpacing: '.12em', color: 'var(--ink-3)',
          padding: '0 14px 8px' }}>
          CONTEXT
        </div>

        {/* Linked work */}
        {w ? (
          <div style={{
            padding: '10px 14px',
            background: 'var(--bg)',
            borderLeft: '3px solid var(--ink)',
            marginBottom: 8 }}>
            <div className="ff-mono upper" style={{
              fontSize: 8, letterSpacing: '.1em',
              color: 'var(--ink-3)', marginBottom: 4 }}>
              WORK
            </div>
            <div className="ff-display" style={{
              fontSize: 12, fontWeight: 600, lineHeight: 1.25,
              color: 'var(--ink)' }}>
              {w.title}
            </div>
            <div className="ff-mono" style={{
              fontSize: 9, color: 'var(--ink-3)', marginTop: 4 }}>
              ISWC {w.iswc}
            </div>
          </div>
        ) : (
          <div style={{ padding: '10px 14px', marginBottom: 8 }}>
            <div className="ff-mono upper" style={{
              fontSize: 8, letterSpacing: '.1em',
              color: 'var(--ink-3)', marginBottom: 4 }}>
              WORK
            </div>
            <div className="ff-mono" style={{
              fontSize: 10, color: 'var(--ink-3)', lineHeight: 1.45 }}>
              Unlinked — link from the recording detail page after save.
            </div>
          </div>
        )}

        {/* Linked releases */}
        <div style={{ padding: '6px 14px 0' }}>
          <div className="ff-mono upper" style={{
            fontSize: 8, letterSpacing: '.1em',
            color: 'var(--ink-3)', marginBottom: 6 }}>
            RELEASES · {linkedReleases.length}
          </div>
          {linkedReleases.length === 0 ? (
            <div className="ff-mono" style={{
              fontSize: 10, color: 'var(--ink-3)', lineHeight: 1.45 }}>
              Add this recording to a release after save.
            </div>
          ) : (
            linkedReleases.map((r, i) => (
              <div key={i} className="ff-mono" style={{
                fontSize: 10, color: 'var(--ink-2)', padding: '4px 0' }}>
                · {r.title}
              </div>
            ))
          )}
        </div>

        <button disabled
          title="Available after first save · use the recording detail page to attach to a release"
          className="ff-mono upper"
          style={{
            display: 'block', width: '100%', textAlign: 'left',
            padding: '10px 14px', marginTop: 14,
            background: 'transparent', border: 0,
            cursor: 'not-allowed',
            fontSize: 9, letterSpacing: '.1em',
            color: 'var(--ink-4)' }}>
          + LINK TO RELEASE
        </button>
      </aside>
      }

      {/* ─── RIGHT PANE — recording strip + section accordion ── */}
      <div style={{ overflowY: 'auto', padding: _wizardMode ? '14px 24px 28px' : '18px 22px 80px', background: 'var(--bg)' }}>

        {/* Recording header strip + helper note (hidden in wizard mode) */}
        {!_wizardMode && <>
        <div style={{
          display: 'flex', alignItems: 'flex-start', gap: 14,
          padding: '4px 0 16px',
          borderBottom: '1px solid var(--rule)', marginBottom: 14 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="ff-mono upper" style={{
              fontSize: 9, letterSpacing: '.12em',
              color: 'var(--ink-3)', marginBottom: 4 }}>
              RECORDING
            </div>
            <input
              value={form.title || ''}
              onChange={e => set({ title: e.target.value })}
              placeholder="Recording title"
              className="ff-display"
              style={{
                fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em',
                background: 'transparent', border: 0, padding: 0,
                width: '100%', color: 'var(--ink)', outline: 'none' }} />
            {form.versionLabel && (
              <div className="ff-mono" style={{
                fontSize: 10, color: 'var(--ink-3)', marginTop: 4 }}>
                {form.versionType}{form.versionLabel ? ` · ${form.versionLabel}` : ''}
              </div>
            )}
          </div>
          <div>
            <div className="ff-mono upper" style={{
              fontSize: 9, letterSpacing: '.12em',
              color: 'var(--ink-3)', marginBottom: 4 }}>
              STATUS
            </div>
            <select
              value={recStatus}
              onChange={e => setStatus(e.target.value)}
              className="ff-mono"
              style={{
                padding: '6px 10px',
                background: 'var(--bg)', border: '1px solid var(--rule)',
                fontSize: 11, color: st.tone, fontWeight: 600 }}>
              {_RY_STATUSES.map(s => <option key={s.v} value={s.v}>{s.l}</option>)}
            </select>
          </div>
        </div>

        {/* Helper note */}
        <div className="ff-mono" style={{
          fontSize: 11, color: 'var(--ink-3)',
          padding: '10px 12px',
          background: 'var(--bg-2)', border: '1px solid var(--rule-soft)',
          marginBottom: 16, lineHeight: 1.55,
          display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <span style={{ color: 'var(--ink-2)', fontSize: 13, lineHeight: 1 }}>ⓘ</span>
          <span>
            <strong style={{ color: 'var(--ink-2)', fontWeight: 600 }}>Optional — fill in over time.</strong>
            {' '}Only title and primary performer are required to save. Audio profile, contributors, ownership and licensing can be added later from the recording detail page.
          </span>
        </div>
        </>}

        {/* TITLE & ARTISTS */}
        {_shouldShow('basics') && <_RySection id="basics" title="Title & Performers" icon="◇" defaultOpen={true} forceOpen={_wizardMode}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div style={{ gridColumn: '1 / -1' }}>
              <_RyLbl>Performing artists</_RyLbl>
              {PerformersField && <PerformersField value={form.performers} onChange={v => set({ performers: v })} />}
            </div>
            <div>
              <_RyLbl>Title</_RyLbl>
              <_RyInp value={form.title} onChange={v => set({ title: v })} placeholder="Cranes In The Sky" />
            </div>
            <div>
              <_RyLbl>Subtitle <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>· optional</span></_RyLbl>
              <_RyInp value={form.subTitle} onChange={v => set({ subTitle: v })} placeholder="e.g. Live at Glastonbury" />
            </div>
            <div>
              <_RyLbl>Version type</_RyLbl>
              <select className="ff-mono"
                value={form.versionType || 'Original'}
                onChange={e => set({ versionType: e.target.value })}
                style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: 'var(--ink)', marginBottom: 14, boxSizing: 'border-box' }}>
                {['Original', 'Edit', 'Remix', 'Live', 'Acoustic', 'Karaoke', 'Instrumental', 'Cover', 'Reissue', 'Demo', 'Alternative'].map(t => <option key={t}>{t}</option>)}
              </select>
            </div>
            <div>
              <_RyLbl>Version label <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>· optional</span></_RyLbl>
              <_RyInp value={form.versionLabel} onChange={v => set({ versionLabel: v })} placeholder="Radio Edit, Extended Mix..." />
            </div>
          </div>
        </_RySection>}

        {/* IDENTIFIERS */}
        {_shouldShow('identifiers') && <_RySection id="identifiers" title="Identifiers · Duration" icon="◈" forceOpen={_wizardMode}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <div>
              <_RyLbl>ISRC</_RyLbl>
              <_RyInp value={form.isrc} onChange={v => set({ isrc: v.toUpperCase() })} placeholder="USQX91600922" mono />
            </div>
            <div>
              <_RyLbl>Catalog number</_RyLbl>
              <_RyInp value={form.catalogNumber} onChange={v => set({ catalogNumber: v })} placeholder="SAINT-001" mono />
            </div>
            <div>
              <_RyLbl>Duration (m:s)</_RyLbl>
              <div style={{ display: 'flex', gap: 6, alignItems: 'center', marginBottom: 14 }}>
                <input type="number" value={form.durationMin || 0}
                  onChange={e => set({ durationMin: +e.target.value || 0 })}
                  className="ff-mono num"
                  style={{ width: '50%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 12, color: 'var(--ink)', boxSizing: 'border-box' }} />
                <span className="ff-mono" style={{ color: 'var(--ink-3)' }}>:</span>
                <input type="number" value={String(form.durationSec || 0).padStart(2, '0')}
                  onChange={e => set({ durationSec: +e.target.value || 0 })}
                  className="ff-mono num"
                  style={{ width: '50%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 12, color: 'var(--ink)', boxSizing: 'border-box' }} />
              </div>
            </div>
          </div>
        </_RySection>}

        {/* GENRE & LANGUAGE */}
        {_shouldShow('genre') && <_RySection id="genre" title="Genre · Language" icon="◐" forceOpen={_wizardMode}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <_RyLbl>Genre</_RyLbl>
              <select className="ff-mono"
                value={form.genre || ''}
                onChange={e => set({ genre: e.target.value, subGenre: '' })}
                style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: form.genre ? 'var(--ink)' : 'var(--ink-3)', marginBottom: 14, boxSizing: 'border-box' }}>
                <option value="">— select genre —</option>
                {(window.refGenreLabels ? window.refGenreLabels() : ['Pop', 'R&B / Soul', 'Hip-Hop / Rap', 'Electronic', 'Rock', 'Indie', 'Alternative', 'Folk', 'Jazz', 'Classical', 'Country', 'Latin', 'Reggae', 'Blues', 'Gospel', 'World', 'Soundtrack', 'Children', 'Spoken Word', 'Other']).map(g => <option key={g}>{g}</option>)}
              </select>
            </div>
            <div>
              <_RyLbl>Sub-genre <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>· optional</span></_RyLbl>
              {(() => {
                const subOpts = window.refSubGenreLabels ? window.refSubGenreLabels(form.genre) : [];
                if (subOpts.length === 0) {
                  return <_RyInp value={form.subGenre} onChange={v => set({ subGenre: v })}
                    placeholder={form.genre ? 'Type a sub-genre…' : 'Pick a genre first'} />;
                }
                return (
                  <select className="ff-mono"
                    value={form.subGenre || ''}
                    onChange={e => set({ subGenre: e.target.value })}
                    style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: form.subGenre ? 'var(--ink)' : 'var(--ink-3)', marginBottom: 14, boxSizing: 'border-box' }}>
                    <option value="">— optional —</option>
                    {subOpts.map(s => <option key={s}>{s}</option>)}
                  </select>
                );
              })()}
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <_RyLbl>Performance language</_RyLbl>
              <select className="ff-mono"
                value={form.languageOfPerformance || ''}
                onChange={e => set({ languageOfPerformance: e.target.value })}
                style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: form.languageOfPerformance ? 'var(--ink)' : 'var(--ink-3)', marginBottom: 6, boxSizing: 'border-box' }}>
                <option value="">— select / instrumental —</option>
                {(window.refLanguageOptions ? window.refLanguageOptions() : ['English', 'Spanish', 'French', 'Portuguese', 'German', 'Italian', 'Japanese', 'Korean', 'Mandarin', 'Arabic', 'Hindi', 'Russian', 'Other']).map(l => <option key={l}>{l}</option>)}
              </select>
              <div className="ff-mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginBottom: 8, lineHeight: 1.5 }}>
                Leave blank for instrumental tracks. Used by some DSPs to match playlists & auto-translate metadata.
              </div>
            </div>
          </div>
        </_RySection>}

        {/* DATES & ORIGIN */}
        {_shouldShow('dates') && <_RySection id="dates" title="Dates · Origin" icon="◷" forceOpen={_wizardMode}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
            <div>
              <_RyLbl>Recording date</_RyLbl>
              {window.DateField ?
                <window.DateField value={form.recordingDate} onChange={v => set({ recordingDate: v })} /> :
                <input type="date" value={form.recordingDate || ''}
                  onChange={e => set({ recordingDate: e.target.value })}
                  className="ff-mono"
                  style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 12, color: 'var(--ink)', marginBottom: 14, boxSizing: 'border-box' }} />}
            </div>
            <div>
              <_RyLbl>First release date</_RyLbl>
              {window.DateField ?
                <window.DateField value={form.firstReleaseDate} onChange={v => set({ firstReleaseDate: v })} /> :
                <input type="date" value={form.firstReleaseDate || ''}
                  onChange={e => set({ firstReleaseDate: e.target.value })}
                  className="ff-mono"
                  style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 12, color: 'var(--ink)', marginBottom: 14, boxSizing: 'border-box' }} />}
            </div>
            <div>
              <_RyLbl>P-line year</_RyLbl>
              <_RyInp value={form.year} onChange={v => set({ year: +v || form.year })} type="number" mono />
            </div>
            <div>
              <_RyLbl>Country of recording</_RyLbl>
              {CountrySelect && <CountrySelect value={form.countryOfRecording} onChange={v => set({ countryOfRecording: v })} />}
            </div>
            <div>
              <_RyLbl>Country of mastering</_RyLbl>
              {CountrySelect && <CountrySelect value={form.countryOfMastering} onChange={v => set({ countryOfMastering: v })} />}
            </div>
          </div>
        </_RySection>}

        {/* CONTENT FLAGS */}
        {_shouldShow('content') && <_RySection id="content" title="Content flags · Clearance" icon="◑" forceOpen={_wizardMode}>
          <_RyLbl>Parental advisory</_RyLbl>
          <_RySeg
            options={[
              { k: 'NotExplicit', l: 'Not explicit' },
              { k: 'Explicit', l: 'Explicit' },
              { k: 'ExplicitContentEdited', l: 'Edited / Clean' }
            ]}
            value={form.parentalAdvisory}
            onChange={v => set({ parentalAdvisory: v, explicit: v === 'Explicit' })} />

          <_RyLbl>Recording type</_RyLbl>
          <_RySeg
            options={['original', 'cover', 'remix', 'live', 'sample'].map(k => ({ k, l: k }))}
            value={form.kind}
            onChange={v => set({ kind: v })} />

          {form.kind !== 'original' && (
            <>
              <_RyLbl>Sample / cover clearance</_RyLbl>
              <_RySeg
                options={['pending', 'cleared', 'disputed'].map(k => ({ k, l: k }))}
                value={form.clearance}
                onChange={v => set({ clearance: v })} />
            </>
          )}
        </_RySection>}

        {/* AUDIO PROFILE */}
        {_shouldShow('audio') && <_RySection id="audio" title="Audio profile · Delivered file" icon="◍" forceOpen={_wizardMode}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <_RyLbl>File format</_RyLbl>
              <select className="ff-mono"
                value={form.audioFormat || 'WAV'}
                onChange={e => set({ audioFormat: e.target.value })}
                style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: 'var(--ink)', marginBottom: 14, boxSizing: 'border-box' }}>
                {['WAV', 'FLAC', 'AIFF', 'MP3', 'AAC', 'ALAC', 'DSD'].map(f => <option key={f}>{f}</option>)}
              </select>
            </div>
            <div>
              <_RyLbl>Sample rate</_RyLbl>
              <select className="ff-mono"
                value={form.sampleRate || '44.1 kHz'}
                onChange={e => set({ sampleRate: e.target.value })}
                style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: 'var(--ink)', marginBottom: 14, boxSizing: 'border-box' }}>
                {['44.1 kHz', '48 kHz', '88.2 kHz', '96 kHz', '176.4 kHz', '192 kHz'].map(f => <option key={f}>{f}</option>)}
              </select>
            </div>
            <div>
              <_RyLbl>Bit depth</_RyLbl>
              <select className="ff-mono"
                value={form.bitDepth || '16'}
                onChange={e => set({ bitDepth: e.target.value })}
                style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: 'var(--ink)', marginBottom: 14, boxSizing: 'border-box' }}>
                {['16', '24', '32'].map(f => <option key={f} value={f}>{f}-bit</option>)}
              </select>
            </div>
            <div>
              <_RyLbl>Channel configuration</_RyLbl>
              <select className="ff-mono"
                value={form.channels || 'Stereo'}
                onChange={e => set({ channels: e.target.value })}
                style={{ width: '100%', padding: '8px 10px', background: 'var(--bg)', border: '1px solid var(--rule)', fontSize: 13, color: 'var(--ink)', marginBottom: 14, boxSizing: 'border-box' }}>
                {['Mono', 'Stereo', 'Binaural', '5.1 Surround', 'Dolby Atmos', 'Sony 360 RA'].map(f => <option key={f}>{f}</option>)}
              </select>
            </div>
          </div>
        </_RySection>}

        {/* CONTRIBUTORS */}
        {_shouldShow('contributors') && <_RySection id="contributors" title="Studio contributors" icon="◇"
          forceOpen={_wizardMode}
          right={<span className="ff-mono" style={{ fontSize: 9, color: 'var(--ink-4)', letterSpacing: '.05em' }}>{(form.contributors || []).length || 0}</span>}>
          <div className="ff-mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginBottom: 10, lineHeight: 1.5 }}>
            Producer, mixer, engineer, featured musicians — credited on DSP detail pages and used for neighboring rights distribution.
          </div>
          {ContributorsField && <ContributorsField value={form.contributors || []} onChange={v => set({ contributors: v })} />}
        </_RySection>}

        {/* SOUND RECORDING COPYRIGHT */}
        {_shouldShow('copyright') && <_RySection id="copyright" title="Sound recording copyright · ℗" icon="◉" forceOpen={_wizardMode}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div>
              <_RyLbl>Recording label <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>· P-line owner</span></_RyLbl>
              <_RyInp value={form.label}
                onChange={v => set({ label: v, pLine: v ? `℗ ${form.year} ${v}` : '' })}
                placeholder="Saint Records" />
            </div>
            <div>
              <_RyLbl>Marketing label / imprint <span style={{ color: 'var(--ink-3)', fontWeight: 400 }}>· optional</span></_RyLbl>
              <_RyInp value={form.marketingLabel}
                onChange={v => set({ marketingLabel: v })}
                placeholder="Columbia (defaults to recording label)" />
            </div>
            <div style={{ gridColumn: '1 / -1' }}>
              <_RyLbl>P-line text</_RyLbl>
              <_RyInp value={form.pLine}
                onChange={v => set({ pLine: v })}
                placeholder={`℗ ${form.year} ${form.label || 'Label name'}`} />
              <div className="ff-mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: -8, marginBottom: 6, lineHeight: 1.5 }}>
                Auto-fills from year + label. Override for licensed material.
              </div>
            </div>
          </div>
        </_RySection>}

        {/* OWNERSHIP */}
        {_shouldShow('ownership') && <_RySection id="ownership" title="Recording ownership · territory" icon="◎"
          forceOpen={_wizardMode}
          right={<span className="ff-mono" style={{ fontSize: 9, color: 'var(--ink-4)', letterSpacing: '.05em' }}>{(form.recordingOwners || []).length || 0}</span>}>
          <div className="ff-mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginBottom: 10, lineHeight: 1.5 }}>
            Master ownership by territory · informs neighboring rights collection (SoundExchange, PPL, GVL, etc.) Defaults to recording label worldwide if left blank.
          </div>
          {RecordingOwnersField && <RecordingOwnersField value={form.recordingOwners || []} onChange={v => set({ recordingOwners: v })} defaultOwner={form.label} />}
        </_RySection>}

      </div>
    </div>
  );
}

Object.assign(window, { RecordingEditPane });