// MENTESH 560 — 1U graphic EQ, 10-band
// Styled after API 560: black faceplate, 10 vertical sliders with colored caps,
// frequency labels 31Hz..16kHz, +/-12dB scale, logo block on the right.

function MENTESH560({ variant = {} }) {
  const freqs = ['31Hz', '63Hz', '125Hz', '250Hz', '500Hz', '1kHz', '2kHz', '4kHz', '8kHz', '16kHz'];
  // Start with a gentle smile curve for visual interest
  const defaults = [0.65, 0.6, 0.52, 0.45, 0.42, 0.5, 0.55, 0.62, 0.7, 0.68];
  const [values, setValues] = React.useState(defaults);

  // Cap colors — API 560 has mix of cream/ivory and red caps; randomize for visual rhythm
  const capColors = ['#e8e0c8', '#c8362e', '#e8e0c8', '#c8362e', '#e8e0c8',
                     '#e8e0c8', '#c8362e', '#e8e0c8', '#c8362e', '#e8e0c8'];

  return (
    <div style={{
      width: 1400, height: 110,
      background: 'linear-gradient(180deg, #1e3a5c 0%, #142a44 50%, #0a1a2e 100%)',
      position: 'relative',
      display: 'flex',
      fontFamily: "'Inter','Helvetica Neue',sans-serif",
      color: '#d8dce4',
      boxShadow: 'inset 0 2px 4px rgba(255,255,255,0.04), inset 0 -2px 6px rgba(0,0,0,0.7)',
      overflow: 'hidden',
      userSelect: 'none',
    }}>
      {/* hairline horizontal grain */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(0deg,
          rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px,
          rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 2px)`,
        pointerEvents: 'none',
      }}/>

      {/* rack ears */}
      <EQ560Ear side="left" />

      {/* main area */}
      <div style={{
        flex: 1, position: 'relative',
        display: 'flex', alignItems: 'center',
        padding: '0 18px 0 28px',
      }}>
        {/* left dB scale */}
        <div style={{
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          height: 74, padding: '4px 0', marginRight: 12,
          fontSize: 7, letterSpacing: '0.08em', color: '#8a8f99',
          textAlign: 'right', minWidth: 26,
        }}>
          <span>+12dB</span>
          <span>0</span>
          <span>-12dB</span>
        </div>

        {/* sliders */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(10, 1fr)`,
          flex: 1, gap: 2, height: '100%',
          alignItems: 'center',
        }}>
          {freqs.map((f, i) => (
            <EQ560Slider key={f}
              value={values[i]}
              onChange={v => setValues(vs => vs.map((x, j) => j === i ? v : x))}
              capColor={capColors[i]}
              label={f} />
          ))}
        </div>

        {/* right dB scale */}
        <div style={{
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          height: 74, padding: '4px 0', marginLeft: 12,
          fontSize: 7, letterSpacing: '0.08em', color: '#8a8f99',
          minWidth: 26,
        }}>
          <span>+12dB</span>
          <span>0</span>
          <span>-12dB</span>
        </div>

        {/* Logo block */}
        <div style={{
          marginLeft: 16,
          padding: '10px 12px',
          background: 'linear-gradient(180deg, #f0ecde 0%, #e0dccd 100%)',
          borderRadius: 2,
          boxShadow: 'inset 0 1px 2px rgba(255,255,255,0.4), inset 0 -1px 2px rgba(0,0,0,0.1), 0 2px 3px rgba(0,0,0,0.5)',
          color: '#1a1410',
          display: 'flex', flexDirection: 'column',
          alignItems: 'flex-start',
          minWidth: 110,
        }}>
          {/* ME CLASSICS signature — matches MENTESH 2A maker mark */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 5,
            marginBottom: 4,
            whiteSpace: 'nowrap',
          }}>
            <svg width="26" height="20" viewBox="0 0 30 22">
              <ellipse cx="15" cy="11" rx="14" ry="9" fill="none" stroke="#1a1410" strokeWidth="0.8" />
              <text x="15" y="14.5" textAnchor="middle"
                fontFamily="'Playfair Display',serif" fontSize="9" fontWeight="900"
                fontStyle="italic" fill="#1a1410">ME</text>
            </svg>
            <span style={{
              fontFamily: "'Oswald','Bebas Neue',sans-serif",
              fontSize: 9, fontWeight: 700,
              letterSpacing: '0.18em',
              color: '#1a1410',
            }}>CLASSICS</span>
          </div>
          <div style={{
            fontFamily: "'Oswald','Bebas Neue',sans-serif",
            fontSize: 22, fontWeight: 700, lineHeight: 1,
            marginTop: 4,
            letterSpacing: '-0.01em',
          }}>ME.56</div>
          <div style={{
            fontFamily: "'Oswald',sans-serif",
            fontSize: 7, fontWeight: 600,
            letterSpacing: '0.12em',
            marginTop: 3,
            color: '#2a231c',
            lineHeight: 1.25,
          }}>
            MENTESH ENGINEERING<br/>( CLASSICS )
          </div>
        </div>
      </div>

      <EQ560Ear side="right" />
    </div>
  );
}

