// Photoreal rotary knob component — SVG/CSS based
// Vintage Teletronix style: concave bakelite with brass insert, white pointer line.

function Knob({
  value = 0, // 0..1
  onChange,
  defaultValue,
  size = 170,
  label = '',
  sublabel = '',
  minAngle = -150,
  maxAngle = 150,
  ticks = 11,
  tickLabels = null, // array of strings, or null
  style = 'bakelite', // bakelite | brass | chicken
  showNumbers = true,
}) {
  const angle = minAngle + value * (maxAngle - minAngle);
  const dragRef = React.useRef(null);

  const onPointerDown = (e) => {
    e.preventDefault();
    const startY = e.clientY;
    const startVal = value;
    const ticks_ = ticks || 11;
    const steps = (ticks_ - 1) * 2; // half-tick stepping for fine feel
    let lastStep = Math.round(startVal * steps);
    const onMove = (ev) => {
      const dy = startY - ev.clientY;
      const raw = Math.max(0, Math.min(1, startVal + dy / 200));
      const stepIdx = Math.round(raw * steps);
      const snapped = stepIdx / steps;
      if (stepIdx !== lastStep) {
        lastStep = stepIdx;
        if (window.playKnobTick) window.playKnobTick();
      }
      onChange && onChange(snapped);
    };
    const onUp = () => {
      window.removeEventListener('pointermove', onMove);
      window.removeEventListener('pointerup', onUp);
    };
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
  };

  const onWheel = (e) => {
    e.preventDefault();
    const ticks_ = ticks || 11;
    const steps = (ticks_ - 1) * 2;
    const dir = e.deltaY > 0 ? -1 : 1;
    const curStep = Math.round(value * steps);
    const nextStep = Math.max(0, Math.min(steps, curStep + dir));
    if (nextStep !== curStep && window.playKnobTick) window.playKnobTick(0.6);
    onChange && onChange(nextStep / steps);
  };

  // Build tick marks around the knob — major + minor (half-dB) ticks
  const tickArr = [];
  const minorTickArr = [];
  const R = size / 2;
  const tickR = R + 6;
  const tickROut = R + 14;
  const minorR = R + 6;
  const minorROut = R + 11; // shorter than major
  for (let i = 0; i < ticks; i++) {
    const a = minAngle + (i / (ticks - 1)) * (maxAngle - minAngle);
    const rad = (a - 90) * Math.PI / 180;
    tickArr.push({
      x1: R + Math.cos(rad) * tickR,
      y1: R + Math.sin(rad) * tickR,
      x2: R + Math.cos(rad) * tickROut,
      y2: R + Math.sin(rad) * tickROut,
      angle: a,
      label: tickLabels ? tickLabels[i] : (showNumbers ? String(i) : ''),
    });
    // half-step minor tick between this and next major
    if (i < ticks - 1) {
      const aMid = minAngle + ((i + 0.5) / (ticks - 1)) * (maxAngle - minAngle);
      const radMid = (aMid - 90) * Math.PI / 180;
      minorTickArr.push({
        x1: R + Math.cos(radMid) * minorR,
        y1: R + Math.sin(radMid) * minorR,
        x2: R + Math.cos(radMid) * minorROut,
        y2: R + Math.sin(radMid) * minorROut,
      });
    }
  }

  const totalSize = size + 56; // room for ticks + labels

  return (
    <div style={{
      display: 'inline-flex', flexDirection: 'column', alignItems: 'center',
      userSelect: 'none',
    }}>
      {label && (
        <div style={{
          fontFamily: 'var(--font-engrave)',
          fontSize: size < 140 ? 11 : 13,
          letterSpacing: '0.22em',
          color: 'var(--ink-engrave)',
          textTransform: 'uppercase',
          marginBottom: 10,
          textShadow: '0 1px 0 rgba(255,255,255,0.6), 0 -1px 0 rgba(0,0,0,0.2)',
          fontWeight: 600,
        }}>{label}</div>
      )}

      <div
        style={{ position: 'relative', width: totalSize, height: totalSize }}
        onWheel={onWheel}
      >
        {/* Tick marks + numbers */}
        <svg width={totalSize} height={totalSize} style={{
          position: 'absolute', inset: 0, overflow: 'visible',
        }}>
          <g transform={`translate(${(totalSize - size) / 2}, ${(totalSize - size) / 2})`}>
            {minorTickArr.map((t, i) => (
              <line key={`m${i}`} x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2}
                stroke="var(--ink-engrave)" strokeWidth="1" strokeLinecap="round"
                opacity="0.35" />
            ))}
            {tickArr.map((t, i) => (
              <g key={i}>
                <line x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2}
                  stroke="var(--ink-engrave)" strokeWidth="1.5" strokeLinecap="round"
                  opacity="0.55" />
                {t.label && (
                  <text
                    x={R + Math.cos((t.angle - 90) * Math.PI / 180) * (tickROut + 8)}
                    y={R + Math.sin((t.angle - 90) * Math.PI / 180) * (tickROut + 8) + 4}
                    textAnchor="middle"
                    fontSize={size < 140 ? 9 : 10}
                    fontFamily="var(--font-engrave)"
                    fontWeight="600"
                    fill="var(--ink-engrave)"
                    opacity="0.75"
                  >{t.label}</text>
                )}
              </g>
            ))}
          </g>
        </svg>

        {/* The knob itself */}
        <div
          ref={dragRef}
          onPointerDown={onPointerDown}
          onDoubleClick={defaultValue != null ? () => onChange && onChange(defaultValue) : undefined}
          style={{
            position: 'absolute',
            left: (totalSize - size) / 2,
            top: (totalSize - size) / 2,
            width: size, height: size,
            cursor: 'ns-resize',
          }}
        >
          <KnobBody size={size} angle={angle} style={style} />
        </div>
      </div>

      {sublabel && (
        <div style={{
          fontFamily: 'var(--font-engrave)',
          fontSize: 10,
          letterSpacing: '0.2em',
          color: 'var(--ink-engrave)',
          opacity: 0.65,
          textTransform: 'uppercase',
          marginTop: 6,
        }}>{sublabel}</div>
      )}
    </div>
  );
}

