// ProofDrawer.jsx — the truth drawer. Shown when the user toggles "Show proof".
// Three columns: MEASURED · MODELED · INTERPRETED. Cinematic, not debug.

function ProofDrawer({ open, mode }) {
  if (!open) return null;
  const modeNote = ({
    mirror:  'INTERPRETED · the song-body responds to RMS, band energy, onset impulse, and stereo width.',
    sand:    'MODELED · a cymatic-inspired field driven by measured frequency and amplitude. Not exact cymatics.',
    oil:     'INTERPRETED · bass becomes flow pressure, mids become swirl, highs become shimmer, onsets bloom.',
    laser:   'MEASURED · raw waveform trace, with a phase-style inset from the measured waveform. True stereo L/R is not claimed yet.',
    pyramid: 'INT / MOD · bass is foundation, mids walls, highs light. Chamber pulses on rhythm.',
    signal:  'MEASURED · waveform, FFT, band meters, RMS, onsets. The proof itself.',
  })[mode];

  return (
    <section className="mm-proof">
      <div className="mm-proof__head">
        <span className="mm-label">Truth veil</span>
        <span className="mm-caption">Visible proof, kept ceremonial.</span>
      </div>
      <div className="mm-proof__grid">
        <div className="mm-proof__cell">
          <div className="mm-truth mm-truth--measured">Measured</div>
          <p>Samples, waveform, live analyser bands, offline feature estimates, and buffer RMS. Real signal · real math.</p>
          <ul className="mm-proof__list">
            <li>· Waveform array · 2048 samples</li>
            <li>· Live analyser spectrum · 1024 bins</li>
            <li>· Band energy · bass &lt; 180 Hz · mid &lt; 2.5 kHz · top ≥ 2.5 kHz</li>
            <li>· RMS dBFS · full loaded buffer</li>
          </ul>
        </div>
        <div className="mm-proof__cell">
          <div className="mm-truth mm-truth--modeled">Modeled</div>
          <p>Physical inspiration. BPM estimate from autocorrelation of spectral flux; key estimate from chroma correlation. Cymatic-inspired field driven by measured bands.</p>
          <ul className="mm-proof__list">
            <li>· BPM estimate · onset autocorr · marked EST.</li>
            <li>· Key estimate · Krumhansl-Schmuckler · marked EST.</li>
            <li>· Cymatic field · sand grains over band-driven node fn</li>
          </ul>
        </div>
        <div className="mm-proof__cell">
          <div className="mm-truth mm-truth--interpreted">Interpreted</div>
          <p>Artistic translation of measured features. The body, the oil, the chamber — fan-language and modeled visuals grounded in signal.</p>
          <ul className="mm-proof__list">
            <li>· Body shape · tri-channel ring grown from bands + waveform</li>
            <li>· Color · bass violet · middle bone · top cyan · live gold</li>
            <li>· Architecture · pyramid frames widened by bands</li>
          </ul>
        </div>
      </div>
      <footer className="mm-proof__foot">
        <span className="mm-label">Active mode</span>
        <span className="mm-caption">{modeNote}</span>
      </footer>
    </section>
  );
}

Object.assign(window, { ProofDrawer });