// FRZN — thermal SVG imagery (technical placeholders, not model shots)

const thermalGradient = (id) => (
  <defs>
    <linearGradient id={id} x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stopColor="#1E3A8A" />
      <stop offset="30%" stopColor="#0891B2" />
      <stop offset="55%" stopColor="#CA8A04" />
      <stop offset="80%" stopColor="#EA580C" />
      <stop offset="100%" stopColor="#DC2626" />
    </linearGradient>
    <linearGradient id={id + "-cool"} x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stopColor="#0F172A" />
      <stop offset="50%" stopColor="#1E3A8A" />
      <stop offset="100%" stopColor="#0891B2" />
    </linearGradient>
    <radialGradient id={id + "-pelvic"} cx="50%" cy="40%" r="40%">
      <stop offset="0%" stopColor="#EA580C" stopOpacity="0.9" />
      <stop offset="60%" stopColor="#CA8A04" stopOpacity="0.5" />
      <stop offset="100%" stopColor="#0891B2" stopOpacity="0" />
    </radialGradient>
  </defs>
);

const ShortsThermal = () => (
  <svg viewBox="0 0 400 460" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto' }}>
    {thermalGradient('g1')}
    <rect width="400" height="460" fill="url(#g1-cool)" opacity="0.22" />
    {/* Shorts silhouette */}
    <path d="M 90 80 L 310 80 L 330 220 L 300 380 L 220 380 L 200 230 L 180 380 L 100 380 L 70 220 Z" fill="url(#g1)" opacity="0.85" stroke="rgba(255,255,255,0.35)" strokeWidth="1"/>
    {/* Waistband */}
    <rect x="90" y="80" width="220" height="20" fill="rgba(255,255,255,0.08)" />
    <line x1="90" y1="100" x2="310" y2="100" stroke="rgba(255,255,255,0.3)" strokeWidth="0.8" />
    {/* Pelvic heat zone */}
    <ellipse cx="200" cy="170" rx="75" ry="55" fill="url(#g1-pelvic)" />
    {/* Ice insert indicators */}
    <rect x="120" y="130" width="60" height="90" fill="none" stroke="#fff" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
    <rect x="220" y="130" width="60" height="90" fill="none" stroke="#fff" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
    <circle cx="150" cy="175" r="3" fill="#fff" />
    <circle cx="250" cy="175" r="3" fill="#fff" />
    {/* Seams */}
    <line x1="200" y1="100" x2="200" y2="230" stroke="rgba(255,255,255,0.25)" strokeWidth="0.8" strokeDasharray="2 4" />
    {/* Technical labels */}
    <g fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,255,255,0.75)" letterSpacing="1.5">
      <text x="30" y="175">ICE CH. L</text>
      <text x="30" y="190" fontSize="7" opacity="0.6">−18°C</text>
      <line x1="80" y1="172" x2="115" y2="172" stroke="rgba(255,255,255,0.4)" strokeWidth="0.6"/>
      <text x="320" y="175">ICE CH. R</text>
      <text x="320" y="190" fontSize="7" opacity="0.6">−18°C</text>
      <line x1="315" y1="172" x2="285" y2="172" stroke="rgba(255,255,255,0.4)" strokeWidth="0.6"/>
      <text x="30" y="310">UPF 50+</text>
      <text x="300" y="310">210 GSM</text>
      <text x="30" y="445" opacity="0.5">FR-001 · REV 04 · ED. 001</text>
      <text x="280" y="445" opacity="0.5">SCALE 1:2.4</text>
    </g>
    {/* Scale markers */}
    <line x1="20" y1="80" x2="20" y2="380" stroke="rgba(255,255,255,0.25)" strokeWidth="0.5" />
    <line x1="15" y1="80" x2="25" y2="80" stroke="rgba(255,255,255,0.4)" strokeWidth="0.5" />
    <line x1="15" y1="380" x2="25" y2="380" stroke="rgba(255,255,255,0.4)" strokeWidth="0.5" />
  </svg>
);

const TowelThermal = () => (
  <svg viewBox="0 0 400 460" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto' }}>
    {thermalGradient('g2')}
    <rect width="400" height="460" fill="url(#g2-cool)" opacity="0.22" />
    <rect x="60" y="80" width="280" height="300" fill="url(#g2)" opacity="0.75" stroke="rgba(255,255,255,0.35)" strokeWidth="1" />
    {/* terry texture dots */}
    {Array.from({ length: 12 }).map((_, r) => (
      Array.from({ length: 14 }).map((_, c) => (
        <circle key={r+'-'+c} cx={70 + c*20} cy={90 + r*24} r="0.8" fill="rgba(255,255,255,0.15)" />
      ))
    ))}
    {/* 3 bladder zones */}
    <rect x="120" y="120" width="160" height="40" fill="url(#g2-pelvic)" opacity="0.7" />
    <rect x="120" y="210" width="160" height="40" fill="url(#g2-pelvic)" opacity="0.7" />
    <rect x="120" y="300" width="160" height="40" fill="url(#g2-pelvic)" opacity="0.7" />
    <rect x="120" y="120" width="160" height="40" fill="none" stroke="#fff" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
    <rect x="120" y="210" width="160" height="40" fill="none" stroke="#fff" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
    <rect x="120" y="300" width="160" height="40" fill="none" stroke="#fff" strokeOpacity="0.5" strokeWidth="1" strokeDasharray="3 3" />
    <g fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,255,255,0.8)" letterSpacing="1.5">
      <text x="30" y="145">CERV.</text>
      <text x="30" y="235">LUMBAR</text>
      <text x="30" y="325">PELVIC</text>
      <text x="30" y="445" opacity="0.5">FR-002 · 380 GSM · COMO</text>
    </g>
  </svg>
);