function KnobBody({ size, angle, style }) {
  if (style === 'chicken') return <ChickenHeadKnob size={size} angle={angle} />;
  if (style === 'brass') return <BrassKnob size={size} angle={angle} />;
  if (style === 'studio-satin') return <StudioSatinKnob size={size} angle={angle} />;
  if (style === 'davies') return <DaviesKnob size={size} angle={angle} />;
  if (style === 'flat-cap') return <FlatCapKnob size={size} angle={angle} />;
  if (style === 'cream') return <CreamKnob size={size} angle={angle} />;
  if (style === 'anodized') return <AnodizedKnob size={size} angle={angle} />;
  if (style === 'sifam') return <SifamKnob size={size} angle={angle} />;
  return <BakeliteKnob size={size} angle={angle} />;
}

// Brushed silver / studio-satin knob — used by the Modern Black faceplate.
// Aluminum body with concentric turning grooves, slight conical top, cream pointer.
function StudioSatinKnob({ size, angle }) {
  const id = React.useId();
  // Concentric ring radii for the brushed turning marks
  const rings = [16, 20, 24, 28, 31, 33];
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        {/* outer skirt — slightly darker brushed band */}
        <radialGradient id={`sat-skirt-${id}`} cx="42%" cy="32%" r="72%">
          <stop offset="0%"  stopColor="#d4d0c8" />
          <stop offset="35%" stopColor="#a8a29a" />
          <stop offset="70%" stopColor="#5a544c" />
          <stop offset="100%" stopColor="#28241e" />
        </radialGradient>
        {/* dished top — brighter brushed face */}
        <radialGradient id={`sat-top-${id}`} cx="40%" cy="30%" r="78%">
          <stop offset="0%"  stopColor="#f4f0e6" />
          <stop offset="35%" stopColor="#cac4b6" />
          <stop offset="75%" stopColor="#86807a" />
          <stop offset="100%" stopColor="#3a342e" />
        </radialGradient>
        {/* soft sheen across upper-left */}
        <radialGradient id={`sat-sheen-${id}`} cx="35%" cy="22%" r="55%">
          <stop offset="0%" stopColor="rgba(255,255,250,0.6)" />
          <stop offset="60%" stopColor="rgba(255,255,250,0)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0)" />
        </radialGradient>
        <linearGradient id={`sat-rim-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="rgba(255,255,255,0.5)" />
          <stop offset="50%" stopColor="rgba(255,255,255,0)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0.55)" />
        </linearGradient>
      </defs>

      {/* drop shadow */}
      <ellipse cx="50" cy="56" rx="46" ry="44" fill="rgba(0,0,0,0.55)" filter="blur(2px)" />

      {/* outer skirt with rim */}
      <circle cx="50" cy="50" r="48" fill={`url(#sat-skirt-${id})`} />
      <circle cx="50" cy="50" r="48" fill="none" stroke={`url(#sat-rim-${id})`} strokeWidth="1" />

      {/* very fine knurling on the skirt edge */}
      <g opacity="0.32">
        {Array.from({ length: 96 }).map((_, i) => {
          const a = (i / 96) * 360;
          const rad = (a - 90) * Math.PI / 180;
          const x1 = 50 + Math.cos(rad) * 43.5;
          const y1 = 50 + Math.sin(rad) * 43.5;
          const x2 = 50 + Math.cos(rad) * 47.8;
          const y2 = 50 + Math.sin(rad) * 47.8;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#000" strokeWidth="0.35" />;
        })}
      </g>

      {/* dished top face */}
      <circle cx="50" cy="50" r="35" fill={`url(#sat-top-${id})`} />

      {/* concentric brushed turning grooves */}
      <g fill="none" stroke="rgba(0,0,0,0.18)" strokeWidth="0.35">
        {rings.map(r => <circle key={r} cx="50" cy="50" r={r} />)}
      </g>
      <g fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="0.35">
        {rings.map(r => <circle key={r} cx="50" cy="50" r={r - 0.4} />)}
      </g>

      {/* soft sheen */}
      <ellipse cx="50" cy="50" rx="35" ry="35" fill={`url(#sat-sheen-${id})`} />

      {/* rotating pointer */}
      <g transform={`rotate(${angle} 50 50)`}>
        {/* deep groove channel */}
        <rect x="49.2" y="16" width="1.6" height="20" rx="0.6" fill="rgba(0,0,0,0.55)" />
        {/* cream indicator line */}
        <rect x="49.5" y="16" width="1" height="20" rx="0.5" fill="#f0e6d0" />
        {/* center boss — slightly raised dark hub */}
        <circle cx="50" cy="50" r="4.5" fill="#2a2620" />
        <circle cx="49" cy="49" r="1.4" fill="rgba(255,255,255,0.3)" />
      </g>
    </svg>
  );
}

function BakeliteKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`bake-${id}`} cx="35%" cy="28%" r="75%">
          <stop offset="0%" stopColor="#4a4540" />
          <stop offset="40%" stopColor="#201d1a" />
          <stop offset="80%" stopColor="#0c0a08" />
          <stop offset="100%" stopColor="#050403" />
        </radialGradient>
        <radialGradient id={`bake-inner-${id}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#1a1614" />
          <stop offset="75%" stopColor="#0a0806" />
          <stop offset="100%" stopColor="#000000" />
        </radialGradient>
        <linearGradient id={`bake-rim-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(255,255,255,0.35)" />
          <stop offset="50%" stopColor="rgba(255,255,255,0)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0.5)" />
        </linearGradient>
      </defs>
      {/* drop shadow */}
      <ellipse cx="50" cy="54" rx="46" ry="44" fill="rgba(0,0,0,0.45)" filter="blur(2px)" />
      {/* outer skirt */}
      <circle cx="50" cy="50" r="48" fill={`url(#bake-${id})`} />
      <circle cx="50" cy="50" r="48" fill="none" stroke={`url(#bake-rim-${id})`} strokeWidth="1.2" />
      {/* knurled edge — thin radial marks */}
      <g opacity="0.35">
        {Array.from({ length: 64 }).map((_, i) => {
          const a = (i / 64) * 360;
          const rad = (a - 90) * Math.PI / 180;
          const x1 = 50 + Math.cos(rad) * 44;
          const y1 = 50 + Math.sin(rad) * 44;
          const x2 = 50 + Math.cos(rad) * 48;
          const y2 = 50 + Math.sin(rad) * 48;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#000" strokeWidth="0.4" />;
        })}
      </g>
      {/* recessed top */}
      <circle cx="50" cy="50" r="36" fill={`url(#bake-inner-${id})`} />
      {/* rotating pointer */}
      <g transform={`rotate(${angle} 50 50)`}>
        {/* brass indicator line */}
        <rect x="48.8" y="14" width="2.4" height="22" rx="1" fill="#e6c985" />
        <rect x="49.3" y="14" width="1.4" height="22" rx="0.7" fill="#fff3c8" opacity="0.8" />
        {/* center cap */}
        <circle cx="50" cy="50" r="6" fill="#1a1614" stroke="#2a2420" strokeWidth="0.5" />
        <circle cx="49" cy="49" r="1.8" fill="rgba(255,255,255,0.25)" />
      </g>
      {/* top highlight */}
      <ellipse cx="42" cy="34" rx="12" ry="5" fill="rgba(255,255,255,0.08)" />
    </svg>
  );
}

function BrassKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`br-${id}`} cx="35%" cy="28%" r="75%">
          <stop offset="0%" stopColor="#f8e4a8" />
          <stop offset="40%" stopColor="#c09a54" />
          <stop offset="100%" stopColor="#5a4420" />
        </radialGradient>
      </defs>
      <ellipse cx="50" cy="54" rx="46" ry="44" fill="rgba(0,0,0,0.4)" />
      <circle cx="50" cy="50" r="48" fill={`url(#br-${id})`} />
      <circle cx="50" cy="50" r="36" fill="#1a1410" />
      <g transform={`rotate(${angle} 50 50)`}>
        <rect x="49" y="14" width="2" height="22" rx="1" fill="#fff3c8" />
        <circle cx="50" cy="50" r="5" fill="#5a4420" />
      </g>
    </svg>
  );
}

function ChickenHeadKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`ck-${id}`} cx="40%" cy="35%" r="60%">
          <stop offset="0%" stopColor="#2a2420" />
          <stop offset="100%" stopColor="#060404" />
        </radialGradient>
      </defs>
      <ellipse cx="50" cy="54" rx="38" ry="36" fill="rgba(0,0,0,0.5)" />
      <circle cx="50" cy="50" r="22" fill={`url(#ck-${id})`} />
      <g transform={`rotate(${angle} 50 50)`}>
        {/* chicken-head pointer */}
        <path d="M50 30 L54 50 L50 54 L46 50 Z" fill="#f0e4c4" stroke="#1a1410" strokeWidth="0.5" />
        <circle cx="50" cy="50" r="3" fill="#0a0806" />
      </g>
    </svg>
  );
}

