/* ─── Service Image Placeholders (500×500 product-shot style) ─────
   One unique stylized SVG per service. Dark base + pineapple accent.
   Designed to read like high-end product photography until real
   images are dropped in.
   ────────────────────────────────────────────────────────────── */

const _IMG_BG_STOPS = (
  <defs>
    <linearGradient id="si-bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stopColor="#1a1a20"/>
      <stop offset="1" stopColor="#0a0a0c"/>
    </linearGradient>
    <pattern id="si-grid" patternUnits="userSpaceOnUse" width="40" height="40">
      <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
    </pattern>
  </defs>
);

/* Common chrome: gradient bg + grid + corner ticks + caption */
function ImgFrame({ children, caption, code }) {
  return (
    <svg viewBox="0 0 500 500" preserveAspectRatio="xMidYMid slice" width="100%" height="100%" style={{display:'block'}}>
      <defs>
        <linearGradient id={`bg-${code}`} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#1a1a20"/>
          <stop offset="1" stopColor="#0a0a0c"/>
        </linearGradient>
        <pattern id={`gr-${code}`} patternUnits="userSpaceOnUse" width="40" height="40">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.04)"/>
        </pattern>
      </defs>
      <rect width="500" height="500" fill={`url(#bg-${code})`}/>
      <rect width="500" height="500" fill={`url(#gr-${code})`}/>
      {children}

      {/* corner ticks */}
      <g stroke="#FFE135" strokeWidth="1.6" fill="none">
        <path d="M 16 16 L 16 32 M 16 16 L 32 16"/>
        <path d="M 484 16 L 484 32 M 484 16 L 468 16"/>
        <path d="M 16 484 L 16 468 M 16 484 L 32 484"/>
        <path d="M 484 484 L 484 468 M 484 484 L 468 484"/>
      </g>

      {/* meta */}
      <g fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2">
        <text x="28" y="478" fill="rgba(255,255,255,0.45)">{code}</text>
        <text x="472" y="478" textAnchor="end" fill="#FFE135">{caption}</text>
      </g>
    </svg>
  );
}

/* 1. Carbon fibre — woven twill */
function ImgCarbon() {
  return (
    <ImgFrame code="HPM-CF-01" caption="3K 2×2 TWILL · 0.3 mm">
      <g transform="translate(70 90)">
        {Array.from({length: 9}).map((_, r) => (
          <g key={r}>
            {Array.from({length: 9}).map((_, c) => {
              const x = c * 40;
              const y = r * 40;
              const lit = (r + c) % 4 < 2;
              return (
                <g key={c} transform={`translate(${x} ${y})`}>
                  <rect width="38" height="38" fill={lit ? '#2a2a2a' : '#1a1a1a'}/>
                  <path d={lit
                    ? "M 0 0 L 38 38 M 0 14 L 24 38 M 14 0 L 38 24"
                    : "M 38 0 L 0 38 M 24 0 L 0 24 M 38 14 L 14 38"}
                    stroke={lit ? '#3a3a3a' : '#252525'} strokeWidth="3" fill="none"/>
                </g>
              );
            })}
          </g>
        ))}
      </g>
      <line x1="70" y1="80" x2="430" y2="80" stroke="#FFE135" strokeDasharray="3 3"/>
    </ImgFrame>
  );
}

/* 2. Rubber gasket — concentric ring + bolt holes */
function ImgRubber() {
  return (
    <ImgFrame code="HPM-RG-04" caption="NBR · SHORE 70A">
      <g transform="translate(250 245)">
        <circle r="170" fill="none" stroke="#1f1f24"/>
        <circle r="150" fill="#2a2a2e"/>
        <circle r="110" fill="#0a0a0c"/>
        <circle r="148" fill="none" stroke="#3a3a3e"/>
        <circle r="112" fill="none" stroke="#3a3a3e"/>
        {/* bolt holes */}
        {Array.from({length: 8}).map((_, i) => {
          const a = (i / 8) * Math.PI * 2;
          return <circle key={i} cx={Math.cos(a)*130} cy={Math.sin(a)*130} r="10" fill="#0a0a0c" stroke="#FFE135" strokeWidth="0.8"/>;
        })}
      </g>
      <g stroke="#FFE135" strokeWidth="1" fill="none" strokeDasharray="2 3">
        <line x1="40" y1="250" x2="80" y2="250"/>
        <line x1="420" y1="250" x2="460" y2="250"/>
      </g>
    </ImgFrame>
  );
}

/* 3. Car mats — quilted diamond pattern */
function ImgCarMat() {
  return (
    <ImgFrame code="HPM-AM-12" caption="EVA · 8 mm">
      <g transform="translate(80 90)">
        <path d="M 0 0 L 340 0 L 340 280 Q 340 320 300 320 L 40 320 Q 0 320 0 280 Z"
              fill="#1a1a1a" stroke="#FFE135" strokeWidth="1.2"/>
        <g transform="translate(8 8)" stroke="rgba(255,255,255,0.08)" fill="none">
          {Array.from({length: 10}).map((_, r) =>
            Array.from({length: 12}).map((_, c) => (
              <path key={`${r}-${c}`} d={`M ${c*28} ${r*28} l 14 14 l 14 -14`} strokeWidth="1"/>
            ))
          )}
        </g>
        <text x="170" y="170" textAnchor="middle" fontFamily="Inter Tight" fontSize="14" fontWeight="700" fill="rgba(255,225,53,0.5)" letterSpacing="6">HPM</text>
      </g>
    </ImgFrame>
  );
}

