// product-art.jsx — Technical SVG illustrations for each Lonetti product.
// Engineering-schematic style: thin strokes, dimension lines, tick marks.
// Color comes from currentColor on the parent so they adapt to dark/light surfaces.

function ProverTankArt({ size = 220, accent = "var(--red)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 220 220" fill="none" aria-hidden="true">
      {/* Dimension tick — top */}
      <g stroke="currentColor" strokeWidth="1" opacity="0.4">
        <line x1="60" y1="22" x2="60" y2="32"/>
        <line x1="160" y1="22" x2="160" y2="32"/>
        <line x1="60" y1="27" x2="160" y2="27"/>
        <polyline points="64 25 60 27 64 29" />
        <polyline points="156 25 160 27 156 29" />
      </g>
      <text x="110" y="20" textAnchor="middle" fontSize="9" fill="currentColor" opacity="0.6"
        fontFamily="var(--f-mono)" letterSpacing="0.1em">Ø 1,000 mm</text>

      {/* Top cone / neck */}
      <path d="M 70 50 L 110 35 L 150 50 L 150 60 L 70 60 Z" stroke="currentColor" strokeWidth="1.4" />
      {/* Top opening with sight glass column */}
      <rect x="104" y="20" width="12" height="20" stroke="currentColor" strokeWidth="1.4" />
      <line x1="110" y1="20" x2="110" y2="40" stroke={accent} strokeWidth="1.4" />
      <line x1="105" y1="25" x2="115" y2="25" stroke={accent} strokeWidth="1" />
      <line x1="105" y1="30" x2="115" y2="30" stroke={accent} strokeWidth="1" />
      <line x1="105" y1="35" x2="115" y2="35" stroke={accent} strokeWidth="1" />

      {/* Body */}
      <rect x="55" y="60" width="110" height="110" stroke="currentColor" strokeWidth="1.6" />
      {/* Hatch ID plate */}
      <rect x="125" y="80" width="28" height="14" stroke="currentColor" strokeWidth="1" opacity="0.6"/>
      <text x="139" y="90" textAnchor="middle" fontSize="6" fill="currentColor" opacity="0.6" fontFamily="var(--f-mono)">OIML R117</text>

      {/* Volume markings on left side */}
      <g stroke="currentColor" strokeWidth="1" opacity="0.5">
        <line x1="55" y1="80" x2="63" y2="80"/>
        <line x1="55" y1="100" x2="68" y2="100"/>
        <line x1="55" y1="120" x2="63" y2="120"/>
        <line x1="55" y1="140" x2="68" y2="140"/>
        <line x1="55" y1="160" x2="63" y2="160"/>
      </g>

      {/* Drain valve at bottom */}
      <path d="M 100 170 L 100 180 L 95 180 L 95 192 L 125 192 L 125 180 L 120 180 L 120 170" stroke="currentColor" strokeWidth="1.4"/>
      <rect x="108" y="184" width="4" height="6" fill={accent}/>

      {/* Legs */}
      <line x1="65" y1="170" x2="65" y2="200" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="155" y1="170" x2="155" y2="200" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="40" y1="200" x2="180" y2="200" stroke="currentColor" strokeWidth="1.4"/>

      {/* Dimension — right side */}
      <g stroke="currentColor" strokeWidth="1" opacity="0.4">
        <line x1="190" y1="60" x2="200" y2="60"/>
        <line x1="190" y1="170" x2="200" y2="170"/>
        <line x1="195" y1="60" x2="195" y2="170"/>
        <polyline points="193 64 195 60 197 64" />
        <polyline points="193 166 195 170 197 166" />
      </g>
    </svg>
  );
}