// ── 1. Davies 1900H style — tall plastic cylinder, flat top, knurled skirt, red dot indicator
function DaviesKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`dav-body-${id}`} cx="38%" cy="30%" r="72%">
          <stop offset="0%" stopColor="#3a3530" />
          <stop offset="50%" stopColor="#1a1612" />
          <stop offset="100%" stopColor="#050403" />
        </radialGradient>
        <linearGradient id={`dav-rim-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="rgba(255,255,255,0.3)" />
          <stop offset="100%" stopColor="rgba(0,0,0,0.5)" />
        </linearGradient>
      </defs>
      <ellipse cx="50" cy="55" rx="47" ry="44" fill="rgba(0,0,0,0.5)" />
      {/* knurled skirt — alternating light/dark bands */}
      <circle cx="50" cy="50" r="48" fill={`url(#dav-body-${id})`} />
      <g opacity="0.45">
        {Array.from({ length: 48 }).map((_, i) => {
          const a = (i / 48) * 360;
          const rad = (a - 90) * Math.PI / 180;
          return <line key={i}
            x1={50 + Math.cos(rad) * 41} y1={50 + Math.sin(rad) * 41}
            x2={50 + Math.cos(rad) * 48} y2={50 + Math.sin(rad) * 48}
            stroke={i % 2 === 0 ? '#555' : '#000'} strokeWidth="0.9" />;
        })}
      </g>
      {/* flat top cap */}
      <circle cx="50" cy="50" r="34" fill="#2a2420" />
      <circle cx="50" cy="50" r="33" fill={`url(#dav-body-${id})`} />
      <circle cx="50" cy="50" r="33" fill="none" stroke={`url(#dav-rim-${id})`} strokeWidth="1" />
      {/* indicator: rotating red dot near edge of cap */}
      <g transform={`rotate(${angle} 50 50)`}>
        <circle cx="50" cy="22" r="3.8" fill="#c82418" />
        <circle cx="50" cy="21.5" r="1.6" fill="rgba(255,180,160,0.7)" />
      </g>
      <circle cx="50" cy="50" r="6" fill="#1a1412" />
    </svg>
  );
}

