/* global React */
const { createElement: h } = React;

/* ---------- line icons ---------- */
function Icon({ name, size = 20, stroke = 1.4, color = "currentColor", style }) {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none",
    stroke: color, strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", style };
  const paths = {
    bag: h("g", null,
      h("path", { d: "M6 8h12l-1 12H7L6 8z" }),
      h("path", { d: "M9 8V6a3 3 0 0 1 6 0v2" })),
    search: h("g", null,
      h("circle", { cx: 11, cy: 11, r: 6 }),
      h("path", { d: "M20 20l-4-4" })),
    heart: h("path", { d: "M12 20s-7-4.5-7-9a3.7 3.7 0 0 1 7-1.6A3.7 3.7 0 0 1 19 11c0 4.5-7 9-7 9z" }),
    close: h("g", null, h("path", { d: "M6 6l12 12" }), h("path", { d: "M18 6L6 18" })),
    arrowL: h("g", null, h("path", { d: "M14 6l-6 6 6 6" })),
    arrowR: h("g", null, h("path", { d: "M10 6l6 6-6 6" })),
    minus: h("path", { d: "M6 12h12" }),
    plus: h("g", null, h("path", { d: "M12 6v12" }), h("path", { d: "M6 12h12" })),
    check: h("path", { d: "M5 12.5l4.5 4.5L19 7.5" }),
    lock: h("g", null,
      h("rect", { x: 5, y: 11, width: 14, height: 9, rx: 1.5 }),
      h("path", { d: "M8 11V8a4 4 0 0 1 8 0v3" })),
    truck: h("g", null,
      h("path", { d: "M2 7h11v9H2z" }),
      h("path", { d: "M13 10h4l3 3v3h-7z" }),
      h("circle", { cx: 7, cy: 18, r: 1.6 }), h("circle", { cx: 17, cy: 18, r: 1.6 })),
    leaf: h("g", null,
      h("path", { d: "M5 19c0-7 6-13 14-13 0 8-6 14-14 13z" }),
      h("path", { d: "M9 15c2-2 4-3 6-4" })),
    shield: h("path", { d: "M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" }),
  };
  return h("svg", common, paths[name]);
}

/* ---------- real payment marks (functional brand marks) ---------- */
function PayVisa() {
  return h("svg", { className: "paymark", viewBox: "0 0 48 30", role: "img", "aria-label": "Visa" },
    h("rect", { width: 48, height: 30, rx: 4, fill: "#fff", stroke: "#e6e2d8" }),
    h("text", { x: 24, y: 20, textAnchor: "middle", fontFamily: "Arial, sans-serif",
      fontWeight: "700", fontStyle: "italic", fontSize: 13, letterSpacing: "1", fill: "#1A1F71" }, "VISA"));
}
function PayMC() {
  return h("svg", { className: "paymark", viewBox: "0 0 48 30", role: "img", "aria-label": "Mastercard" },
    h("rect", { width: 48, height: 30, rx: 4, fill: "#fff", stroke: "#e6e2d8" }),
    h("circle", { cx: 20, cy: 15, r: 8, fill: "#EB001B" }),
    h("circle", { cx: 28, cy: 15, r: 8, fill: "#F79E1B" }),
    h("path", { d: "M24 9.2a8 8 0 0 0 0 11.6 8 8 0 0 0 0-11.6z", fill: "#FF5F00" }));
}
function PayPaypal() {
  return h("svg", { className: "paymark", viewBox: "0 0 60 30", role: "img", "aria-label": "PayPal" },
    h("rect", { width: 60, height: 30, rx: 4, fill: "#fff", stroke: "#e6e2d8" }),
    h("text", { x: 8, y: 20, fontFamily: "Arial, sans-serif", fontWeight: "700",
      fontStyle: "italic", fontSize: 13, fill: "#003087" }, "Pay"),
    h("text", { x: 31, y: 20, fontFamily: "Arial, sans-serif", fontWeight: "700",
      fontStyle: "italic", fontSize: 13, fill: "#009CDE" }, "Pal"));
}
function PayApple() {
  return h("svg", { className: "paymark", viewBox: "0 0 56 30", role: "img", "aria-label": "Apple Pay" },
    h("rect", { width: 56, height: 30, rx: 4, fill: "#fff", stroke: "#e6e2d8" }),
    h("path", { d: "M15.3 11.1c-.5.6-1.3 1-2 .95-.1-.8.3-1.6.7-2.1.5-.6 1.4-1 2.1-1 .1.8-.2 1.6-.8 2.15zM16 12.2c-1.1-.06-2 .63-2.5.63-.52 0-1.3-.6-2.14-.58-1.1.02-2.12.64-2.68 1.62-1.14 1.98-.3 4.9.82 6.5.54.79 1.19 1.67 2.04 1.64.82-.03 1.13-.53 2.12-.53.99 0 1.27.53 2.14.51.88-.01 1.44-.8 1.98-1.59.62-.91.88-1.79.89-1.84-.02-.01-1.71-.66-1.73-2.6-.01-1.62 1.32-2.4 1.38-2.44-.76-1.11-1.93-1.24-2.34-1.27z", fill: "#000" }),
    h("text", { x: 24, y: 20, fontFamily: "Arial, sans-serif", fontWeight: "600", fontSize: 12, fill: "#000" }, "Pay"));
}
function PayKlarna() {
  return h("svg", { className: "paymark", viewBox: "0 0 56 30", role: "img", "aria-label": "Klarna" },
    h("rect", { width: 56, height: 30, rx: 4, fill: "#FFB3C7" }),
    h("text", { x: 28, y: 20, textAnchor: "middle", fontFamily: "Arial, sans-serif",
      fontWeight: "700", fontSize: 12, fill: "#0A0B09" }, "Klarna."));
}

Object.assign(window, { Icon, PayVisa, PayMC, PayPaypal, PayApple, PayKlarna });