function TestMeasureArt({ size = 220, accent = "var(--red)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 220 220" fill="none" aria-hidden="true">
      {/* Pour spout */}
      <path d="M 70 65 L 90 50 L 105 55 L 105 75 L 70 75 Z" stroke="currentColor" strokeWidth="1.4"/>
      {/* Body */}
      <path d="M 60 75 L 60 175 Q 60 188 73 188 L 167 188 Q 180 188 180 175 L 180 75 Z" stroke="currentColor" strokeWidth="1.6"/>
      {/* Top rim */}
      <line x1="60" y1="75" x2="180" y2="75" stroke="currentColor" strokeWidth="1.4"/>
      {/* Handle */}
      <path d="M 180 90 Q 205 95 205 130 Q 205 165 180 170" stroke="currentColor" strokeWidth="1.6" fill="none"/>
      <rect x="178" y="86" width="6" height="10" stroke="currentColor" strokeWidth="1.2"/>
      <rect x="178" y="166" width="6" height="10" stroke="currentColor" strokeWidth="1.2"/>

      {/* Sight gauge */}
      <rect x="125" y="90" width="14" height="80" stroke={accent} strokeWidth="1.4"/>
      <g stroke={accent} strokeWidth="1">
        <line x1="125" y1="105" x2="139" y2="105"/>
        <line x1="125" y1="125" x2="139" y2="125"/>
        <line x1="125" y1="145" x2="139" y2="145"/>
      </g>
      <line x1="125" y1="115" x2="139" y2="115" stroke={accent} strokeWidth="2.5"/>

      {/* Capacity label */}
      <text x="85" y="135" fontSize="20" fontFamily="var(--f-display)" fontWeight="700" fill="currentColor" opacity="0.6">20L</text>

      {/* Dimensions */}
      <g stroke="currentColor" strokeWidth="1" opacity="0.4">
        <line x1="60" y1="200" x2="180" y2="200"/>
        <line x1="60" y1="196" x2="60" y2="204"/>
        <line x1="180" y1="196" x2="180" y2="204"/>
      </g>
      <text x="120" y="212" textAnchor="middle" fontSize="9" fill="currentColor" opacity="0.6" fontFamily="var(--f-mono)" letterSpacing="0.1em">320 mm</text>
    </svg>
  );
}

function WaterDrawArt({ size = 220, accent = "var(--red)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 220 220" fill="none" aria-hidden="true">
      {/* Pipe prover (horizontal long pipe) */}
      <rect x="20" y="80" width="140" height="30" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="20" y1="95" x2="160" y2="95" stroke="currentColor" strokeWidth="1" strokeDasharray="3 2" opacity="0.5"/>
      {/* Detector switches */}
      <g stroke={accent} strokeWidth="1.6">
        <line x1="50" y1="72" x2="50" y2="80"/>
        <circle cx="50" cy="68" r="3" fill={accent}/>
        <line x1="130" y1="72" x2="130" y2="80"/>
        <circle cx="130" cy="68" r="3" fill={accent}/>
      </g>
      <text x="50" y="62" textAnchor="middle" fontSize="7" fill="currentColor" opacity="0.6" fontFamily="var(--f-mono)">D1</text>
      <text x="130" y="62" textAnchor="middle" fontSize="7" fill="currentColor" opacity="0.6" fontFamily="var(--f-mono)">D2</text>

      {/* Flow arrow */}
      <g stroke={accent} strokeWidth="1.6" fill="none">
        <line x1="35" y1="95" x2="55" y2="95"/>
        <polyline points="50 91 55 95 50 99"/>
      </g>

      {/* Right side: connecting pipe down to test measure */}
      <path d="M 160 95 L 175 95 L 175 145" stroke="currentColor" strokeWidth="1.6"/>
      {/* Valve symbol */}
      <g stroke="currentColor" strokeWidth="1.4" fill="none">
        <polygon points="170 120 180 115 180 125 170 130" />
      </g>

      {/* Test measure receiving */}
      <path d="M 145 145 L 205 145 L 205 195 Q 205 200 200 200 L 150 200 Q 145 200 145 195 Z" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="145" y1="145" x2="205" y2="145" stroke="currentColor" strokeWidth="1.4"/>
      {/* Liquid level inside */}
      <line x1="148" y1="170" x2="202" y2="170" stroke={accent} strokeWidth="1.6"/>
      <rect x="148" y="170" width="54" height="27" fill={accent} opacity="0.08"/>

      {/* Pump on left */}
      <circle cx="30" cy="150" r="14" stroke="currentColor" strokeWidth="1.6"/>
      <text x="30" y="153" textAnchor="middle" fontSize="10" fill="currentColor" opacity="0.7" fontFamily="var(--f-mono)">P</text>
      <line x1="30" y1="136" x2="30" y2="95" stroke="currentColor" strokeWidth="1.6"/>

      {/* Labels */}
      <text x="90" y="135" textAnchor="middle" fontSize="9" fill="currentColor" opacity="0.5" fontFamily="var(--f-mono)" letterSpacing="0.08em">PIPE PROVER</text>
      <text x="175" y="218" textAnchor="middle" fontSize="9" fill="currentColor" opacity="0.5" fontFamily="var(--f-mono)" letterSpacing="0.08em">REF VESSEL</text>
    </svg>
  );
}