// ── 2. Flat-cap aluminum — low-profile, wide, red indicator dot on outer ring
function FlatCapKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`fc-top-${id}`} cx="38%" cy="32%" r="70%">
          <stop offset="0%" stopColor="#d8d4c8" />
          <stop offset="50%" stopColor="#9a968a" />
          <stop offset="100%" stopColor="#4a4640" />
        </radialGradient>
        <radialGradient id={`fc-skirt-${id}`} cx="38%" cy="30%" r="75%">
          <stop offset="0%" stopColor="#6a6860" />
          <stop offset="100%" stopColor="#1a1814" />
        </radialGradient>
      </defs>
      <ellipse cx="50" cy="54" rx="47" ry="44" fill="rgba(0,0,0,0.45)" />
      {/* outer skirt */}
      <circle cx="50" cy="50" r="48" fill={`url(#fc-skirt-${id})`} />
      {/* flat top — wider proportion */}
      <circle cx="50" cy="50" r="40" fill={`url(#fc-top-${id})`} />
      {/* fine radial brushing on top */}
      <g opacity="0.2">
        {Array.from({ length: 72 }).map((_, i) => {
          const a = (i / 72) * 360;
          const rad = (a - 90) * Math.PI / 180;
          return <line key={i}
            x1={50 + Math.cos(rad) * 4} y1={50 + Math.sin(rad) * 4}
            x2={50 + Math.cos(rad) * 39} y2={50 + Math.sin(rad) * 39}
            stroke="#fff" strokeWidth="0.3" />;
        })}
      </g>
      {/* top specular */}
      <ellipse cx="40" cy="37" rx="14" ry="5" fill="rgba(255,255,255,0.35)" />
      {/* rotating indicator: red dot on outer ring */}
      <g transform={`rotate(${angle} 50 50)`}>
        <circle cx="50" cy="13" r="4" fill="#c82418" />
        <circle cx="50" cy="12.5" r="1.8" fill="rgba(255,180,160,0.6)" />
      </g>
      <circle cx="50" cy="50" r="5" fill="#3a3830" />
    </svg>
  );
}

// ── 3. Vintage Cream — ivory phenolic, warm off-white, dark pointer line (Neve/ISA style)
function CreamKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`cr-body-${id}`} cx="35%" cy="28%" r="78%">
          <stop offset="0%" stopColor="#f4ecd4" />
          <stop offset="45%" stopColor="#ddd0a8" />
          <stop offset="80%" stopColor="#b8a878" />
          <stop offset="100%" stopColor="#7a6848" />
        </radialGradient>
      </defs>
      <ellipse cx="50" cy="55" rx="47" ry="44" fill="rgba(0,0,0,0.35)" />
      <circle cx="50" cy="50" r="48" fill={`url(#cr-body-${id})`} />
      <circle cx="50" cy="50" r="48" fill="none" stroke="rgba(100,80,40,0.4)" strokeWidth="1" />
      {/* fine knurl */}
      <g opacity="0.25">
        {Array.from({ length: 60 }).map((_, i) => {
          const a = (i / 60) * 360;
          const rad = (a - 90) * Math.PI / 180;
          return <line key={i}
            x1={50 + Math.cos(rad) * 43} y1={50 + Math.sin(rad) * 43}
            x2={50 + Math.cos(rad) * 48} y2={50 + Math.sin(rad) * 48}
            stroke="#5a4828" strokeWidth="0.5" />;
        })}
      </g>
      {/* recessed center */}
      <circle cx="50" cy="50" r="35" fill="#c8ba90" opacity="0.6" />
      {/* pointer — dark brown */}
      <g transform={`rotate(${angle} 50 50)`}>
        <rect x="48.5" y="16" width="3" height="20" rx="1" fill="#2a1a08" />
        <circle cx="50" cy="50" r="5.5" fill="#8a7040" />
        <circle cx="49" cy="49" r="2" fill="rgba(255,240,200,0.4)" />
      </g>
      <ellipse cx="42" cy="34" rx="10" ry="4" fill="rgba(255,255,255,0.22)" />
    </svg>
  );
}

