/* global React */
// Line-art SVG icons for ПСК СТУ
// Style: 1.5px stroke, currentColor, 24x24 viewBox unless specified

const Ico = {
  // Hexagon nut (logo / motif)
  HexNut: ({ size = 24, fill = false }) =>
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M12 2.5 L20 7 L20 17 L12 21.5 L4 17 L4 7 Z" fill={fill ? "currentColor" : "none"} />
      <circle cx="12" cy="12" r="3.5" fill={fill ? "white" : "none"} />
    </svg>,


  // Bolt (hex head + threaded shaft)
  Bolt: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M10 12 L18 8 L26 12 L26 20 L18 24 L10 20 Z" />
      <path d="M18 14 L18 18" />
      <path d="M26 16 L42 16 L42 20 L26 20" />
      <path d="M28 16 L28 20 M31 16 L31 20 M34 16 L34 20 M37 16 L37 20 M40 16 L40 20" />
    </svg>,


  // Hex nut
  Nut: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M24 6 L40 14 L40 30 L24 38 L8 30 L8 14 Z" />
      <circle cx="24" cy="22" r="7" />
      <path d="M24 22 m-7 0 a7 7 0 1 0 14 0" strokeDasharray="2 2" opacity="0.5" />
    </svg>,


  // Washer (ring)
  Washer: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <ellipse cx="24" cy="24" rx="16" ry="6" />
      <ellipse cx="24" cy="24" rx="6" ry="2.2" />
      <path d="M8 24 L8 26 A 16 6 0 0 0 40 26 L40 24" />
      <path d="M18 24 L18 25 A 6 2.2 0 0 0 30 25 L30 24" />
    </svg>,


  // Screw (self-tapping)
  Screw: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M10 10 L22 10 L22 14 L10 14 Z" />
      <path d="M14 10 L18 14 M18 10 L14 14" />
      <path d="M14 14 L13 18 L19 18 L18 14" />
      <path d="M13 20 L19 20 L18 23 L14 23 Z" />
      <path d="M14 25 L18 25 L17 28 L15 28 Z" />
      <path d="M15 30 L17 30 L16 34 Z" />
    </svg>,


  // Anchor (anchor bolt)
  Anchor: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M14 8 L26 8 L26 12 L14 12 Z" />
      <path d="M20 12 L20 30" />
      <path d="M20 30 L16 26 M20 30 L24 26" />
      <path d="M10 32 L14 30 L10 28 M30 32 L26 30 L30 28" />
      <path d="M14 30 L26 30" />
      <path d="M34 12 L38 12 L38 22 M34 16 L38 16 M34 20 L38 20" />
    </svg>,


  // Rivet
  Rivet: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <ellipse cx="24" cy="14" rx="9" ry="3" />
      <path d="M15 14 L18 32 L30 32 L33 14" />
      <path d="M18 32 L18 36 L30 36 L30 32" />
      <path d="M20 18 L28 18 M20 22 L28 22 M20 26 L28 26" opacity="0.4" />
    </svg>,


  // Hi-strength
  Strength: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M24 6 L36 12 L36 24 C36 32 30 38 24 40 C18 38 12 32 12 24 L12 12 Z" />
      <path d="M20 22 L23 25 L29 19" />
    </svg>,


  // Stud / Threaded rod
  Stud: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M8 18 L40 18 L40 30 L8 30 Z" />
      <path d="M11 18 L11 30 M14 18 L14 30 M17 18 L17 30 M20 18 L20 30 M23 18 L23 30 M26 18 L26 30 M29 18 L29 30 M32 18 L32 30 M35 18 L35 30 M38 18 L38 30" />
    </svg>,


  // Mesh / wire
  Mesh: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M8 8 L40 8 L40 40 L8 40 Z" />
      <path d="M8 16 L40 16 M8 24 L40 24 M8 32 L40 32" />
      <path d="M16 8 L16 40 M24 8 L24 40 M32 8 L32 40" />
    </svg>,


  // Chain
  Chain: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <ellipse cx="14" cy="16" rx="6" ry="9" />
      <ellipse cx="34" cy="16" rx="6" ry="9" />
      <ellipse cx="24" cy="32" rx="6" ry="9" />
      <path d="M19 19 L20 22 M28 19 L27 22" />
    </svg>,


  // Nail
  Nail: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <ellipse cx="24" cy="10" rx="9" ry="3" />
      <path d="M21 12 L20 14 L28 14 L27 12" />
      <path d="M22 14 L24 40 L26 14" />
    </svg>,


  // Stainless A2/A4
  Stainless: () =>
  <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M24 6 L40 14 L40 30 L24 38 L8 30 L8 14 Z" />
      <text x="24" y="26" textAnchor="middle" fontSize="9" fontWeight="700" fill="currentColor" stroke="none" fontFamily="ui-monospace, monospace">A2</text>
    </svg>,


  // Generic
  Truck: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M2 6 L14 6 L14 17 L2 17 Z" />
      <path d="M14 9 L18 9 L21 13 L21 17 L14 17" />
      <circle cx="6.5" cy="17.5" r="2" />
      <circle cx="17.5" cy="17.5" r="2" />
    </svg>,

  Certificate: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M5 3 L19 3 L19 21 L12 18 L5 21 Z" />
      <circle cx="12" cy="10" r="3" />
    </svg>,

  Doc: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M6 3 L15 3 L19 7 L19 21 L6 21 Z" />
      <path d="M14 3 L14 8 L19 8" />
      <path d="M9 13 L16 13 M9 16 L14 16" />
    </svg>,

  Map: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M12 21 C 7 16 4 12 4 9 a 8 8 0 1 1 16 0 c 0 3 -3 7 -8 12 Z" />
      <circle cx="12" cy="9" r="3" />
    </svg>,

  Phone: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" style={{ width: "18px", height: "1px" }}>
      <path d="M5 3 L8 3 L10 8 L8 10 C9 13 11 15 14 16 L16 14 L21 16 L21 19 C21 20 20 21 19 21 C10 21 3 14 3 5 C3 4 4 3 5 3 Z" />
    </svg>,

  Mail: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" style={{ width: "0px", height: "0px" }}>
      <path d="M3 5 L21 5 L21 19 L3 19 Z" />
      <path d="M3 5 L12 13 L21 5" />
    </svg>,

  Whatsapp: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" style={{ width: "0px", height: "0px" }}>
      <path d="M3 21 L5 16 C4 14 3.5 12 4 10 C5 5 9 2 14 3 C19 4 22 9 21 14 C20 19 14 22 9 20 Z" />
      <path d="M9 10 C9 9 10 8 11 9 C12 11 13 13 15 14 C16 14 16 13 17 13" />
    </svg>,

  Tg: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" style={{ height: "0px", width: "0px" }}>
      <path d="M3 11 L21 4 L18 21 L11 15 L8 19 L8 14 L17 7 L8 13" />
    </svg>,

  Clock: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7 L12 12 L16 14" />
    </svg>,

  Pin: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" style={{ width: "20.467px", height: "20px" }}>
      <path d="M12 21 C 7 16 4 12 4 9 a 8 8 0 1 1 16 0 c 0 3 -3 7 -8 12 Z" />
      <circle cx="12" cy="9" r="2.5" />
    </svg>,

  Ruble: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M8 4 L8 20" />
      <path d="M8 4 L13 4 a 4 4 0 0 1 0 8 L8 12" />
      <path d="M5 12 L14 12 M5 16 L14 16" />
    </svg>,

  Calendar: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <rect x="3" y="5" width="18" height="16" />
      <path d="M3 10 L21 10 M8 3 L8 7 M16 3 L16 7" />
    </svg>,

  Percent: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M5 19 L19 5" />
      <circle cx="7.5" cy="7.5" r="2.5" />
      <circle cx="16.5" cy="16.5" r="2.5" />
    </svg>,

  Wallet: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M3 7 L18 7 L18 5 L5 5 C4 5 3 6 3 7 Z" />
      <path d="M3 7 L3 19 C 3 20 4 21 5 21 L21 21 L21 9 L5 9 C4 9 3 8 3 7 Z" />
      <circle cx="17" cy="15" r="1.5" />
    </svg>,

  Chevron: ({ dir = "down" }) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"
  style={{ transform: dir === "up" ? "rotate(180deg)" : dir === "right" ? "rotate(-90deg)" : "none" }}>
      <path d="M6 9 L12 15 L18 9" />
    </svg>,

  Arrow: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M5 19 L19 5 M9 5 L19 5 L19 15" />
    </svg>,

  Check: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinejoin="round" strokeLinecap="round">
      <path d="M5 12 L10 17 L19 7" />
    </svg>,

  Download: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M12 3 L12 16 M6 11 L12 17 L18 11" />
      <path d="M4 21 L20 21" />
    </svg>,

  User: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <circle cx="12" cy="8" r="4" />
      <path d="M4 21 C 4 16 8 14 12 14 C 16 14 20 16 20 21" />
    </svg>,

  Snow: () =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round">
      <path d="M12 2 L12 22 M4 7 L20 17 M4 17 L20 7" />
      <path d="M9 4 L12 7 L15 4 M9 20 L12 17 L15 20" />
    </svg>

};