function TankerTowerArt({ size = 220, accent = "var(--red)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 220 220" fill="none" aria-hidden="true">
      {/* Tower structure — 3 tiers */}
      <g stroke="currentColor" strokeWidth="1.4">
        {[0, 1, 2].map((i) => (
          <g key={i}>
            <rect x="80" y={40 + i * 42} width="80" height="32" />
            <line x1="80" y1={40 + i * 42 + 6} x2="160" y2={40 + i * 42 + 6} opacity="0.6"/>
            {/* sight gauge */}
            <rect x="146" y={40 + i * 42 + 6} width="8" height="22" stroke={accent} strokeWidth="1.2"/>
            <line x1="146" y1={40 + i * 42 + 12} x2="154" y2={40 + i * 42 + 12} stroke={accent} strokeWidth="0.8"/>
            <line x1="146" y1={40 + i * 42 + 18} x2="154" y2={40 + i * 42 + 18} stroke={accent} strokeWidth="0.8"/>
            <line x1="146" y1={40 + i * 42 + 24} x2="154" y2={40 + i * 42 + 24} stroke={accent} strokeWidth="0.8"/>
            {/* capacity label */}
            <text x="92" y={40 + i * 42 + 22} fontSize="10" fontFamily="var(--f-mono)" fill="currentColor" opacity="0.65">{[5000, 2000, 500][i]}L</text>
            {/* drain */}
            <line x1="90" y1={40 + i * 42 + 32} x2="90" y2={40 + i * 42 + 38} />
            <rect x="87" y={40 + i * 42 + 38} width="6" height="4" fill={accent}/>
          </g>
        ))}
      </g>

      {/* Side scaffolding columns */}
      <line x1="70" y1="30" x2="70" y2="180" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="170" y1="30" x2="170" y2="180" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="60" y1="30" x2="180" y2="30" stroke="currentColor" strokeWidth="1.4"/>
      {/* Stairs/ladder on right */}
      <g stroke="currentColor" strokeWidth="1" opacity="0.6">
        {[0,1,2,3,4,5,6,7,8,9,10].map((i) => (
          <line key={i} x1="170" y1={40 + i * 14} x2="180" y2={40 + i * 14} />
        ))}
        <line x1="180" y1="30" x2="180" y2="180" />
      </g>

      {/* Tanker truck below */}
      <rect x="20" y="180" width="80" height="22" rx="3" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="32" cy="205" r="6" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="88" cy="205" r="6" stroke="currentColor" strokeWidth="1.4"/>
      {/* Truck cab */}
      <path d="M 100 188 L 110 188 L 115 196 L 115 202 L 100 202 Z" stroke="currentColor" strokeWidth="1.4"/>

      {/* Ground line */}
      <line x1="10" y1="212" x2="210" y2="212" stroke="currentColor" strokeWidth="1" opacity="0.4"/>
    </svg>
  );
}

function TestBenchArt({ size = 220, accent = "var(--red)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 220 220" fill="none" aria-hidden="true">
      {/* Bench surface */}
      <rect x="20" y="120" width="180" height="14" stroke="currentColor" strokeWidth="1.6"/>
      <line x1="20" y1="120" x2="200" y2="120" stroke="currentColor" strokeWidth="1.4"/>
      {/* Legs */}
      <rect x="30" y="134" width="8" height="60" stroke="currentColor" strokeWidth="1.4"/>
      <rect x="182" y="134" width="8" height="60" stroke="currentColor" strokeWidth="1.4"/>
      <line x1="34" y1="194" x2="186" y2="194" stroke="currentColor" strokeWidth="1.4"/>

      {/* Cross-brace */}
      <line x1="38" y1="180" x2="182" y2="180" stroke="currentColor" strokeWidth="1"/>

      {/* Flow loop — pipes coming out the back */}
      <path d="M 50 120 L 50 60 L 100 60" stroke="currentColor" strokeWidth="1.6" fill="none"/>
      <path d="M 170 120 L 170 60 L 120 60" stroke="currentColor" strokeWidth="1.6" fill="none"/>

      {/* Flowmeter under test (center) */}
      <rect x="92" y="46" width="36" height="28" stroke={accent} strokeWidth="1.8"/>
      <circle cx="110" cy="60" r="6" stroke={accent} strokeWidth="1.4"/>
      <line x1="110" y1="55" x2="113" y2="62" stroke={accent} strokeWidth="1.4"/>
      <text x="110" y="86" textAnchor="middle" fontSize="8" fill="currentColor" opacity="0.6" fontFamily="var(--f-mono)" letterSpacing="0.08em">UNIT UNDER TEST</text>

      {/* Pump on left */}
      <circle cx="35" cy="100" r="11" stroke="currentColor" strokeWidth="1.4"/>
      <text x="35" y="103" textAnchor="middle" fontSize="9" fill="currentColor" opacity="0.7" fontFamily="var(--f-mono)">P</text>

      {/* Reference measure on right of bench */}
      <path d="M 142 110 L 142 90 L 162 90 L 162 110 Z" stroke="currentColor" strokeWidth="1.4"/>
      <line x1="146" y1="100" x2="158" y2="100" stroke={accent} strokeWidth="1.4"/>

      {/* Control panel on left of bench */}
      <rect x="30" y="86" width="34" height="34" stroke="currentColor" strokeWidth="1.4"/>
      <g fill={accent}>
        <circle cx="38" cy="94" r="2"/>
        <circle cx="46" cy="94" r="2"/>
        <circle cx="54" cy="94" r="2"/>
      </g>
      <line x1="34" y1="102" x2="60" y2="102" stroke="currentColor" strokeWidth="0.8" opacity="0.5"/>
      <rect x="34" y="106" width="26" height="10" stroke="currentColor" strokeWidth="0.8" opacity="0.5"/>
    </svg>
  );
}