// ——— SLIDER ———————————————————————————————————————————————
function EQ560Slider({ value, onChange, capColor, label }) {
  // value: 0..1, 0.5 = 0dB center
  const trackRef = React.useRef(null);
  const drag = React.useRef(null);

  const onDown = (e) => {
    e.preventDefault();
    if (!trackRef.current) return;
    const rect = trackRef.current.getBoundingClientRect();
    const update = (y) => {
      const rel = 1 - (y - rect.top) / rect.height;
      let v = Math.max(0, Math.min(1, rel));
      // detent at center
      if (Math.abs(v - 0.5) < 0.025) v = 0.5;
      onChange(v);
    };
    update(e.clientY);
    const onMove = ev => update(ev.clientY);
    const onUp = () => {
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
  };

  const onDouble = () => onChange(0.5); // reset to 0 dB
  const db = Math.round((value - 0.5) * 24);

  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      height: 92, gap: 3,
      position: 'relative',
    }}>
      {/* slider track area */}
      <div
        ref={trackRef}
        onMouseDown={onDown}
        onDoubleClick={onDouble}
        style={{
          width: 22, height: 78,
          position: 'relative',
          cursor: 'ns-resize',
        }}>
        {/* recessed channel — dark with beveled walls */}
        <div style={{
          position: 'absolute', left: '50%', top: 2, bottom: 2,
          width: 6, transform: 'translateX(-50%)',
          background: 'linear-gradient(90deg, #000 0%, #0a0a0c 20%, #1a1a1c 50%, #0a0a0c 80%, #000 100%)',
          borderRadius: 1,
          boxShadow: `
            inset 0 1px 2px rgba(0,0,0,0.95),
            inset 1px 0 0 rgba(255,255,255,0.06),
            inset -1px 0 0 rgba(0,0,0,0.8),
            0 0 0 1px rgba(255,255,255,0.04)
          `,
        }}/>

        {/* major tick marks on both sides of the channel */}
        {[{ t: 1, l: '+12' }, { t: 0.75, l: '+6' }, { t: 0.5, l: '0' }, { t: 0.25, l: '-6' }, { t: 0, l: '-12' }].map(({ t, l }) => (
          <React.Fragment key={t}>
            <div style={{
              position: 'absolute',
              left: '50%', marginLeft: 5,
              top: `calc(${(1 - t) * 100}% - 0.5px)`,
              width: 4, height: 1,
              background: t === 0.5 ? 'rgba(255,255,255,0.55)' : 'rgba(255,255,255,0.28)',
            }}/>
            <div style={{
              position: 'absolute',
              right: '50%', marginRight: 5,
              top: `calc(${(1 - t) * 100}% - 0.5px)`,
              width: 4, height: 1,
              background: t === 0.5 ? 'rgba(255,255,255,0.55)' : 'rgba(255,255,255,0.28)',
            }}/>
          </React.Fragment>
        ))}
        {/* minor ticks */}
        {[0.125, 0.375, 0.625, 0.875].map(t => (
          <React.Fragment key={t}>
            <div style={{
              position: 'absolute', left: '50%', marginLeft: 5,
              top: `calc(${(1 - t) * 100}% - 0.5px)`,
              width: 2.5, height: 1,
              background: 'rgba(255,255,255,0.14)',
            }}/>
            <div style={{
              position: 'absolute', right: '50%', marginRight: 5,
              top: `calc(${(1 - t) * 100}% - 0.5px)`,
              width: 2.5, height: 1,
              background: 'rgba(255,255,255,0.14)',
            }}/>
          </React.Fragment>
        ))}

        {/* cap shadow cast into the track below */}
        <div style={{
          position: 'absolute',
          left: -5, right: -5,
          top: `calc(${(1 - value) * 100}% - 3px)`,
          height: 14,
          borderRadius: 2,
          background: 'rgba(0,0,0,0.45)',
          filter: 'blur(2px)',
          pointerEvents: 'none',
        }}/>

        {/* fader cap — sculpted two-tone with rubber grip */}
        <div style={{
          position: 'absolute',
          left: -6, right: -6,
          top: `calc(${(1 - value) * 100}% - 9px)`,
          height: 18,
          borderRadius: 2.5,
          // outer side walls — angled black rubber base + color top
          background: `linear-gradient(180deg,
            ${shade(capColor, 0.2)} 0%,
            ${capColor} 15%,
            ${shade(capColor, -0.1)} 38%,
            #0f0f10 40%,
            #0a0a0c 60%,
            #050506 100%)`,
          boxShadow: `
            0 2px 4px rgba(0,0,0,0.65),
            0 0 0 1px rgba(0,0,0,0.6),
            inset 0 1px 0 rgba(255,255,255,0.45),
            inset 0 -1px 0 rgba(0,0,0,0.5),
            inset 1px 0 1px rgba(255,255,255,0.12),
            inset -1px 0 1px rgba(0,0,0,0.4)
          `,
          position: 'absolute',
          overflow: 'hidden',
        }}>
          {/* top color bar highlight */}
          <div style={{
            position: 'absolute', left: 0, right: 0, top: 0,
            height: 6,
            background: `linear-gradient(180deg,
              ${shade(capColor, 0.45)} 0%,
              ${shade(capColor, 0.1)} 60%,
              ${shade(capColor, -0.1)} 100%)`,
            borderTopLeftRadius: 2.5,
            borderTopRightRadius: 2.5,
          }}/>
          {/* glossy top-edge specular */}
          <div style={{
            position: 'absolute', left: 2, right: 2, top: 1,
            height: 1.5,
            background: 'rgba(255,255,255,0.55)',
            filter: 'blur(0.3px)',
            borderRadius: 1,
          }}/>
          {/* rubber grip ridges on the black lower half */}
          {[0.55, 0.67, 0.79].map(y => (
            <div key={y} style={{
              position: 'absolute', left: 1.5, right: 1.5,
              top: `${y * 100}%`,
              height: 1,
              background: 'linear-gradient(180deg, rgba(60,60,64,0.9) 0%, rgba(0,0,0,0.95) 50%, rgba(40,40,44,0.6) 100%)',
              boxShadow: '0 1px 0 rgba(255,255,255,0.06)',
            }}/>
          ))}
          {/* center white indicator line (API-style) */}
          <div style={{
            position: 'absolute', left: 0, right: 0,
            top: '38%',
            height: 1.5,
            background: '#f4f1e8',
            boxShadow: '0 1px 0 rgba(0,0,0,0.5)',
          }}/>
          {/* side pointer notches — left and right small triangles into the channel */}
          <div style={{
            position: 'absolute', left: -0.5, top: '38%', marginTop: -2,
            width: 0, height: 0,
            borderTop: '2px solid transparent',
            borderBottom: '2px solid transparent',
            borderLeft: '3px solid #050506',
          }}/>
          <div style={{
            position: 'absolute', right: -0.5, top: '38%', marginTop: -2,
            width: 0, height: 0,
            borderTop: '2px solid transparent',
            borderBottom: '2px solid transparent',
            borderRight: '3px solid #050506',
          }}/>
        </div>
      </div>
      {/* freq label */}
      <div style={{
        fontSize: 8, letterSpacing: '0.04em',
        color: '#c0c6d0',
        fontFamily: "'Inter',sans-serif",
        textShadow: '0 1px 0 rgba(0,0,0,0.8)',
      }}>{label}</div>
    </div>
  );
}