// ── 4. Anodized Black Cap — matte black aluminum cap, cream notch indicator
function AnodizedKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`an-body-${id}`} cx="35%" cy="28%" r="72%">
          <stop offset="0%" stopColor="#2a2820" />
          <stop offset="60%" stopColor="#0e0e0c" />
          <stop offset="100%" stopColor="#030302" />
        </radialGradient>
        <radialGradient id={`an-top-${id}`} cx="38%" cy="32%" r="68%">
          <stop offset="0%" stopColor="#3a3830" />
          <stop offset="100%" stopColor="#0a0a08" />
        </radialGradient>
      </defs>
      <ellipse cx="50" cy="54" rx="47" ry="44" fill="rgba(0,0,0,0.6)" />
      <circle cx="50" cy="50" r="48" fill={`url(#an-body-${id})`} />
      {/* precision knurl — very fine */}
      <g opacity="0.5">
        {Array.from({ length: 80 }).map((_, i) => {
          const a = (i / 80) * 360;
          const rad = (a - 90) * Math.PI / 180;
          return <line key={i}
            x1={50 + Math.cos(rad) * 42} y1={50 + Math.sin(rad) * 42}
            x2={50 + Math.cos(rad) * 48} y2={50 + Math.sin(rad) * 48}
            stroke={i % 2 === 0 ? '#3a3830' : '#000'} strokeWidth="0.5" />;
        })}
      </g>
      {/* cap */}
      <circle cx="50" cy="50" r="36" fill={`url(#an-top-${id})`} />
      <ellipse cx="43" cy="37" rx="10" ry="3.5" fill="rgba(255,255,255,0.06)" />
      {/* cream indicator notch */}
      <g transform={`rotate(${angle} 50 50)`}>
        <rect x="48.5" y="16" width="3" height="18" rx="1.5" fill="#f0e8d0" />
        <circle cx="50" cy="50" r="5" fill="#0e0e0c" />
        <circle cx="49" cy="49" r="1.5" fill="rgba(255,255,255,0.12)" />
      </g>
    </svg>
  );
}

// ── 5. Sifam/Marshall style — cylindrical, deep knurl, amber/yellow indicator line on side
function SifamKnob({ size, angle }) {
  const id = React.useId();
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <defs>
        <radialGradient id={`sf-body-${id}`} cx="38%" cy="30%" r="74%">
          <stop offset="0%" stopColor="#4a4840" />
          <stop offset="45%" stopColor="#1a1814" />
          <stop offset="100%" stopColor="#050403" />
        </radialGradient>
        <radialGradient id={`sf-top-${id}`} cx="40%" cy="32%" r="65%">
          <stop offset="0%" stopColor="#2a2820" />
          <stop offset="100%" stopColor="#050403" />
        </radialGradient>
      </defs>
      <ellipse cx="50" cy="56" rx="47" ry="44" fill="rgba(0,0,0,0.5)" />
      <circle cx="50" cy="50" r="48" fill={`url(#sf-body-${id})`} />
      {/* deep knurl — chunky */}
      <g opacity="0.6">
        {Array.from({ length: 36 }).map((_, i) => {
          const a = (i / 36) * 360;
          const rad = (a - 90) * Math.PI / 180;
          return <line key={i}
            x1={50 + Math.cos(rad) * 38} y1={50 + Math.sin(rad) * 38}
            x2={50 + Math.cos(rad) * 48} y2={50 + Math.sin(rad) * 48}
            stroke="#000" strokeWidth="1.6" />;
        })}
      </g>
      {/* inner cylinder body */}
      <circle cx="50" cy="50" r="38" fill={`url(#sf-top-${id})`} />
      <circle cx="50" cy="50" r="38" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="0.5" />
      {/* amber indicator line on cylinder side */}
      <g transform={`rotate(${angle} 50 50)`}>
        <rect x="48.8" y="13" width="2.4" height="26" rx="1" fill="#e8a020" />
        <rect x="49.2" y="13" width="1.6" height="26" rx="0.8" fill="#ffcc60" opacity="0.7" />
        <circle cx="50" cy="50" r="6" fill="#0a0806" />
        <circle cx="49" cy="49" r="2" fill="rgba(255,180,50,0.2)" />
      </g>
      <ellipse cx="42" cy="35" rx="9" ry="3.5" fill="rgba(255,255,255,0.06)" />
    </svg>
  );
}

Object.assign(window, { Knob });