function MinilabArt({ size = 220, accent = "var(--red)" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 220 220" fill="none" aria-hidden="true">
      {/* Van body */}
      <path d="M 30 100 L 30 150 L 50 150 L 55 162 L 80 162 L 85 150 L 145 150 L 150 162 L 175 162 L 180 150 L 195 150 L 195 110 L 175 100 L 30 100 Z"
        stroke="currentColor" strokeWidth="1.6"/>
      {/* Windscreen */}
      <path d="M 175 100 L 195 110 L 195 125 L 165 125 Z" stroke="currentColor" strokeWidth="1.4" fill="currentColor" fillOpacity="0.05"/>
      {/* Side window */}
      <rect x="40" y="108" width="20" height="14" stroke="currentColor" strokeWidth="1.2" fill="currentColor" fillOpacity="0.05"/>

      {/* Door */}
      <line x1="100" y1="100" x2="100" y2="150" stroke="currentColor" strokeWidth="1.2" opacity="0.6"/>
      <circle cx="115" cy="130" r="1.5" fill="currentColor" opacity="0.6"/>

      {/* MINILAB logo on side */}
      <rect x="115" y="115" width="40" height="14" stroke={accent} strokeWidth="1.2" fill={accent} fillOpacity="0.06"/>
      <text x="135" y="125" textAnchor="middle" fontSize="9" fill={accent} fontFamily="var(--f-display)" fontWeight="700" letterSpacing="0.1em">MINILAB®</text>

      {/* Cutaway top — labs equipment visible */}
      <path d="M 35 60 L 165 60 L 165 100 L 35 100 Z" stroke="currentColor" strokeWidth="1.2" strokeDasharray="3 2" opacity="0.5" fill="none"/>
      {/* Small tank inside */}
      <rect x="45" y="70" width="22" height="28" stroke="currentColor" strokeWidth="1.2" opacity="0.7"/>
      <line x1="56" y1="76" x2="56" y2="78" stroke={accent} strokeWidth="1.2"/>
      {/* Workbench */}
      <line x1="78" y1="92" x2="160" y2="92" stroke="currentColor" strokeWidth="1.2" opacity="0.7"/>
      <line x1="82" y1="92" x2="82" y2="100" stroke="currentColor" strokeWidth="1" opacity="0.5"/>
      <line x1="156" y1="92" x2="156" y2="100" stroke="currentColor" strokeWidth="1" opacity="0.5"/>
      {/* Equipment on bench */}
      <rect x="90" y="80" width="14" height="12" stroke="currentColor" strokeWidth="1" opacity="0.7"/>
      <circle cx="115" cy="86" r="4" stroke="currentColor" strokeWidth="1" opacity="0.7"/>
      <rect x="128" y="78" width="22" height="14" stroke="currentColor" strokeWidth="1" opacity="0.7"/>
      <line x1="132" y1="83" x2="148" y2="83" stroke={accent} strokeWidth="0.8"/>
      <line x1="132" y1="87" x2="148" y2="87" stroke={accent} strokeWidth="0.8"/>

      {/* Wheels */}
      <circle cx="65" cy="162" r="10" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="65" cy="162" r="3" stroke="currentColor" strokeWidth="1.2"/>
      <circle cx="162" cy="162" r="10" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="162" cy="162" r="3" stroke="currentColor" strokeWidth="1.2"/>

      {/* Ground */}
      <line x1="10" y1="180" x2="210" y2="180" stroke="currentColor" strokeWidth="1" opacity="0.4"/>
    </svg>
  );
}

Object.assign(window, {
  ProverTankArt, TestMeasureArt, WaterDrawArt,
  TankerTowerArt, TestBenchArt, MinilabArt,
});