// Big Hexagon decorative SVG (used in hero, page heads)
function BigHex({ stroke = "rgba(255,255,255,0.25)", fill = "transparent", inner = true }) {
  return (
    <svg viewBox="0 0 200 220" fill="none">
      <path d="M100 6 L186 56 L186 164 L100 214 L14 164 L14 56 Z"
      stroke={stroke} strokeWidth="1.5" fill={fill} />
      {inner &&
      <>
          <path d="M100 26 L168 66 L168 154 L100 194 L32 154 L32 66 Z"
        stroke={stroke} strokeWidth="1" fill="none" opacity="0.7" />
          <circle cx="100" cy="110" r="42" stroke={stroke} strokeWidth="1.2" fill="none" />
          <circle cx="100" cy="110" r="32" stroke={stroke} strokeWidth="0.8" fill="none" opacity="0.6" />
        </>
      }
    </svg>);

}

// Hex pattern field — repeating small hexagons (used as deco)
function HexField({ stroke = "rgba(255,255,255,0.07)" }) {
  const rows = 6,cols = 8,r = 28;
  const cells = [];
  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      const x = col * (r * 1.732) + (row % 2 ? r * 0.866 : 0) + 30;
      const y = row * (r * 1.5) + 30;
      cells.push(
        <path key={`${row}-${col}`}
        d={`M${x} ${y - r} L${x + r * 0.866} ${y - r / 2} L${x + r * 0.866} ${y + r / 2} L${x} ${y + r} L${x - r * 0.866} ${y + r / 2} L${x - r * 0.866} ${y - r / 2} Z`}
        stroke={stroke} strokeWidth="1" fill="none" />
      );
    }
  }
  return <svg viewBox="0 0 600 420" style={{ width: '100%', height: '100%' }}>{cells}</svg>;
}

window.Ico = Ico;
window.BigHex = BigHex;
window.HexField = HexField;