// Reusable icons + Injured logo
// Exports to window for sibling Babel scripts

// The brand mark is the actual U from the wordmark PNG (with the dot)
const InjuredLogo = ({ size = 26, className = "", style = {} }) => (
  <img
    src="assets/injured-mark.png"
    alt="Injured"
    width={size}
    height={(size * 212) / 140}
    className={className}
    style={{ display: "inline-block", ...style }}
  />
);

const InjuredWordmark = ({ height = 24, className = "", style = {} }) => (
  <img
    src="assets/injured-wordmark.png"
    alt="Injured"
    height={height}
    style={{ display: "inline-block", height, width: "auto", ...style }}
    className={className}
  />
);

const Icon = {
  check: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="20 6 9 17 4 12" />
    </svg>
  ),
  checkCircle: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1.41 14.59L5.41 12l1.42-1.41 3.76 3.76L17.17 7.8l1.42 1.42-8 8z" />
    </svg>
  ),
  arrow: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="12 5 19 12 12 19" />
    </svg>
  ),
  apple: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
    </svg>
  ),
  signal: (p) => (
    <svg viewBox="0 0 18 12" fill="currentColor" {...p}>
      <rect x="0" y="8" width="3" height="4" rx="0.5" />
      <rect x="5" y="5" width="3" height="7" rx="0.5" />
      <rect x="10" y="2" width="3" height="10" rx="0.5" />
      <rect x="15" y="0" width="3" height="12" rx="0.5" />
    </svg>
  ),
  wifi: (p) => (
    <svg viewBox="0 0 24 16" fill="currentColor" {...p}>
      <path d="M12 16l3-3.5c-1.66-1.45-4.34-1.45-6 0L12 16zm0-6.5c2.49 0 4.88.85 6.78 2.38l1.41-1.7C17.92 8.13 15 7 12 7s-5.92 1.13-8.19 3.18l1.41 1.7C7.12 10.35 9.51 9.5 12 9.5zm0-5C16.06 4.5 19.93 5.97 23 8.6L24.41 6.9C20.94 3.81 16.6 2 12 2S3.06 3.81-.41 6.9L1 8.6C4.07 5.97 7.94 4.5 12 4.5z" />
    </svg>
  ),
  battery: (p) => (
    <svg viewBox="0 0 26 12" fill="none" {...p}>
      <rect x="0.5" y="0.5" width="22" height="11" rx="3" stroke="currentColor" fill="none" />
      <rect x="24" y="3.5" width="1.5" height="5" rx="0.5" fill="currentColor" />
      <rect x="2" y="2" width="19" height="8" rx="2" fill="currentColor" />
    </svg>
  ),
  home: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 3l9 8h-3v9h-4v-6h-4v6H6v-9H3l9-8z" />
    </svg>
  ),
  sparkles: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M19 5l1.5 3.5L24 10l-3.5 1.5L19 15l-1.5-3.5L14 10l3.5-1.5L19 5zM9 6l2 4.5L15.5 12l-4.5 2L9 18.5 6.5 14 2 12l4.5-1.5L9 6zm10 9l1 2.5 2.5 1-2.5 1-1 2.5-1-2.5L15 18l2.5-1L19 15z" />
    </svg>
  ),
  user: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 4a4 4 0 100 8 4 4 0 000-8zm0 10c-4 0-8 2-8 6v2h11.5a6.5 6.5 0 014.5-8 6.4 6.4 0 00-1.5-.18c-2.84.05-4.7 0-6.5 0z" />
      <circle cx="19" cy="18" r="4" fill="#fff" />
      <path d="M17.2 18l1.4 1.4 2.6-2.6-1-1-1.6 1.6-.4-.4-1 1z" fill={p.fill || "currentColor"} />
    </svg>
  ),
  settings: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M19.43 12.98c.04-.32.07-.65.07-.98s-.03-.66-.07-.98l2.11-1.65a.5.5 0 00.12-.64l-2-3.46a.5.5 0 00-.61-.22l-2.49 1a7.03 7.03 0 00-1.69-.98l-.38-2.65A.5.5 0 0014 2h-4a.5.5 0 00-.49.42L9.13 5.07c-.61.25-1.18.58-1.69.98l-2.49-1a.5.5 0 00-.61.22l-2 3.46a.5.5 0 00.12.64L4.57 11c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65a.5.5 0 00-.12.64l2 3.46c.14.24.43.34.69.22l2.49-1c.5.4 1.07.73 1.68.98l.38 2.65c.04.24.25.42.49.42h4c.24 0 .45-.18.49-.42l.38-2.65c.61-.25 1.18-.58 1.69-.98l2.49 1c.26.12.55.02.69-.22l2-3.46a.5.5 0 00-.12-.64l-2.11-1.65zM12 15.5a3.5 3.5 0 110-7 3.5 3.5 0 010 7z" />
    </svg>
  ),
  bolt: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z" />
    </svg>
  ),
  shield: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-1.41 14.59L7 12l1.41-1.41 2.17 2.17 4.59-4.59L16.59 9.59l-6 6z" />
    </svg>
  ),
  pulse: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
    </svg>
  ),
  mic: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <rect x="9" y="3" width="6" height="12" rx="3" />
      <path d="M19 11a7 7 0 01-14 0M12 18v3M9 21h6" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" />
    </svg>
  ),
  image: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <rect x="3" y="4" width="18" height="16" rx="2" />
      <circle cx="9" cy="10" r="1.5" fill="currentColor" />
      <path d="M21 16l-6-6-9 9" />
    </svg>
  ),
  chevronLeft: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <polyline points="15 18 9 12 15 6" />
    </svg>
  ),
  star: (p) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 7.1-1.01L12 2z" />
    </svg>
  ),
  lock: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="4" y="11" width="16" height="10" rx="2" />
      <path d="M8 11V7a4 4 0 018 0v4" />
    </svg>
  ),
  menu: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" {...p}>
      <line x1="3" y1="6" x2="21" y2="6" />
      <line x1="3" y1="12" x2="21" y2="12" />
      <line x1="3" y1="18" x2="21" y2="18" />
    </svg>
  ),
  close: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" {...p}>
      <line x1="6" y1="6" x2="18" y2="18" />
      <line x1="18" y1="6" x2="6" y2="18" />
    </svg>
  ),
  message: (p) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
    </svg>
  ),
  playStore: (p) => (
    <svg viewBox="0 0 24 24" {...p}>
      <defs>
        <linearGradient id="gp1" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#00C3FF" />
          <stop offset="1" stopColor="#005FE0" />
        </linearGradient>
        <linearGradient id="gp2" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FFE000" />
          <stop offset="1" stopColor="#FFB300" />
        </linearGradient>
        <linearGradient id="gp3" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FF6B6B" />
          <stop offset="1" stopColor="#D32F2F" />
        </linearGradient>
        <linearGradient id="gp4" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#5AE489" />
          <stop offset="1" stopColor="#00B158" />
        </linearGradient>
      </defs>
      <path d="M3.5 2.8v18.4c0 .5.2.9.5 1.1l10.4-10.3L3.5 2.8z" fill="url(#gp1)" />
      <path d="M14.4 12l3.6-3.6L4.7 1.6c-.4-.2-.8-.2-1.2 0L14.4 12z" fill="url(#gp4)" />
      <path d="M14.4 12L3.5 22.4c.4.2.8.2 1.2 0L18 14.6 14.4 12z" fill="url(#gp3)" />
      <path d="M18 14.6l3-1.7c.7-.4.7-1.4 0-1.8l-3-1.7L14.4 12 18 14.6z" fill="url(#gp2)" />
    </svg>
  ),
};

Object.assign(window, { InjuredLogo, InjuredWordmark, Icon });
