/* Tidewell — minimal SVG glyphs for product cards. Monochrome, line-based. */

function ProductIcon({ name }) {
  const stroke = "currentColor";
  const sw = 1.25;
  const common = { fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "cover-auto":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <rect x="6" y="14" width="68" height="26" rx="2" />
          <path d="M6 22 L74 22" />
          <circle cx="68" cy="10" r="4" />
          <path d="M10 36 H70" strokeDasharray="2 3" />
          <path d="M6 14 L14 8 H66 L74 14" />
        </svg>
      );
    case "cover-manual":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <ellipse cx="14" cy="25" rx="6" ry="10" />
          <path d="M14 15 H66" />
          <path d="M14 35 H66" />
          <ellipse cx="66" cy="25" rx="3" ry="6" />
          <path d="M20 20 H60 M20 30 H60" opacity="0.5" />
        </svg>
      );
    case "solar":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <rect x="10" y="8" width="60" height="34" rx="2" />
          <path d="M10 18 H70 M10 28 H70 M10 38 H70" />
          <path d="M22 8 V42 M34 8 V42 M46 8 V42 M58 8 V42" />
        </svg>
      );
    case "salt":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <path d="M20 12 L20 38" />
          <path d="M60 12 L60 38" />
          <rect x="28" y="16" width="24" height="18" rx="1" />
          <path d="M32 20 V30 M40 20 V30 M48 20 V30" />
          <circle cx="14" cy="25" r="2" />
          <circle cx="66" cy="25" r="2" />
        </svg>
      );
    case "shower":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <path d="M40 6 V20" />
          <path d="M28 22 H52 L48 28 H32 Z" />
          <path d="M34 32 V40 M40 32 V42 M46 32 V40" />
          <path d="M20 44 H60" />
        </svg>
      );
    case "heatpump":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <rect x="14" y="10" width="52" height="30" rx="2" />
          <circle cx="40" cy="25" r="9" />
          <path d="M40 16 L40 34 M31 25 L49 25 M33.5 18.5 L46.5 31.5 M46.5 18.5 L33.5 31.5" opacity="0.4" />
          <circle cx="40" cy="25" r="2" fill={stroke} stroke="none" />
        </svg>
      );
    case "light":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <circle cx="40" cy="25" r="12" />
          <circle cx="40" cy="25" r="7" />
          <path d="M40 5 V10 M40 40 V45 M20 25 H25 M55 25 H60 M25 10 L29 14 M51 36 L55 40 M25 40 L29 36 M51 14 L55 10" opacity="0.5" />
        </svg>
      );
    case "filter":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <path d="M28 10 H52 V14 Q52 38 40 42 Q28 38 28 14 Z" />
          <path d="M28 18 H52 M28 26 H52 M28 34 H52" opacity="0.5" />
        </svg>
      );
    case "cleaner":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <path d="M16 32 Q16 18 30 18 H50 Q64 18 64 32 Z" />
          <circle cx="40" cy="26" r="5" />
          <circle cx="26" cy="32" r="2.5" />
          <circle cx="54" cy="32" r="2.5" />
        </svg>
      );
    case "fitting":
      return (
        <svg viewBox="0 0 80 50" {...common}>
          <circle cx="40" cy="25" r="11" />
          <circle cx="40" cy="25" r="6" />
          <path d="M40 14 L40 8 M40 36 L40 42 M29 25 L23 25 M51 25 L57 25" />
          <circle cx="40" cy="25" r="2" fill={stroke} stroke="none" />
        </svg>
      );
    default:
      return null;
  }
}

window.ProductIcon = ProductIcon;