/* global React */

function LynxMark({ size = 36, mono, chip = false }) {
  const isMono = mono === undefined ? !chip : mono;
  const img = (
    <img
      src="/assets/logo.png"
      alt="Lyncared"
      width={size}
      height={size}
      style={{
        display: "block",
        width: size,
        height: size,
        objectFit: "contain",
        filter: isMono
          ? "brightness(0) invert(1) drop-shadow(0 0 14px rgba(94, 233, 242, 0.55)) drop-shadow(0 0 4px rgba(94, 233, 242, 0.35))"
          : "none",
      }}
    />
  );
  if (!chip) return img;
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        width: size + 14,
        height: size + 14,
        borderRadius: 12,
        background: "#F0F4FA",
        boxShadow:
          "0 0 0 1px rgba(94, 233, 242, 0.35), 0 8px 22px -8px rgba(94, 233, 242, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
      }}
    >
      {img}
    </span>
  );
}

const ICONS = {
  bolt: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
      <path d="M18 3 L7 18 H15 L13 29 L25 13 H17 Z" />
    </svg>
  ),
  ev: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
      <rect x="5" y="8" width="14" height="18" rx="2" />
      <path d="M9 13 H15 M9 17 H13" />
      <path d="M19 14 H22 V18 C22 19 22.5 20 24 20 V25" />
      <path d="M11 8 V5 H13 M11 5 H15" />
    </svg>
  ),
  building: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
      <path d="M5 27 H27" />
      <rect x="8" y="6" width="16" height="21" />
      <path d="M12 11 H14 M18 11 H20 M12 16 H14 M18 16 H20 M12 21 H14 M18 21 H20" />
    </svg>
  ),
  solar: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
      <circle cx="16" cy="11" r="4" />
      <path d="M16 3 V5 M16 17 V19 M8 11 H10 M22 11 H24 M10.3 5.3 L11.7 6.7 M20.3 15.7 L21.7 17.1 M10.3 16.7 L11.7 15.3 M20.3 6.3 L21.7 4.9" />
      <path d="M6 28 L9 22 H23 L26 28 Z" />
      <path d="M11 22 L9.5 28 M16 22 L16 28 M21 22 L22.5 28" />
    </svg>
  ),
  leaf: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
      <path d="M6 26 C6 14 14 6 26 6 C26 18 18 26 6 26 Z" />
      <path d="M6 26 L20 12" />
    </svg>
  ),
  network: (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round">
      <rect x="4" y="6" width="24" height="6" rx="1" />
      <rect x="4" y="14" width="24" height="6" rx="1" />
      <rect x="4" y="22" width="24" height="6" rx="1" />
      <circle cx="8" cy="9" r="0.8" fill="currentColor" />
      <circle cx="8" cy="17" r="0.8" fill="currentColor" />
      <circle cx="8" cy="25" r="0.8" fill="currentColor" />
      <path d="M22 9 H25 M22 17 H25 M22 25 H25" />
    </svg>
  ),
  reach: (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      <circle cx="24" cy="24" r="18" />
      <path d="M6 24 H42 M24 6 C30 12 30 36 24 42 C18 36 18 12 24 6 Z" />
      <circle cx="24" cy="24" r="2.5" fill="currentColor" />
    </svg>
  ),
  shield: (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      <path d="M24 5 L40 11 V24 C40 33 33 41 24 44 C15 41 8 33 8 24 V11 Z" />
      <path d="M16 24 L22 30 L33 18" />
    </svg>
  ),
  clock: (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round">
      <circle cx="24" cy="24" r="18" />
      <path d="M24 12 V24 L33 28" />
      <path d="M24 2 V6 M46 24 H42 M24 46 V42 M2 24 H6" />
    </svg>
  ),
  whatsapp: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.43 1.32 4.93L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02A9.876 9.876 0 0 0 12.04 2zM12.05 20.15h-.01c-1.53 0-3.03-.41-4.34-1.19l-.31-.18-3.22.84.86-3.14-.2-.32a8.244 8.244 0 0 1-1.27-4.39c0-4.55 3.7-8.25 8.26-8.25 2.21 0 4.28.86 5.84 2.42a8.21 8.21 0 0 1 2.42 5.84c-.01 4.55-3.71 8.25-8.27 8.25zm4.52-6.18c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.78.97-.14.16-.29.18-.54.06-.25-.12-1.04-.38-1.99-1.22-.74-.65-1.23-1.46-1.37-1.71-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.55-1.33-.76-1.83-.2-.48-.4-.41-.55-.42-.14-.01-.31-.01-.47-.01-.16 0-.43.06-.66.31-.23.25-.86.84-.86 2.06 0 1.21.88 2.38 1.01 2.55.12.16 1.74 2.66 4.22 3.73.59.26 1.05.41 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.07-.11-.23-.18-.48-.3z"/>
    </svg>
  ),
  phone: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57a1 1 0 0 0-1.02.24l-2.2 2.2a15.07 15.07 0 0 1-6.59-6.58l2.2-2.21a1 1 0 0 0 .25-1A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.39 7.61 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z"/>
    </svg>
  ),
  arrow: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12 H19 M13 6 L19 12 L13 18" />
    </svg>
  ),
  check: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12 L10 17 L19 7" />
    </svg>
  ),
};

Object.assign(window, { LynxMark, ICONS });