/* 4. Asbestos gasket — fibrous board with hole pattern */
function ImgAsbestos() {
  return (
    <ImgFrame code="HPM-AG-07" caption="CAF · 2 mm · NON-ASB">
      <g transform="translate(60 60)">
        <rect width="380" height="380" fill="#2a2622"/>
        {/* fibrous texture */}
        <g stroke="rgba(255,255,255,0.08)" strokeWidth="0.6">
          {Array.from({length: 80}).map((_, i) => {
            const x1 = Math.random()*380, y1 = Math.random()*380;
            const x2 = x1 + (Math.random()-0.5)*40;
            const y2 = y1 + (Math.random()-0.5)*40;
            return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}/>;
          })}
        </g>
        {/* cut shape */}
        <g transform="translate(190 190)" stroke="#FFE135" strokeWidth="1.4" fill="none">
          <rect x="-130" y="-90" width="260" height="180" rx="20"/>
          <circle r="50" fill="#0a0a0c"/>
          <circle cx="-100" cy="-60" r="10" fill="#0a0a0c"/>
          <circle cx="100" cy="-60" r="10" fill="#0a0a0c"/>
          <circle cx="-100" cy="60" r="10" fill="#0a0a0c"/>
          <circle cx="100" cy="60" r="10" fill="#0a0a0c"/>
        </g>
      </g>
    </ImgFrame>
  );
}

/* 5. EPS foam — beads */
function ImgEPS() {
  return (
    <ImgFrame code="HPM-EP-22" caption="EPS · 28 kg/m³">
      <g transform="translate(60 60)">
        <rect width="380" height="380" fill="#1f1f24"/>
        {/* beads */}
        {Array.from({length: 90}).map((_, i) => {
          const r = 12 + Math.random()*16;
          const x = 20 + Math.random()*340;
          const y = 20 + Math.random()*340;
          return <circle key={i} cx={x} cy={y} r={r} fill="#2a2a30" stroke="#3a3a40" strokeWidth="0.8"/>;
        })}
        {/* hot-wire cut path */}
        <path d="M 0 280 L 100 200 L 200 240 L 300 140 L 380 200" stroke="#FFE135" strokeWidth="2" fill="none"/>
      </g>
    </ImgFrame>
  );
}

/* 6. Acrylic sheet — layered transparent panes */
function ImgAcrylic() {
  return (
    <ImgFrame code="HPM-AC-09" caption="PMMA · CLEAR · 5 mm">
      <g transform="translate(80 110)">
        <rect width="280" height="280" fill="none" stroke="rgba(255,255,255,0.4)" strokeWidth="1.2"/>
        <rect x="20" y="20" width="280" height="280" fill="rgba(255,225,53,0.07)" stroke="rgba(255,225,53,0.5)" strokeWidth="1.2"/>
        <rect x="40" y="40" width="280" height="280" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.5)" strokeWidth="1.2"/>
        {/* engraved logo */}
        <text x="180" y="180" textAnchor="middle" fontFamily="Inter Tight" fontWeight="700" fontSize="36" fill="rgba(255,225,53,0.6)" letterSpacing="4">HPM</text>
        <line x1="80" y1="180" x2="160" y2="180" stroke="rgba(255,225,53,0.4)"/>
        <line x1="200" y1="180" x2="280" y2="180" stroke="rgba(255,225,53,0.4)"/>
      </g>
    </ImgFrame>
  );
}

/* 7. MDF & Plywood — routed panel */
function ImgMDF() {
  return (
    <ImgFrame code="HPM-MD-15" caption="MDF · 18 mm · ROUTED">
      <g transform="translate(50 50)">
        <rect width="400" height="400" fill="#2a2418" stroke="#3a3424"/>
        {/* wood grain */}
        <g stroke="rgba(255,225,53,0.06)" fill="none">
          {Array.from({length: 18}).map((_, i) => (
            <path key={i} d={`M 0 ${i*24+10} Q 100 ${i*24+5} 200 ${i*24+10} T 400 ${i*24+10}`}/>
          ))}
        </g>
        {/* routed pattern */}
        <g stroke="#FFE135" strokeWidth="2" fill="none">
          <rect x="40" y="40" width="320" height="320"/>
          <rect x="80" y="80" width="240" height="240"/>
          <circle cx="200" cy="200" r="60"/>
        </g>
      </g>
    </ImgFrame>
  );
}

