// AV rig diagram — stylised broadcast/conference setup, drawn as line art.
// Stage with podium + mic, screen behind, line-array speakers L/R,
// camera on a tripod foreground. Sized to fill its container.
//
// Uses currentColor for the strokes plus an --accent override for highlights.

function AVRigDiagram() {
  // Colour pulls: stroke = mist-on-dark; accent = page accent (orange/aqua/etc)
  const stroke = 'rgba(189,204,217,0.55)';
  const strokeDim = 'rgba(189,204,217,0.28)';
  const accent = 'var(--accent)';

  return (
    <svg
      viewBox="0 0 360 200"
      xmlns="http://www.w3.org/2000/svg"
      aria-label="Stylised conference AV rig — speaker on stage, screen behind, line array speakers and broadcast camera"
      style={{ display: 'block' }}
    >
      <defs>
        <pattern id="rig-grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M20 0H0V20" stroke="rgba(189,204,217,0.06)" strokeWidth="1" fill="none" />
        </pattern>
        <linearGradient id="rig-glow" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0" stopColor={accent} stopOpacity="0.0" />
          <stop offset="1" stopColor={accent} stopOpacity="0.18" />
        </linearGradient>
      </defs>

      {/* grid backdrop */}
      <rect x="0" y="0" width="360" height="200" fill="url(#rig-grid)" />

      {/* floor perspective lines */}
      <g stroke={strokeDim} strokeWidth="1" fill="none">
        <path d="M0 175 L360 175" />
        <path d="M40 200 L160 175" />
        <path d="M120 200 L170 175" />
        <path d="M240 200 L190 175" />
        <path d="M320 200 L200 175" />
      </g>

      {/* SCREEN behind stage */}
      <g>
        <rect x="100" y="30" width="160" height="78" rx="2"
              fill="rgba(189,204,217,0.04)" stroke={stroke} strokeWidth="1.2" />
        {/* slide content */}
        <rect x="112" y="44" width="58" height="6" fill={accent} rx="1" />
        <rect x="112" y="56" width="100" height="3" fill={stroke} rx="1" />
        <rect x="112" y="62" width="82" height="3" fill={stroke} rx="1" />
        <rect x="112" y="68" width="92" height="3" fill={stroke} rx="1" />
        {/* logo block */}
        <rect x="222" y="86" width="26" height="14" rx="2" fill="none" stroke={stroke} strokeWidth="1" />
        <text x="235" y="96" textAnchor="middle"
              fontFamily="Poppins, system-ui" fontWeight="800" fontSize="6"
              fill={stroke} letterSpacing="0.5">LOGO</text>
        {/* screen stand */}
        <path d="M170 108 L180 130 M190 108 L180 130" stroke={stroke} strokeWidth="1" fill="none" />
        <rect x="172" y="130" width="16" height="2" fill={stroke} />
      </g>

      {/* PODIUM + SPEAKER silhouette (centre foreground) */}
      <g transform="translate(160,108)">
        {/* speaker silhouette */}
        <g fill={accent}>
          <circle cx="20" cy="6" r="6" />
          <path d="M8 24 Q20 12 32 24 L32 42 L8 42 Z" />
        </g>
        {/* podium */}
        <rect x="6" y="42" width="28" height="22" fill="none" stroke={stroke} strokeWidth="1.2" />
        <line x1="6" y1="50" x2="34" y2="50" stroke={stroke} strokeWidth="1" />
        {/* mic on flexible neck */}
        <path d="M30 36 Q40 30 38 22" fill="none" stroke={stroke} strokeWidth="1.2" />
        <rect x="35" y="16" width="6" height="8" rx="2" fill={accent} />
      </g>

      {/* LINE-ARRAY SPEAKER LEFT */}
      <g transform="translate(50,42)">
        <rect x="0" y="0" width="22" height="14" rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
        <rect x="0" y="16" width="22" height="14" rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
        <rect x="0" y="32" width="22" height="14" rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
        <circle cx="6" cy="7" r="3" fill={stroke} opacity="0.6" />
        <circle cx="16" cy="7" r="3" fill={stroke} opacity="0.6" />
        <circle cx="6" cy="23" r="3" fill={stroke} opacity="0.6" />
        <circle cx="16" cy="23" r="3" fill={stroke} opacity="0.6" />
        <circle cx="6" cy="39" r="3" fill={stroke} opacity="0.6" />
        <circle cx="16" cy="39" r="3" fill={stroke} opacity="0.6" />
        {/* hang point */}
        <line x1="11" y1="0" x2="11" y2="-12" stroke={stroke} strokeWidth="0.8" />
        <circle cx="11" cy="-12" r="2" fill="none" stroke={stroke} strokeWidth="0.8" />
        {/* sound waves */}
        <path d="M28 23 Q40 18 50 22 M30 30 Q44 26 56 30 M28 16 Q40 12 50 14"
              stroke={accent} strokeWidth="1" fill="none" opacity="0.8" />
      </g>

      {/* LINE-ARRAY SPEAKER RIGHT (mirror) */}
      <g transform="translate(288,42)">
        <rect x="0" y="0" width="22" height="14" rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
        <rect x="0" y="16" width="22" height="14" rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
        <rect x="0" y="32" width="22" height="14" rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
        <circle cx="6" cy="7" r="3" fill={stroke} opacity="0.6" />
        <circle cx="16" cy="7" r="3" fill={stroke} opacity="0.6" />
        <circle cx="6" cy="23" r="3" fill={stroke} opacity="0.6" />
        <circle cx="16" cy="23" r="3" fill={stroke} opacity="0.6" />
        <circle cx="6" cy="39" r="3" fill={stroke} opacity="0.6" />
        <circle cx="16" cy="39" r="3" fill={stroke} opacity="0.6" />
        <line x1="11" y1="0" x2="11" y2="-12" stroke={stroke} strokeWidth="0.8" />
        <circle cx="11" cy="-12" r="2" fill="none" stroke={stroke} strokeWidth="0.8" />
        <path d="M-6 23 Q-18 18 -28 22 M-8 30 Q-22 26 -34 30 M-6 16 Q-18 12 -28 14"
              stroke={accent} strokeWidth="1" fill="none" opacity="0.8" />
      </g>

      {/* CAMERA front-left, on tripod */}
      <g transform="translate(28,128)">
        {/* tripod */}
        <path d="M14 14 L4 40 M14 14 L24 40 M14 14 L14 40"
              stroke={stroke} strokeWidth="1" fill="none" />
        {/* camera body */}
        <rect x="2" y="2" width="22" height="14" rx="1" fill={accent} opacity="0.92" />
        {/* lens */}
        <rect x="24" y="6" width="10" height="6" rx="1" fill="none" stroke={stroke} strokeWidth="1" />
        <circle cx="29" cy="9" r="1.5" fill="#000" />
        {/* viewfinder */}
        <rect x="0" y="0" width="6" height="4" fill="none" stroke={stroke} strokeWidth="0.8" />
        {/* REC light */}
        <circle cx="20" cy="6" r="1.4" fill="#ff3b30" />
        {/* tally beam to stage */}
        <path d="M34 8 L150 70" stroke={accent} strokeWidth="0.6" strokeDasharray="2 3" opacity="0.6" />
      </g>

      {/* SECOND CAMERA front-right */}
      <g transform="translate(296,138)">
        <path d="M14 14 L4 40 M14 14 L24 40 M14 14 L14 40"
              stroke={stroke} strokeWidth="1" fill="none" />
        <rect x="2" y="2" width="22" height="14" rx="1" fill="none" stroke={stroke} strokeWidth="1.2" />
        <rect x="-8" y="6" width="10" height="6" rx="1" fill="none" stroke={stroke} strokeWidth="1" />
        <circle cx="-3" cy="9" r="1.5" fill="#000" />
        <path d="M-8 9 L-130 70" stroke={accent} strokeWidth="0.5" strokeDasharray="2 3" opacity="0.4" />
      </g>

      {/* LIVE OUTPUT badge */}
      <g transform="translate(254,12)">
        <rect x="0" y="0" width="92" height="16" rx="8" fill="rgba(0,0,0,0.4)"
              stroke="rgba(255,255,255,0.18)" strokeWidth="0.8" />
        <circle cx="10" cy="8" r="3" fill="#ff3b30" />
        <circle cx="10" cy="8" r="5" fill="none" stroke="#ff3b30" strokeOpacity="0.5" strokeWidth="0.8">
          <animate attributeName="r" values="3.5;6;3.5" dur="1.6s" repeatCount="indefinite" />
          <animate attributeName="stroke-opacity" values="0.6;0;0.6" dur="1.6s" repeatCount="indefinite" />
        </circle>
        <text x="20" y="11.5" fontFamily="Poppins, system-ui" fontWeight="700" fontSize="7"
              letterSpacing="1.4" fill="#fff">
          LIVE · MULTI-CAM
        </text>
      </g>

      {/* CH labels for fun (broadcast vibe) */}
      <g fontFamily="ui-monospace, Menlo, monospace" fontSize="6" fill={strokeDim}>
        <text x="50" y="100">CH-01 · L</text>
        <text x="288" y="100">CH-02 · R</text>
        <text x="28" y="178">CAM-A</text>
        <text x="278" y="188">CAM-B</text>
      </g>
    </svg>
  );
}

window.AVRigDiagram = AVRigDiagram;