function shade(hex, amt) {
  // amt -1..1
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0, 2), 16);
  const g = parseInt(h.slice(2, 4), 16);
  const b = parseInt(h.slice(4, 6), 16);
  const adj = (c) => {
    const v = amt >= 0
      ? Math.round(c + (255 - c) * amt)
      : Math.round(c * (1 + amt));
    return Math.max(0, Math.min(255, v));
  };
  const toHex = (c) => c.toString(16).padStart(2, '0');
  return `#${toHex(adj(r))}${toHex(adj(g))}${toHex(adj(b))}`;
}

// ——— RACK EAR ———————————————————————————————————————————————
function EQ560Ear({ side }) {
  const screw = (
    <div style={{
      width: 10, height: 10, borderRadius: '50%',
      background: 'radial-gradient(circle at 30% 30%, #7a7a7e, #2a2a2c 70%)',
      border: '1px solid #0a0a0c',
      position: 'relative',
    }}>
      <div style={{
        position: 'absolute', inset: 1.5,
        background: 'linear-gradient(45deg, transparent 45%, #0a0a0c 45%, #0a0a0c 55%, transparent 55%)',
      }}/>
    </div>
  );
  return (
    <div style={{
      width: 42, position: 'relative',
      background: 'linear-gradient(90deg, #18304a 0%, #0c1c30 100%)',
      borderRight: side === 'left' ? '1px solid rgba(0,0,0,0.6)' : 'none',
      borderLeft: side === 'right' ? '1px solid rgba(0,0,0,0.6)' : 'none',
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'space-between',
      padding: '10px 0',
    }}>
      {screw}{screw}
    </div>
  );
}

// expose
Object.assign(window, { MENTESH560 });