// DSP / Equalizer section — professional-grade audio.

function DSPSection({ theme }) {
  const isDark = theme === 'dark';
  const [hoverBand, setHoverBand] = React.useState(null);

  // Animated EQ curve
  const [t, setT] = React.useState(0);
  React.useEffect(() => {
    let id;
    const tick = () => { setT(v => v + 0.016); id = requestAnimationFrame(tick); };
    id = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(id);
  }, []);

  // Build curve path
  const W = 760, H = 280;
  const bands = [
    { hz: '60 Hz',  label: 'Sub',       pos: 0.07, gain: 2,   baseY: 0.5 },
    { hz: '250 Hz', label: 'Low shelf', pos: 0.22, gain: -1,  baseY: 0.55 },
    { hz: '1.5 kHz',label: 'Bell',      pos: 0.48, gain: -2,  baseY: 0.6 },
    { hz: '6 kHz',  label: 'Presence',  pos: 0.72, gain: 1,   baseY: 0.45 },
    { hz: '12 kHz', label: 'High shelf',pos: 0.9,  gain: 3,   baseY: 0.25 },
  ];
  const pts = [];
  for (let i = 0; i <= 64; i++) {
    const x = i / 64;
    let y = 0.5;
    // Sum contributions (simple gaussian-like bumps)
    bands.forEach(b => {
      const d = x - b.pos;
      const sigma = 0.12;
      const bump = Math.exp(-(d*d)/(2*sigma*sigma));
      y -= (b.gain / 12) * 0.35 * bump;
    });
    // small ambient wobble
    y += Math.sin(t * 1.2 + x * 8) * 0.008;
    pts.push([x * W, y * H]);
  }
  const path = pts.map((p, i) => (i === 0 ? `M ${p[0].toFixed(1)} ${p[1].toFixed(1)}` : `L ${p[0].toFixed(1)} ${p[1].toFixed(1)}`)).join(' ');
  const fillPath = path + ` L ${W} ${H} L 0 ${H} Z`;

  return (
    <section id="dsp" className="feat-row" style={{ paddingTop: 40 }}>
      <div className="container">
        <div className="feat-grid reverse">
          <div className="feat-visual">
            <div style={{
              position: 'relative', width: '100%',
              borderRadius: 32, padding: 28, overflow: 'hidden',
              background: isDark ? '#121014' : '#FBF7F1',
              boxShadow: isDark ? 'inset 0 0 0 0.5px rgba(255,255,255,0.06), 0 30px 60px rgba(0,0,0,0.45)' : 'inset 0 0 0 0.5px rgba(20,23,27,0.06), 0 30px 60px -20px rgba(20,23,27,0.15)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div>
                  <div className="eyebrow" style={{ marginBottom: 6 }}>DSP · AVAudioUnitEQ</div>
                  <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.02 }}>Parametric 5‑band</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--ink-3)' }}>
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: '#D58E90', boxShadow: '0 0 8px #D58E90' }}/>
                  LIVE · 48 kHz · 24‑bit
                </div>
              </div>
              <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: H, display: 'block' }}>
                <defs>
                  <linearGradient id="curveGrad" x1="0" y1="0" x2="1" y2="0">
                    <stop offset="0" stopColor="#D58E90"/>
                    <stop offset="0.5" stopColor="#E9C46A"/>
                    <stop offset="1" stopColor="#F0B895"/>
                  </linearGradient>
                  <linearGradient id="fillGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0" stopColor="#D58E90" stopOpacity="0.25"/>
                    <stop offset="1" stopColor="#D58E90" stopOpacity="0"/>
                  </linearGradient>
                </defs>
                {/* grid */}
                {[0.25,0.5,0.75].map(y => (
                  <line key={y} x1="0" y1={y*H} x2={W} y2={y*H}
                    stroke={isDark?'rgba(255,255,255,0.05)':'rgba(20,23,27,0.05)'}
                    strokeDasharray={y===0.5?'':'2 4'} strokeWidth={y===0.5?1:1}/>
                ))}
                {bands.map(b => (
                  <line key={b.hz} x1={b.pos*W} y1="0" x2={b.pos*W} y2={H}
                    stroke={isDark?'rgba(255,255,255,0.04)':'rgba(20,23,27,0.04)'}/>
                ))}
                <path d={fillPath} fill="url(#fillGrad)"/>
                <path d={path} stroke="url(#curveGrad)" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                {/* band dots */}
                {bands.map((b,i) => {
                  const x = b.pos * W;
                  const p = pts.find(pp => Math.abs(pp[0] - x) < W/64);
                  const y = p ? p[1] : H/2;
                  return (
                    <g key={b.hz} onMouseEnter={() => setHoverBand(i)} onMouseLeave={() => setHoverBand(null)} style={{ cursor: 'pointer' }}>
                      <circle cx={x} cy={y} r="8" fill={isDark?'#121014':'#FBF7F1'} stroke="#D58E90" strokeWidth="2"/>
                      <circle cx={x} cy={y} r="3" fill="#D58E90"/>
                    </g>
                  );
                })}
              </svg>
              {/* Axis labels */}
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--ink-3)', padding: '4px 4px 0' }}>
                {bands.map(b => <span key={b.hz}>{b.hz}</span>)}
              </div>
              {/* Band sliders */}
              <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14 }}>
                {bands.map((b,i) => (
                  <div key={b.hz} style={{
                    padding: '12px 12px',
                    borderRadius: 12,
                    background: hoverBand===i ? (isDark?'rgba(213,142,144,0.1)':'rgba(213,142,144,0.12)') : (isDark ? 'rgba(255,255,255,0.03)' : 'rgba(20,23,27,0.03)'),
                    transition: 'background 200ms',
                  }}>
                    <div style={{ fontSize: 11.5, fontWeight: 600, letterSpacing: -0.01 }}>{b.hz}</div>
                    <div style={{ fontSize: 10, color: 'var(--ink-3)', marginBottom: 8 }}>{b.label}</div>
                    <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: b.gain > 0 ? '#D58E90' : (b.gain < 0 ? 'var(--ink-2)' : 'var(--ink-3)'), marginBottom: 6 }}>
                      {b.gain > 0 ? '+' : ''}{b.gain.toFixed(1)} dB
                    </div>
                    <div style={{ position: 'relative', height: 3, borderRadius: 2, background: isDark?'rgba(255,255,255,0.08)':'rgba(20,23,27,0.08)' }}>
                      <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: `${Math.abs(b.gain)/12*50}%`, transform: b.gain >= 0 ? '' : 'translateX(-100%)', background: '#D58E90', borderRadius: 2 }}/>
                      <div style={{ position: 'absolute', left: `${50 + (b.gain/12)*50}%`, top: '50%', transform: 'translate(-50%, -50%)', width: 12, height: 12, borderRadius: 6, background: '#fff', boxShadow: '0 1px 4px rgba(0,0,0,0.2)' }}/>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="feat-copy">
            <span className="eyebrow">03 · DSP</span>
            <h3>Studio‑grade audio,<br/><em>in your pocket.</em></h3>
            <p className="lede">
              Built on Apple's native AVAudioEngine. Bit‑perfect playback up to 24‑bit /
              192 kHz. A 5‑band parametric EQ you'd trust on a mix bus.
            </p>
            <div className="feat-specs">
              <div className="feat-spec"><div className="k">Engine</div><div className="v">AVAudioUnitEQ · 64‑bit float</div></div>
              <div className="feat-spec"><div className="k">Sample rates</div><div className="v">44.1 · 48 · 88.2 · 96 · 192 kHz</div></div>
              <div className="feat-spec"><div className="k">Latency</div><div className="v">&lt; 12 ms round trip</div></div>
              <div className="feat-spec"><div className="k">Gapless</div><div className="v">Crossfade or true-gapless per album</div></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DSPSection });