/* 8. Aluminium — extrusion profile */
function ImgAluminium() {
  return (
    <ImgFrame code="HPM-AL-33" caption="6061-T6 · MILLED">
      <g transform="translate(80 100)">
        {/* T-slot extrusion */}
        <g stroke="rgba(255,255,255,0.6)" strokeWidth="1.6" fill="rgba(255,255,255,0.04)">
          <path d="M 40 40 L 100 40 L 100 100 L 160 100 L 160 40 L 220 40 L 220 100 L 280 100 L 280 200 L 220 200 L 220 260 L 160 260 L 160 200 L 100 200 L 100 260 L 40 260 L 40 200 L -20 200 L -20 100 L 40 100 Z" transform="translate(40 20)"/>
        </g>
        {/* shine */}
        <line x1="80" y1="80" x2="280" y2="80" stroke="rgba(255,225,53,0.6)" strokeWidth="2"/>
        {/* dimensions */}
        <g stroke="#FFE135" strokeWidth="0.8" fontFamily="JetBrains Mono" fontSize="10" fill="#FFE135">
          <line x1="40" y1="20" x2="320" y2="20"/>
          <text x="180" y="14" textAnchor="middle">80 × 80 mm</text>
        </g>
      </g>
    </ImgFrame>
  );
}

/* 9. Stainless steel — laser-cut filigree */
function ImgStainless() {
  return (
    <ImgFrame code="HPM-SS-41" caption="SS304 · 3 mm · FIBER LASER">
      <g transform="translate(70 70)">
        <rect width="360" height="360" fill="#1a1a1f" stroke="rgba(255,255,255,0.3)"/>
        {/* perforation lattice */}
        <g fill="#0a0a0c">
          {Array.from({length: 8}).map((_, r) =>
            Array.from({length: 8}).map((_, c) => {
              const cx = 40 + c*40;
              const cy = 40 + r*40;
              const odd = (r+c) % 2;
              return odd
                ? <circle key={`${r}-${c}`} cx={cx} cy={cy} r="10"/>
                : <rect key={`${r}-${c}`} x={cx-10} y={cy-10} width="20" height="20"/>;
            })
          )}
        </g>
        {/* laser path */}
        <line x1="0" y1="180" x2="360" y2="180" stroke="#FFE135" strokeWidth="1.5" strokeDasharray="4 3"/>
        <circle cx="180" cy="180" r="6" fill="#FFE135"/>
      </g>
    </ImgFrame>
  );
}

/* 10. CNC engraving — toolpath spiral */
function ImgCNC() {
  return (
    <ImgFrame code="HPM-CN-08" caption="3-AXIS · ±0.05 mm">
      <g transform="translate(250 250)">
        {/* spiral toolpath */}
        <path d={(() => {
          let d = 'M 0 0';
          for (let t = 0; t < 30; t += 0.1) {
            const r = t * 4;
            const x = r * Math.cos(t);
            const y = r * Math.sin(t);
            d += ` L ${x} ${y}`;
          }
          return d;
        })()} fill="none" stroke="#FFE135" strokeWidth="1.2"/>
        <circle r="6" fill="#FFE135"/>
      </g>
      <g fontFamily="JetBrains Mono" fontSize="10" fill="rgba(255,255,255,0.4)">
        <text x="40" y="50">G01 X120.00 Y0.00 F800</text>
        <text x="40" y="68">G02 X0.00 Y120.00 I-120 J0</text>
      </g>
    </ImgFrame>
  );
}

/* 11. Industrial custom — exploded isometric part */
function ImgIndustrial() {
  return (
    <ImgFrame code="HPM-IC-19" caption="MULTI-MATERIAL ASSY">
      <g transform="translate(250 280)">
        {/* base */}
        <polygon points="-140,40 0,100 140,40 0,-20" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.4)"/>
        <polygon points="-100,-40 0,10 100,-40 0,-90" fill="rgba(255,225,53,0.1)" stroke="#FFE135"/>
        <polygon points="-70,-110 0,-75 70,-110 0,-145" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.5)"/>
        {/* connectors */}
        <line x1="0" y1="-20" x2="0" y2="10" stroke="#FFE135" strokeDasharray="2 3"/>
        <line x1="0" y1="-75" x2="0" y2="-90" stroke="#FFE135" strokeDasharray="2 3"/>
      </g>
      <g fontFamily="JetBrains Mono" fontSize="9" fill="#FFE135" letterSpacing="1">
        <text x="40" y="60">[3] HOUSING · ALU</text>
        <text x="40" y="76" fill="rgba(255,255,255,0.4)">[2] PLATE · CF</text>
        <text x="40" y="92" fill="rgba(255,255,255,0.4)">[1] BASE · SS304</text>
      </g>
    </ImgFrame>
  );
}

const SERVICE_IMAGES = {
  carbon: ImgCarbon,
  rubber: ImgRubber,
  carmat: ImgCarMat,
  asbestos: ImgAsbestos,
  eps: ImgEPS,
  acrylic: ImgAcrylic,
  mdf: ImgMDF,
  aluminium: ImgAluminium,
  stainless: ImgStainless,
  cnc: ImgCNC,
  industrial: ImgIndustrial,
};

Object.assign(window, { SERVICE_IMAGES });
