// Pyrovolt — Inline SVG product visuals (stylised placeholders)

const ChargerHPC = ({ w = 300 }) => (
  <svg viewBox="0 0 400 600" style={{ width: w, height: 'auto', display: 'block' }}>
    <defs>
      <linearGradient id="hpc-body" x1="0" x2="1">
        <stop offset="0" stopColor="#E8E6E0"/>
        <stop offset="0.5" stopColor="#F4F2ED"/>
        <stop offset="1" stopColor="#C9C6BE"/>
      </linearGradient>
      <linearGradient id="hpc-screen" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#0F1012"/>
        <stop offset="1" stopColor="#1E2024"/>
      </linearGradient>
    </defs>
    {/* shadow */}
    <ellipse cx="200" cy="580" rx="150" ry="8" fill="#000" opacity="0.25"/>
    {/* body */}
    <rect x="90" y="30" width="220" height="540" rx="18" fill="url(#hpc-body)"/>
    <rect x="90" y="30" width="220" height="540" rx="18" fill="none" stroke="#A6A39C" strokeWidth="1"/>
    {/* top accent */}
    <rect x="105" y="45" width="190" height="4" rx="2" fill="#A78BFA"/>
    {/* screen */}
    <rect x="115" y="75" width="170" height="220" rx="10" fill="url(#hpc-screen)"/>
    <text x="200" y="130" textAnchor="middle" fill="#A78BFA" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="2">PYROVOLT</text>
    <text x="200" y="185" textAnchor="middle" fill="#F4F2ED" fontFamily="var(--font-display)" fontSize="46" fontWeight="700">350</text>
    <text x="200" y="210" textAnchor="middle" fill="#A6A39C" fontFamily="var(--font-mono)" fontSize="11" letterSpacing="1.5">kW READY</text>
    <rect x="135" y="245" width="130" height="6" rx="3" fill="#2A2A2A"/>
    <rect x="135" y="245" width="90" height="6" rx="3" fill="#A78BFA"/>
    {/* card reader */}
    <rect x="140" y="320" width="120" height="36" rx="6" fill="#1E2024"/>
    <circle cx="200" cy="338" r="8" fill="none" stroke="#A78BFA" strokeWidth="2"/>
    {/* cable holder */}
    <rect x="115" y="380" width="75" height="28" rx="6" fill="#2A2A2A"/>
    <rect x="210" y="380" width="75" height="28" rx="6" fill="#2A2A2A"/>
    {/* plug icons */}
    <circle cx="152" cy="394" r="8" fill="#0A0A0A"/>
    <circle cx="247" cy="394" r="8" fill="#0A0A0A"/>
    {/* cables */}
    <path d="M152 408 Q 120 470 135 560" stroke="#18181B" strokeWidth="10" fill="none" strokeLinecap="round"/>
    <path d="M247 408 Q 280 470 265 560" stroke="#18181B" strokeWidth="10" fill="none" strokeLinecap="round"/>
    {/* base */}
    <rect x="80" y="555" width="240" height="18" rx="4" fill="#18181B"/>
    {/* vents */}
    <rect x="115" y="430" width="170" height="2" fill="#A6A39C" opacity="0.5"/>
    <rect x="115" y="440" width="170" height="2" fill="#A6A39C" opacity="0.5"/>
    <rect x="115" y="450" width="170" height="2" fill="#A6A39C" opacity="0.5"/>
    {/* label */}
    <text x="200" y="520" textAnchor="middle" fill="#6B6963" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="2">PYROVOLT HPC</text>
  </svg>
);