const BundleThermal = () => (
  <svg viewBox="0 0 400 460" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto' }}>
    {thermalGradient('g3')}
    <rect width="400" height="460" fill="url(#g3-cool)" opacity="0.22" />
    {/* shorts small */}
    <g transform="translate(20 110) scale(0.42)">
      <path d="M 90 80 L 310 80 L 330 220 L 300 380 L 220 380 L 200 230 L 180 380 L 100 380 L 70 220 Z" fill="url(#g3)" opacity="0.85" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5"/>
    </g>
    {/* towel small */}
    <g transform="translate(200 110) scale(0.4)">
      <rect x="0" y="0" width="380" height="420" fill="url(#g3)" opacity="0.7" stroke="rgba(255,255,255,0.35)" strokeWidth="1.5" />
    </g>
    {/* case at bottom */}
    <rect x="60" y="340" width="280" height="70" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.3)" strokeWidth="1" />
    <rect x="75" y="355" width="50" height="40" fill="url(#g3-pelvic)" stroke="rgba(255,255,255,0.4)" strokeWidth="0.5" />
    <rect x="135" y="355" width="50" height="40" fill="url(#g3-pelvic)" stroke="rgba(255,255,255,0.4)" strokeWidth="0.5" />
    <g fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,255,255,0.8)" letterSpacing="1.5">
      <text x="20" y="90">[01] SHORT</text>
      <text x="205" y="90">[02] TOWEL</text>
      <text x="20" y="335">[03] CASE + 2× ICE</text>
      <text x="20" y="445" opacity="0.5">FR-003 · SYSTEM · SAVE €80</text>
    </g>
  </svg>
);

const AccessoryThermal = () => (
  <svg viewBox="0 0 400 460" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto' }}>
    {thermalGradient('g4')}
    <rect width="400" height="460" fill="url(#g4-cool)" opacity="0.22" />
    <rect x="80" y="120" width="110" height="220" rx="8" fill="url(#g4)" opacity="0.6" stroke="rgba(255,255,255,0.5)" strokeWidth="1" />
    <rect x="210" y="120" width="110" height="220" rx="8" fill="url(#g4)" opacity="0.6" stroke="rgba(255,255,255,0.5)" strokeWidth="1" />
    {/* ice crystals */}
    <g stroke="rgba(255,255,255,0.7)" strokeWidth="0.8">
      <line x1="135" y1="190" x2="135" y2="260" /><line x1="110" y1="225" x2="160" y2="225" />
      <line x1="120" y1="210" x2="150" y2="240" /><line x1="150" y1="210" x2="120" y2="240" />
      <line x1="265" y1="190" x2="265" y2="260" /><line x1="240" y1="225" x2="290" y2="225" />
      <line x1="250" y1="210" x2="280" y2="240" /><line x1="280" y1="210" x2="250" y2="240" />
    </g>
    <g fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,255,255,0.8)" letterSpacing="1.5">
      <text x="80" y="110">PACK A</text><text x="300" y="110">PACK B</text>
      <text x="140" y="370">−18°C · 2 HR</text>
      <text x="20" y="445" opacity="0.5">FR-004 · GEL · SWITZERLAND</text>
    </g>
  </svg>
);

const MechanismDiagram = () => (
  <svg viewBox="0 0 600 450" xmlns="http://www.w3.org/2000/svg" style={{ width: '100%', height: 'auto', display: 'block' }}>
    <defs>
      <linearGradient id="mgrad" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor="#E8542A" stopOpacity="0.7" />
        <stop offset="100%" stopColor="#0891B2" stopOpacity="0.4" />
      </linearGradient>
    </defs>
    {/* 5 layered strips */}
    {[[80,'SHELL','78% Econyl® · 22% elastane'],[140,'HYDROPHOBIC','Sub-layer'],[200,'CHAMBERS','Twin pockets'],[270,'ICE INSERTS','−18 °C · 2h'],[340,'SKIN CONTACT','Lumbar · Pelvic · Cervical']].map(([y, name, desc], i) => (
      <g key={i}>
        <rect x="60" y={y} width="380" height="36" fill={i === 3 ? 'url(#mgrad)' : 'rgba(255,255,255,0.05)'} stroke="rgba(255,255,255,0.25)" strokeWidth="0.6" />
        <text x="75" y={y + 16} fontFamily="JetBrains Mono" fontSize="9" fill="rgba(255,255,255,0.9)" letterSpacing="1.5">0{i+1} · {name}</text>
        <text x="75" y={y + 28} fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,255,255,0.45)" letterSpacing="1">{desc}</text>
        <line x1="450" y1={y + 18} x2="540" y2={y + 18} stroke="rgba(255,255,255,0.25)" strokeWidth="0.5" strokeDasharray="2 3" />
        <text x="545" y={y + 22} fontFamily="JetBrains Mono" fontSize="8" fill="rgba(255,255,255,0.5)">L-{i+1}</text>
      </g>
    ))}
    {/* temperature arrows */}
    <g stroke="#E8542A" strokeWidth="1.2" fill="#E8542A">
      <line x1="30" y1="80" x2="30" y2="376" strokeOpacity="0.6" />
      <polygon points="30,376 26,368 34,368" />
      <text x="10" y="230" fontFamily="JetBrains Mono" fontSize="8" fill="#E8542A" transform="rotate(-90 10 230)" letterSpacing="1.5">THERMAL GRADIENT →</text>
    </g>
  </svg>
);

Object.assign(window, { ShortsThermal, TowelThermal, BundleThermal, AccessoryThermal, MechanismDiagram });
