(function () {
  'use strict';

  const tk = {
    bgPage: '#0f0f0f', bgCard: '#1a1a1a', bgCardAlt: '#141414', bgInput: '#111',
    bgHover: '#222', bgSunken: '#0a0a0a', bgOverlay: 'rgba(0,0,0,0.75)',
    border: '#2a2a2a', borderSubtle: '#1e1e1e',
    textPrimary: '#f5f5f5', textSecondary: '#aaaaaa', textMuted: '#666',
    textDisabled: '#444', accent: '#00ff00', accentText: '#000',
    error: '#ff4444',
  };

  const AUDIO_EFFECTS = [
    { id: 'reverb-room', name: 'Reverb: Room', type: 'reverb', params: { roomSize: 0.3, damping: 0.5 } },
    { id: 'reverb-hall', name: 'Reverb: Hall', type: 'reverb', params: { roomSize: 0.7, damping: 0.3 } },
    { id: 'reverb-cathedral', name: 'Reverb: Cathedral', type: 'reverb', params: { roomSize: 0.9, damping: 0.2 } },
    { id: 'echo', name: 'Echo', type: 'delay', params: { delay: 0.3, feedback: 0.5 } },
    { id: 'telephone', name: 'Telephone', type: 'filter', params: { lowCut: 300, highCut: 3400 } },
    { id: 'radio', name: 'Radio', type: 'filter', params: { lowCut: 200, highCut: 5000, distortion: 0.3 } },
    { id: 'bass-boost', name: 'Bass Boost', type: 'eq', params: { frequency: 100, gain: 6 } },
    { id: 'vocal-enhancer', name: 'Vocal Enhancer', type: 'eq', params: { frequency: 2000, gain: 4 } },
  ];

  const DEFAULT_EQ_BANDS = [
    { freq: 80,    label: 'Sub Bass',   gain: 0, q: 1.0 },
    { freq: 250,   label: 'Bass',       gain: 0, q: 1.0 },
    { freq: 1000,  label: 'Mid',        gain: 0, q: 1.0 },
    { freq: 4000,  label: 'Presence',   gain: 0, q: 1.0 },
    { freq: 12000, label: 'Brilliance', gain: 0, q: 1.0 },
  ];

  const DEFAULT_COMPRESSOR = { enabled: false, mode: 'compressor', threshold: -24, ratio: 4, attack: 5, release: 50, limiterCeiling: -1, limiterAttack: 5, limiterRelease: 50, limiterTruePeak: false };
  const DEFAULT_REVERB = { enabled: false, delay: 60, decay: 0.5 };
  const DEFAULT_NOISE_GATE = { enabled: false, thresholdDb: -40, ratio: 2, attack: 10, release: 100, rangeDb: -80 };
  const DEFAULT_DE_ESSER = { enabled: false, frequency: 8000, threshold: 0.5, sharpness: 1.0 };
  const DEFAULT_DE_NOISE = { enabled: false, strength: 30, noiseFloor: -25 };
  const DEFAULT_DE_REVERB = { enabled: false, strength: 40, tailMs: 40 };
  const DEFAULT_DELAY = { enabled: false, type: 'single', delayMs: 400, feedback: 50, mix: 50, syncToBpm: false, bpm: 120 };
  const DEFAULT_CHORUS = { enabled: false, voices: 2, speed: 0.25, depth: 2, mix: 50 };
  const DEFAULT_FLANGER = { enabled: false, delay: 0, depth: 2, regen: 0, speed: 0.5, shape: 'sinusoidal', mix: 50 };
  const DEFAULT_PHASER = { enabled: false, inGain: 0.4, outGain: 0.74, delay: 3.0, decay: 0.4, speed: 0.5, stages: 2 };

  const DEFAULT_AUDIO_EFFECTS = {
    eq: DEFAULT_EQ_BANDS.map(b => ({ ...b })),
    compressor: { ...DEFAULT_COMPRESSOR },
    reverb: { ...DEFAULT_REVERB },
    noiseGate: { ...DEFAULT_NOISE_GATE },
    deEsser: { ...DEFAULT_DE_ESSER },
    deNoise: { ...DEFAULT_DE_NOISE },
    deReverb: { ...DEFAULT_DE_REVERB },
    delay: { ...DEFAULT_DELAY },
    chorus: { ...DEFAULT_CHORUS },
    flanger: { ...DEFAULT_FLANGER },
    phaser: { ...DEFAULT_PHASER },
    normalize: false,
    normalizeLUFS: -16,
    normalizePeak: -1.5,
  };

  const ESSENTIAL_SOUND_PRESETS = {
    Dialogue: { label: 'Dialogue', description: 'Voice clarity: high-pass + presence boost + light compression + de-noise', audioEffects: { ...DEFAULT_AUDIO_EFFECTS, eq: [{ freq:80,label:'Sub Bass',gain:-6,q:1.0 },{ freq:250,label:'Bass',gain:-2,q:1.2 },{ freq:1000,label:'Mid',gain:1,q:1.0 },{ freq:4000,label:'Presence',gain:3,q:1.4 },{ freq:12000,label:'Brilliance',gain:1,q:1.0 }], compressor: { ...DEFAULT_COMPRESSOR,enabled:true,threshold:-18,ratio:3 }, noiseGate: { ...DEFAULT_NOISE_GATE,enabled:true }, deNoise: { ...DEFAULT_DE_NOISE,enabled:true,strength:25 }, normalize:true } },
    Music: { label: 'Music', description: 'Full-range music: gentle warmth + limiter', audioEffects: { ...DEFAULT_AUDIO_EFFECTS, eq: [{ freq:80,label:'Sub Bass',gain:2,q:0.8 },{ freq:250,label:'Bass',gain:1,q:1.0 },{ freq:1000,label:'Mid',gain:-1,q:1.0 },{ freq:4000,label:'Presence',gain:1,q:1.0 },{ freq:12000,label:'Brilliance',gain:2,q:1.0 }], compressor: { ...DEFAULT_COMPRESSOR,enabled:true,mode:'limiter' } } },
    SFX: { label: 'SFX', description: 'Sound effects: sharp transients + hard limiter', audioEffects: { ...DEFAULT_AUDIO_EFFECTS, eq: [{ freq:80,label:'Sub Bass',gain:3,q:1.2 },{ freq:250,label:'Bass',gain:0,q:1.0 },{ freq:1000,label:'Mid',gain:0,q:1.0 },{ freq:4000,label:'Presence',gain:4,q:1.4 },{ freq:12000,label:'Brilliance',gain:3,q:1.0 }], compressor: { ...DEFAULT_COMPRESSOR,enabled:true,mode:'limiter',limiterCeiling:-2 } } },
    Ambience: { label: 'Ambience', description: 'Ambient/background: warmth + light reverb', audioEffects: { ...DEFAULT_AUDIO_EFFECTS, eq: [{ freq:80,label:'Sub Bass',gain:1,q:0.8 },{ freq:250,label:'Bass',gain:2,q:1.0 },{ freq:1000,label:'Mid',gain:-1,q:1.0 },{ freq:4000,label:'Presence',gain:-3,q:1.2 },{ freq:12000,label:'Brilliance',gain:-4,q:1.0 }], compressor: { ...DEFAULT_COMPRESSOR,enabled:true,threshold:-30,ratio:2 }, reverb: { ...DEFAULT_REVERB,enabled:true }, deNoise: { ...DEFAULT_DE_NOISE,enabled:true,strength:20 } } },
  };

  function bandResponseDb(band, f) {
    if (band.gain === 0) return 0;
    const q = band.q > 0 ? band.q : 1;
    const ratio = f / band.freq - band.freq / f;
    return band.gain / (1 + (q * ratio) ** 2);
  }

  function xToFreq(x, width) {
    const logMin = Math.log10(20);
    const logMax = Math.log10(20000);
    return Math.pow(10, logMin + x / width * (logMax - logMin));
  }

  function EqCanvas({ bands }) {
    const canvasRef = React.useRef(null);
    React.useEffect(() => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      const { width, height } = canvas;
      ctx.clearRect(0, 0, width, height);
      ctx.fillStyle = '#1a1a1a';
      ctx.fillRect(0, 0, width, height);
      const dbMin = -12, dbMax = 12, dbRange = dbMax - dbMin;
      const dbToY = (db) => height - ((db - dbMin) / dbRange) * height;
      for (const db of [-12, -6, 0, 6, 12]) {
        const y = dbToY(db);
        ctx.beginPath();
        ctx.moveTo(0, y);
        ctx.lineTo(width, y);
        ctx.strokeStyle = db === 0 ? '#555' : '#2a2a2a';
        ctx.lineWidth = 1;
        ctx.stroke();
      }
      const logMin = Math.log10(20), logMax = Math.log10(20000);
      ctx.strokeStyle = '#2a2a2a';
      for (const f of [100, 1000, 10000]) {
        const x = ((Math.log10(f) - logMin) / (logMax - logMin)) * width;
        ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, height); ctx.stroke();
      }
      bands.forEach((band) => {
        if (band.gain === 0) return;
        ctx.beginPath();
        for (let px = 0; px <= width; px++) {
          const db = bandResponseDb(band, xToFreq(px, width));
          const y = dbToY(db);
          if (px === 0) ctx.moveTo(px, y); else ctx.lineTo(px, y);
        }
        ctx.strokeStyle = band.gain > 0 ? 'rgba(0,255,0,0.15)' : 'rgba(255,80,80,0.15)';
        ctx.lineWidth = 1; ctx.stroke();
      });
      ctx.beginPath();
      for (let px = 0; px <= width; px++) {
        const f = xToFreq(px, width);
        const db = bands.reduce((sum, b) => sum + bandResponseDb(b, f), 0);
        const y = dbToY(Math.max(dbMin, Math.min(dbMax, db)));
        if (px === 0) ctx.moveTo(px, y); else ctx.lineTo(px, y);
      }
      ctx.strokeStyle = '#00ff00'; ctx.lineWidth = 2; ctx.stroke();
      bands.forEach((band) => {
        if (band.gain === 0) return;
        const bx = ((Math.log10(band.freq) - logMin) / (logMax - logMin)) * width;
        const by = dbToY(Math.max(dbMin, Math.min(dbMax, band.gain)));
        ctx.beginPath(); ctx.arc(bx, by, 4, 0, Math.PI * 2);
        ctx.fillStyle = '#00ff00'; ctx.fill();
      });
    }, [bands]);
    return <canvas ref={canvasRef} width={260} height={100} style={{ width: '100%', height: 100, display: 'block', borderRadius: 4 }} />;
  }

  function ParametricEQ({ bands, onChange }) {
    const handleGain = React.useCallback((idx, value) => {
      onChange(bands.map((b, i) => i === idx ? { ...b, gain: Number(value) } : b));
    }, [bands, onChange]);
    const handleQ = React.useCallback((idx, value) => {
      onChange(bands.map((b, i) => i === idx ? { ...b, q: Number(value) } : b));
    }, [bands, onChange]);
    return (
      <div>
        <div style={{ padding: '10px 0 6px' }}><EqCanvas bands={bands} /></div>
        <div style={{ display: 'flex', gap: 4, padding: '4px 0', justifyContent: 'space-between' }}>
          {bands.map((band, idx) => (
            <div key={band.freq} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1, gap: 4 }}>
              <span style={{ fontSize: 9, color: band.gain !== 0 ? '#00ff00' : '#666', minHeight: 12 }}>
                {band.gain > 0 ? '+' : ''}{band.gain}dB
              </span>
              <div style={{ position: 'relative', height: 100, width: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <input type="range" min="-12" max="12" step="0.5" value={band.gain}
                  onChange={(e) => handleGain(idx, e.target.value)}
                  style={{ writingMode: 'vertical-lr', direction: 'rtl', width: 100, height: 20, cursor: 'pointer', accentColor: '#00ff00' }}
                  title={`${band.label} gain: ${band.gain > 0 ? '+' : ''}${band.gain} dB`}
                />
              </div>
              <span style={{ fontSize: 9, color: '#b6b6b6', textAlign: 'center', lineHeight: 1.2 }}>{band.label}</span>
              <span style={{ fontSize: 9, color: '#909090' }}>{band.freq >= 1000 ? `${band.freq/1000}k` : band.freq}Hz</span>
              <div style={{ width: '100%' }}>
                <div style={{ fontSize: 8, color: '#909090', textAlign: 'center', marginBottom: 2 }}>Q {band.q.toFixed(1)}</div>
                <input type="range" min="0.3" max="8" step="0.1" value={band.q}
                  onChange={(e) => handleQ(idx, e.target.value)}
                  style={{ width: '100%', accentColor: '#00cc00', cursor: 'pointer' }}
                />
              </div>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'right', marginTop: 6 }}>
          <button onClick={() => onChange(DEFAULT_EQ_BANDS.map(b => ({ ...b })))}
            style={{ fontSize: 10, padding: '4px 10px', backgroundColor: '#2a2a2a', border: '1px solid #3a3a3a', borderRadius: 4, color: '#b6b6b6', cursor: 'pointer' }}>
            Reset EQ
          </button>
        </div>
      </div>
    );
  }

  const ToggleRow = ({ label, enabled, onToggle, children }) => (
    <div style={{ marginBottom: 12, border: `1px solid ${enabled ? 'rgba(0,255,0,0.25)' : tk.border}`, borderRadius: 6, overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 10px', background: enabled ? 'rgba(0,255,0,0.06)' : tk.bgCardAlt, cursor: 'pointer' }} onClick={onToggle}>
        <span style={{ fontSize: 12, fontWeight: 600, color: enabled ? tk.accent : tk.textSecondary }}>{label}</span>
        <div style={{ width: 36, height: 18, borderRadius: 9, background: enabled ? 'rgba(0,255,0,0.3)' : tk.bgHover, border: `1px solid ${enabled ? 'rgba(0,255,0,0.5)' : tk.border}`, position: 'relative', cursor: 'pointer' }}>
          <div style={{ position: 'absolute', top: 2, left: enabled ? 18 : 2, width: 12, height: 12, borderRadius: '50%', background: enabled ? tk.accent : tk.textMuted, transition: 'left 0.15s' }} />
        </div>
      </div>
      {enabled && <div style={{ padding: '8px 10px', background: tk.bgInput }}>{children}</div>}
    </div>
  );

  const Slider = ({ label, value, min, max, step, onChange, unit = '' }) => (
    <div style={{ marginBottom: 8 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: tk.textMuted, marginBottom: 2 }}>
        <span>{label}</span>
        <span style={{ color: tk.textSecondary }}>{typeof value === 'number' ? value.toFixed(step < 1 ? 2 : 0) : value}{unit}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={e => onChange(Number(e.target.value))}
        style={{ width: '100%', accentColor: '#00ff00', cursor: 'pointer' }} />
    </div>
  );

  function AudioEffectsPanelReal() {
    const [clips, setClips] = React.useState([{
      id: 'demo-clip-1',
      name: 'Interview.mp4',
      type: 'video',
      audio: { volume: 100, fadeIn: 0, fadeOut: 0, bass: 0, treble: 0, pitch: 0 },
      audioEffects: { ...DEFAULT_AUDIO_EFFECTS },
      volume: 1,
      audioProps: { pan: 0, pitch: 0 },
    }]);
    const selectedClips = ['demo-clip-1'];
    const [activeTab, setActiveTab] = React.useState('volume');

    const batchNormalizeAudio = () => console.log('[demo] batchNormalizeAudio stub');
    const batchClearNormalization = () => console.log('[demo] batchClearNormalization stub');
    const measureClipLoudness = async () => { console.log('[demo] measureClipLoudness stub'); };

    const updateClip = (id, patch) => setClips(prev => prev.map(c => c.id === id ? { ...c, ...patch } : c));

    const selectedClip = clips.find(c => selectedClips.includes(c.id));
    const audioProps = selectedClip?.audio || { volume: 100, fadeIn: 0, fadeOut: 0, bass: 0, treble: 0, pitch: 0 };
    const audioEffectsProps = selectedClip?.audioEffects || { ...DEFAULT_AUDIO_EFFECTS };

    const handleAudioChange = (property, value) => {
      if (!selectedClip) return;
      const updates = { audio: { ...audioProps, [property]: value } };
      if (property === 'volume') updates.volume = Math.max(0, Math.min(2, value / 100));
      if (property === 'pitch') updates.audioProps = { ...(selectedClip.audioProps || {}), pitch: value };
      updateClip(selectedClip.id, updates);
    };

    const handleAudioEffectsChange = (section, value) => {
      if (!selectedClip) return;
      updateClip(selectedClip.id, { audioEffects: { ...audioEffectsProps, [section]: value } });
    };

    const css = `
      .vls-ed-aep { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: ${tk.bgCard}; color: ${tk.textPrimary}; overflow: auto; }
      .vls-ed-aep .info-section { padding: 12px 14px; border-bottom: 1px solid ${tk.border}; }
      .vls-ed-aep .info-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: ${tk.textMuted}; margin-bottom: 10px; }
      .vls-ed-aep .control-group { margin-bottom: 12px; }
      .vls-ed-aep .control-label { font-size: 12px; color: ${tk.textSecondary}; display: flex; justify-content: space-between; margin-bottom: 4px; }
      .vls-ed-aep .control-value { color: ${tk.textPrimary}; font-weight: 600; }
      .vls-ed-aep .control-slider { width: 100%; accentColor: #00ff00; cursor: pointer; }
    `;

    return (
      <div className="vls-ed-aep">
        <style>{css}</style>
        <div style={{ padding: '10px 14px', borderBottom: `1px solid ${tk.border}`, fontSize: 13, fontWeight: 700, color: tk.accent }}>
          Audio Effects
        </div>

        {selectedClips.length === 0 ? (
          <div style={{ padding: '20px', textAlign: 'center', color: tk.textMuted, fontSize: 12 }}>Select a clip to edit audio</div>
        ) : (
          <>
            {/* Tabs */}
            <div style={{ display: 'flex', borderBottom: `1px solid ${tk.border}`, backgroundColor: tk.bgCardAlt }}>
              {['volume', 'eq', 'effects', 'advanced'].map((tab) => (
                <button key={tab} onClick={() => setActiveTab(tab)} style={{ flex: 1, padding: '10px', backgroundColor: activeTab === tab ? tk.bgCard : 'transparent', color: activeTab === tab ? tk.accent : tk.textMuted, border: 'none', borderBottom: activeTab === tab ? `2px solid ${tk.accent}` : 'none', cursor: 'pointer', fontSize: '11px', textTransform: 'uppercase', fontWeight: '600' }}>
                  {tab}
                </button>
              ))}
            </div>

            {/* Essential Sound Presets */}
            <div style={{ padding: '8px 10px 4px', borderBottom: `1px solid ${tk.border}` }}>
              <div style={{ fontSize: 10, color: '#909090', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Essential Sound</div>
              <div style={{ display: 'flex', gap: 6 }}>
                {Object.entries(ESSENTIAL_SOUND_PRESETS).map(([key, preset]) => (
                  <button key={key} title={preset.description}
                    onClick={() => { if (!selectedClip) return; updateClip(selectedClip.id, { audioEffects: preset.audioEffects }); }}
                    style={{ flex: 1, padding: '5px 2px', fontSize: 10, fontWeight: 600, background: '#1e1e1e', color: '#d8d8d8', border: '1px solid #3a3a3a', borderRadius: 4, cursor: 'pointer' }}>
                    {preset.label}
                  </button>
                ))}
              </div>
            </div>

            {/* Volume Tab */}
            {activeTab === 'volume' && (
              <div className="info-section">
                <div className="info-section-title">Volume Control</div>
                <div className="control-group">
                  <label className="control-label">Volume <span className="control-value">{audioProps.volume}%</span></label>
                  <input type="range" className="control-slider" value={audioProps.volume} onChange={(e) => handleAudioChange('volume', parseInt(e.target.value))} min="0" max="200" step="1" style={{ width: '100%', accentColor: '#00ff00' }} />
                  <div style={{ fontSize: '10px', color: '#909090', marginTop: '5px' }}>Range: -60dB to +12dB</div>
                </div>
                <div className="control-group">
                  <label className="control-label">Fade In <span className="control-value">{audioProps.fadeIn}s</span></label>
                  <input type="range" className="control-slider" value={audioProps.fadeIn} onChange={(e) => handleAudioChange('fadeIn', parseFloat(e.target.value))} min="0" max="5" step="0.1" style={{ width: '100%', accentColor: '#00ff00' }} />
                </div>
                <div className="control-group">
                  <label className="control-label">Fade Out <span className="control-value">{audioProps.fadeOut}s</span></label>
                  <input type="range" className="control-slider" value={audioProps.fadeOut} onChange={(e) => handleAudioChange('fadeOut', parseFloat(e.target.value))} min="0" max="5" step="0.1" style={{ width: '100%', accentColor: '#00ff00' }} />
                </div>
                <div className="control-group">
                  <label className="control-label">Bass <span className="control-value">{audioProps.bass > 0 ? '+' : ''}{audioProps.bass}dB</span></label>
                  <input type="range" className="control-slider" value={audioProps.bass} onChange={(e) => handleAudioChange('bass', parseInt(e.target.value))} min="-12" max="12" step="1" style={{ width: '100%', accentColor: '#00ff00' }} />
                </div>
                <div className="control-group">
                  <label className="control-label">Treble <span className="control-value">{audioProps.treble > 0 ? '+' : ''}{audioProps.treble}dB</span></label>
                  <input type="range" className="control-slider" value={audioProps.treble} onChange={(e) => handleAudioChange('treble', parseInt(e.target.value))} min="-12" max="12" step="1" style={{ width: '100%', accentColor: '#00ff00' }} />
                </div>
                <div className="control-group">
                  <label className="control-label">Pitch Shift <span className="control-value">{audioProps.pitch > 0 ? '+' : ''}{audioProps.pitch} st</span></label>
                  <input type="range" className="control-slider" value={audioProps.pitch} onChange={(e) => handleAudioChange('pitch', parseInt(e.target.value))} min="-12" max="12" step="1" style={{ width: '100%', accentColor: '#00ff00' }} />
                </div>
                <div className="control-group">
                  <label style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }}>
                    <input type="checkbox" checked={audioEffectsProps.normalize ?? false} onChange={(e) => handleAudioEffectsChange('normalize', e.target.checked)} />
                    <span className="control-label" style={{ margin: 0 }}>Normalize Audio Levels</span>
                  </label>
                  {audioEffectsProps.normalize && (
                    <div style={{ marginTop: 8, padding: '8px', background: tk.bgInput, borderRadius: 4, border: `1px solid ${tk.border}` }}>
                      <div style={{ display: 'flex', gap: 12 }}>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: 11, color: tk.textMuted, marginBottom: 4 }}>Target LUFS</div>
                          <input type="number" value={audioEffectsProps.normalizeLUFS ?? -16} min="-23" max="-10" step="0.5" style={{ width: '100%', background: tk.bgInput, color: tk.textPrimary, border: `1px solid ${tk.border}`, borderRadius: 4, padding: '4px 6px', fontSize: 12 }} onChange={(e) => handleAudioEffectsChange('normalizeLUFS', parseFloat(e.target.value))} />
                        </div>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontSize: 11, color: tk.textMuted, marginBottom: 4 }}>True Peak (dBTP)</div>
                          <input type="number" value={audioEffectsProps.normalizePeak ?? -1.5} min="-6" max="0" step="0.5" style={{ width: '100%', background: tk.bgInput, color: tk.textPrimary, border: `1px solid ${tk.border}`, borderRadius: 4, padding: '4px 6px', fontSize: 12 }} onChange={(e) => handleAudioEffectsChange('normalizePeak', parseFloat(e.target.value))} />
                        </div>
                      </div>
                      <button onClick={() => console.log('[demo] measureClipLoudness stub')} style={{ marginTop: 6, padding: '5px 10px', background: tk.bgHover, border: `1px solid ${tk.border}`, borderRadius: 4, color: tk.textMuted, fontSize: 11, cursor: 'pointer', width: '100%' }}>
                        Measure Loudness (demo)
                      </button>
                    </div>
                  )}
                </div>
              </div>
            )}

            {/* EQ Tab */}
            {activeTab === 'eq' && (
              <div className="info-section">
                <div className="info-section-title">Parametric EQ</div>
                <ParametricEQ
                  bands={audioEffectsProps.eq || DEFAULT_EQ_BANDS.map(b => ({ ...b }))}
                  onChange={(bands) => handleAudioEffectsChange('eq', bands)}
                />
              </div>
            )}

            {/* Effects Tab */}
            {activeTab === 'effects' && (
              <div className="info-section">
                <div className="info-section-title">Audio Effects</div>

                {/* Compressor */}
                <ToggleRow label={audioEffectsProps.compressor?.mode === 'limiter' ? 'Limiter' : 'Compressor'} enabled={audioEffectsProps.compressor?.enabled ?? false} onToggle={() => handleAudioEffectsChange('compressor', { ...audioEffectsProps.compressor, enabled: !audioEffectsProps.compressor?.enabled })}>
                  <Slider label="Threshold" value={audioEffectsProps.compressor?.threshold ?? -24} min={-60} max={0} step={1} onChange={v => handleAudioEffectsChange('compressor', { ...audioEffectsProps.compressor, threshold: v })} unit=" dB" />
                  <Slider label="Ratio" value={audioEffectsProps.compressor?.ratio ?? 4} min={1} max={20} step={0.5} onChange={v => handleAudioEffectsChange('compressor', { ...audioEffectsProps.compressor, ratio: v })} unit=":1" />
                  <Slider label="Attack" value={audioEffectsProps.compressor?.attack ?? 5} min={1} max={100} step={1} onChange={v => handleAudioEffectsChange('compressor', { ...audioEffectsProps.compressor, attack: v })} unit=" ms" />
                  <Slider label="Release" value={audioEffectsProps.compressor?.release ?? 50} min={10} max={1000} step={10} onChange={v => handleAudioEffectsChange('compressor', { ...audioEffectsProps.compressor, release: v })} unit=" ms" />
                </ToggleRow>

                {/* Reverb */}
                <ToggleRow label="Reverb" enabled={audioEffectsProps.reverb?.enabled ?? false} onToggle={() => handleAudioEffectsChange('reverb', { ...audioEffectsProps.reverb, enabled: !audioEffectsProps.reverb?.enabled })}>
                  <Slider label="Delay" value={audioEffectsProps.reverb?.delay ?? 60} min={0} max={200} step={5} onChange={v => handleAudioEffectsChange('reverb', { ...audioEffectsProps.reverb, delay: v })} unit=" ms" />
                  <Slider label="Decay" value={audioEffectsProps.reverb?.decay ?? 0.5} min={0} max={1} step={0.05} onChange={v => handleAudioEffectsChange('reverb', { ...audioEffectsProps.reverb, decay: v })} />
                </ToggleRow>

                {/* De-Noise */}
                <ToggleRow label="De-Noise" enabled={audioEffectsProps.deNoise?.enabled ?? false} onToggle={() => handleAudioEffectsChange('deNoise', { ...audioEffectsProps.deNoise, enabled: !audioEffectsProps.deNoise?.enabled })}>
                  <Slider label="Strength" value={audioEffectsProps.deNoise?.strength ?? 30} min={0} max={100} step={5} onChange={v => handleAudioEffectsChange('deNoise', { ...audioEffectsProps.deNoise, strength: v })} unit="%" />
                  <Slider label="Noise Floor" value={audioEffectsProps.deNoise?.noiseFloor ?? -25} min={-60} max={-10} step={1} onChange={v => handleAudioEffectsChange('deNoise', { ...audioEffectsProps.deNoise, noiseFloor: v })} unit=" dB" />
                </ToggleRow>

                {/* Noise Gate */}
                <ToggleRow label="Noise Gate" enabled={audioEffectsProps.noiseGate?.enabled ?? false} onToggle={() => handleAudioEffectsChange('noiseGate', { ...audioEffectsProps.noiseGate, enabled: !audioEffectsProps.noiseGate?.enabled })}>
                  <Slider label="Threshold" value={audioEffectsProps.noiseGate?.thresholdDb ?? -40} min={-80} max={0} step={1} onChange={v => handleAudioEffectsChange('noiseGate', { ...audioEffectsProps.noiseGate, thresholdDb: v })} unit=" dB" />
                  <Slider label="Attack" value={audioEffectsProps.noiseGate?.attack ?? 10} min={1} max={100} step={1} onChange={v => handleAudioEffectsChange('noiseGate', { ...audioEffectsProps.noiseGate, attack: v })} unit=" ms" />
                  <Slider label="Release" value={audioEffectsProps.noiseGate?.release ?? 100} min={10} max={500} step={10} onChange={v => handleAudioEffectsChange('noiseGate', { ...audioEffectsProps.noiseGate, release: v })} unit=" ms" />
                </ToggleRow>

                {/* De-Esser */}
                <ToggleRow label="De-Esser" enabled={audioEffectsProps.deEsser?.enabled ?? false} onToggle={() => handleAudioEffectsChange('deEsser', { ...audioEffectsProps.deEsser, enabled: !audioEffectsProps.deEsser?.enabled })}>
                  <Slider label="Frequency" value={audioEffectsProps.deEsser?.frequency ?? 8000} min={4000} max={16000} step={500} onChange={v => handleAudioEffectsChange('deEsser', { ...audioEffectsProps.deEsser, frequency: v })} unit=" Hz" />
                  <Slider label="Threshold" value={audioEffectsProps.deEsser?.threshold ?? 0.5} min={0} max={1} step={0.05} onChange={v => handleAudioEffectsChange('deEsser', { ...audioEffectsProps.deEsser, threshold: v })} />
                </ToggleRow>

                {/* Delay */}
                <ToggleRow label="Delay" enabled={audioEffectsProps.delay?.enabled ?? false} onToggle={() => handleAudioEffectsChange('delay', { ...audioEffectsProps.delay, enabled: !audioEffectsProps.delay?.enabled })}>
                  <Slider label="Delay Time" value={audioEffectsProps.delay?.delayMs ?? 400} min={50} max={1000} step={10} onChange={v => handleAudioEffectsChange('delay', { ...audioEffectsProps.delay, delayMs: v })} unit=" ms" />
                  <Slider label="Feedback" value={audioEffectsProps.delay?.feedback ?? 50} min={0} max={90} step={5} onChange={v => handleAudioEffectsChange('delay', { ...audioEffectsProps.delay, feedback: v })} unit="%" />
                  <Slider label="Mix" value={audioEffectsProps.delay?.mix ?? 50} min={0} max={100} step={5} onChange={v => handleAudioEffectsChange('delay', { ...audioEffectsProps.delay, mix: v })} unit="%" />
                </ToggleRow>

                {/* Effect Presets */}
                <div style={{ marginTop: 14 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: tk.textMuted, marginBottom: 8 }}>Effect Presets</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6 }}>
                    {AUDIO_EFFECTS.map(effect => (
                      <button key={effect.id}
                        onClick={() => console.log('[demo] apply effect:', effect.name)}
                        style={{ padding: '8px', background: tk.bgHover, border: `1px solid ${tk.border}`, borderRadius: 4, color: tk.textSecondary, fontSize: 11, cursor: 'pointer', textAlign: 'left' }}>
                        {effect.name}
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            )}

            {/* Advanced Tab */}
            {activeTab === 'advanced' && (
              <div className="info-section">
                <div className="info-section-title">Advanced Effects</div>

                {/* Chorus */}
                <ToggleRow label="Chorus" enabled={audioEffectsProps.chorus?.enabled ?? false} onToggle={() => handleAudioEffectsChange('chorus', { ...audioEffectsProps.chorus, enabled: !audioEffectsProps.chorus?.enabled })}>
                  <Slider label="Voices" value={audioEffectsProps.chorus?.voices ?? 2} min={2} max={4} step={1} onChange={v => handleAudioEffectsChange('chorus', { ...audioEffectsProps.chorus, voices: v })} />
                  <Slider label="Speed" value={audioEffectsProps.chorus?.speed ?? 0.25} min={0.1} max={5} step={0.05} onChange={v => handleAudioEffectsChange('chorus', { ...audioEffectsProps.chorus, speed: v })} unit=" Hz" />
                  <Slider label="Depth" value={audioEffectsProps.chorus?.depth ?? 2} min={0} max={10} step={0.5} onChange={v => handleAudioEffectsChange('chorus', { ...audioEffectsProps.chorus, depth: v })} unit=" ms" />
                  <Slider label="Mix" value={audioEffectsProps.chorus?.mix ?? 50} min={0} max={100} step={5} onChange={v => handleAudioEffectsChange('chorus', { ...audioEffectsProps.chorus, mix: v })} unit="%" />
                </ToggleRow>

                {/* Flanger */}
                <ToggleRow label="Flanger" enabled={audioEffectsProps.flanger?.enabled ?? false} onToggle={() => handleAudioEffectsChange('flanger', { ...audioEffectsProps.flanger, enabled: !audioEffectsProps.flanger?.enabled })}>
                  <Slider label="Speed" value={audioEffectsProps.flanger?.speed ?? 0.5} min={0.1} max={10} step={0.1} onChange={v => handleAudioEffectsChange('flanger', { ...audioEffectsProps.flanger, speed: v })} unit=" Hz" />
                  <Slider label="Depth" value={audioEffectsProps.flanger?.depth ?? 2} min={0} max={10} step={0.5} onChange={v => handleAudioEffectsChange('flanger', { ...audioEffectsProps.flanger, depth: v })} unit=" ms" />
                  <Slider label="Mix" value={audioEffectsProps.flanger?.mix ?? 50} min={0} max={100} step={5} onChange={v => handleAudioEffectsChange('flanger', { ...audioEffectsProps.flanger, mix: v })} unit="%" />
                </ToggleRow>

                {/* Phaser */}
                <ToggleRow label="Phaser" enabled={audioEffectsProps.phaser?.enabled ?? false} onToggle={() => handleAudioEffectsChange('phaser', { ...audioEffectsProps.phaser, enabled: !audioEffectsProps.phaser?.enabled })}>
                  <Slider label="Speed" value={audioEffectsProps.phaser?.speed ?? 0.5} min={0.1} max={10} step={0.1} onChange={v => handleAudioEffectsChange('phaser', { ...audioEffectsProps.phaser, speed: v })} unit=" Hz" />
                  <Slider label="Decay" value={audioEffectsProps.phaser?.decay ?? 0.4} min={0} max={0.99} step={0.01} onChange={v => handleAudioEffectsChange('phaser', { ...audioEffectsProps.phaser, decay: v })} />
                </ToggleRow>

                {/* De-Reverb */}
                <ToggleRow label="De-Reverb" enabled={audioEffectsProps.deReverb?.enabled ?? false} onToggle={() => handleAudioEffectsChange('deReverb', { ...audioEffectsProps.deReverb, enabled: !audioEffectsProps.deReverb?.enabled })}>
                  <Slider label="Strength" value={audioEffectsProps.deReverb?.strength ?? 40} min={0} max={100} step={5} onChange={v => handleAudioEffectsChange('deReverb', { ...audioEffectsProps.deReverb, strength: v })} unit="%" />
                  <Slider label="Tail" value={audioEffectsProps.deReverb?.tailMs ?? 40} min={0} max={100} step={5} onChange={v => handleAudioEffectsChange('deReverb', { ...audioEffectsProps.deReverb, tailMs: v })} unit=" ms" />
                </ToggleRow>
              </div>
            )}
          </>
        )}
      </div>
    );
  }

  window.AudioEffectsPanelReal = AudioEffectsPanelReal;
})();