const ChargerDistributed = ({ w = 800 }) => (
  <svg viewBox="0 0 900 500" style={{ width: w, height: 'auto', display: 'block', maxWidth: '100%' }}>
    <defs>
      <linearGradient id="dist-cab" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#2A2A2E"/>
        <stop offset="1" stopColor="#141416"/>
      </linearGradient>
    </defs>
    {/* ground */}
    <rect x="0" y="450" width="900" height="2" fill="#A6A39C" opacity="0.3"/>
    {/* Power cabinet (left) */}
    <rect x="60" y="140" width="180" height="310" rx="6" fill="url(#dist-cab)"/>
    <rect x="60" y="140" width="180" height="310" rx="6" fill="none" stroke="#3A3A3E" strokeWidth="1"/>
    <rect x="75" y="155" width="150" height="4" fill="#A78BFA"/>
    <rect x="80" y="175" width="140" height="80" rx="4" fill="#0A0A0A"/>
    <text x="150" y="210" textAnchor="middle" fill="#A78BFA" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="1.5">POWER CABINET</text>
    <text x="150" y="232" textAnchor="middle" fill="#F4F2ED" fontFamily="var(--font-display)" fontSize="26" fontWeight="700">1.250 kW</text>
    {/* vents */}
    {Array.from({length: 8}).map((_, i) => (
      <rect key={i} x="80" y={275 + i*14} width="140" height="3" rx="1" fill="#0A0A0A"/>
    ))}
    <text x="150" y="440" textAnchor="middle" fill="#6B6963" fontFamily="var(--font-mono)" fontSize="8" letterSpacing="2">PYROVOLT · CORE</text>

    {/* Dispensers */}
    {[380, 540, 700].map((x, i) => (
      <g key={i}>
        {/* dispenser body */}
        <rect x={x} y="220" width="90" height="230" rx="8" fill="#E8E6E0" stroke="#A6A39C"/>
        <rect x={x+6} y="226" width="78" height="4" rx="2" fill="#A78BFA"/>
        <rect x={x+10} y="240" width="70" height="70" rx="4" fill="#0F1012"/>
        <text x={x+45} y="268" textAnchor="middle" fill="#A78BFA" fontFamily="var(--font-mono)" fontSize="7">PYROVOLT</text>
        <text x={x+45} y="290" textAnchor="middle" fill="#F4F2ED" fontFamily="var(--font-display)" fontSize="18" fontWeight="700">{[500, 800, 1000][i]}</text>
        {/* plug */}
        <rect x={x+18} y="330" width="54" height="20" rx="4" fill="#1A1A1A"/>
        <circle cx={x+45} cy="340" r="6" fill="#0A0A0A"/>
        {/* cable to cabinet */}
        <path d={`M ${x+45} 450 Q ${(x+45+150)/2} 470 150 450`} stroke="#A78BFA" strokeWidth="2" fill="none" opacity="0.4" strokeDasharray="4 4"/>
      </g>
    ))}
    {/* labels */}
    <text x="425" y="475" textAnchor="middle" fill="#6B6963" fontFamily="var(--font-mono)" fontSize="9" letterSpacing="1.5">MCS 500 A · CCS2 · CCS2</text>
  </svg>
);

const BESSContainer = ({ w = 400 }) => (
  <svg viewBox="0 0 500 300" style={{ width: w, height: 'auto', display: 'block' }}>
    <defs>
      <linearGradient id="bess-top" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0" stopColor="#F4F2ED"/>
        <stop offset="1" stopColor="#C9C6BE"/>
      </linearGradient>
      <linearGradient id="bess-side" x1="0" x2="1">
        <stop offset="0" stopColor="#D4D1CA"/>
        <stop offset="1" stopColor="#A6A39C"/>
      </linearGradient>
    </defs>
    <ellipse cx="250" cy="278" rx="200" ry="6" fill="#000" opacity="0.25"/>
    {/* container body */}
    <rect x="50" y="80" width="400" height="180" rx="4" fill="url(#bess-top)" stroke="#A6A39C"/>
    {/* accent stripe */}
    <rect x="50" y="100" width="400" height="3" fill="#A78BFA"/>
    {/* corrugations */}
    {Array.from({length: 18}).map((_, i) => (
      <rect key={i} x={62 + i*22} y="110" width="1.5" height="140" fill="#A6A39C" opacity="0.5"/>
    ))}
    {/* door panel */}
    <rect x="320" y="120" width="115" height="130" rx="2" fill="none" stroke="#6B6963" strokeWidth="1"/>
    <rect x="320" y="120" width="55" height="130" rx="2" fill="none" stroke="#6B6963" strokeWidth="1"/>
    {/* handles */}
    <rect x="368" y="180" width="8" height="20" rx="1" fill="#2A2A2A"/>
    <rect x="380" y="180" width="8" height="20" rx="1" fill="#2A2A2A"/>
    {/* corner castings */}
    <rect x="50" y="80" width="22" height="22" fill="#6B6963"/>
    <rect x="428" y="80" width="22" height="22" fill="#6B6963"/>
    <rect x="50" y="238" width="22" height="22" fill="#6B6963"/>
    <rect x="428" y="238" width="22" height="22" fill="#6B6963"/>
    {/* logo */}
    <text x="85" y="155" fill="#0A0A0A" fontFamily="var(--font-display)" fontSize="26" fontWeight="700" letterSpacing="-1">PYROVOLT</text>
    <text x="85" y="178" fill="#6B6963" fontFamily="var(--font-mono)" fontSize="10" letterSpacing="2">BESS · 6,26 MWh</text>
    {/* vents */}
    <g transform="translate(85 200)">
      {Array.from({length: 4}).map((_, i) => (
        <rect key={i} x={i*38} y="0" width="30" height="22" rx="2" fill="#0A0A0A" opacity="0.8"/>
      ))}
    </g>
  </svg>
);

Object.assign(window, { ChargerHPC, ChargerDistributed, BESSContainer });
