/* ui_kits/watchover-app/icons.jsx
   Inline SVG icon set, lucide-style: 24×24, stroke currentColor,
   2px stroke, round caps/joins. Play / pause / coin are the only
   filled glyphs (the play-affordance family + the gold coin).
   Attaches to window.WoIcons — no bundler, no imports.           */

(function () {
  const icon = (children) =>
    function WoIcon(props) {
      const size = (props && props.size) || 24;
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          width={size}
          height={size}
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          {children}
        </svg>
      );
    };

  window.WoIcons = {
    home: icon(
      <>
        <path d="M3 10.2 12 3l9 7.2V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
        <path d="M9 22v-8h6v8" />
      </>
    ),

    video: icon(
      <>
        <path d="m22 8-6 4 6 4V8Z" />
        <rect width="14" height="12" x="2" y="6" rx="2" />
      </>
    ),

    shieldCheck: icon(
      <>
        <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1 1 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
        <path d="m9 12 2 2 4-4" />
      </>
    ),

    search: icon(
      <>
        <circle cx="11" cy="11" r="8" />
        <path d="m21 21-4.3-4.3" />
      </>
    ),

    settings: icon(
      <>
        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
        <circle cx="12" cy="12" r="3" />
      </>
    ),

    chevronRight: icon(<path d="m9 18 6-6-6-6" />),

    chevronLeft: icon(<path d="m15 18-6-6 6-6" />),

    /* The one filled triangle in the brand — the play affordance. */
    play: icon(
      <path
        d="M6 4.6v14.8a1 1 0 0 0 1.52.85l12.1-7.4a1 1 0 0 0 0-1.7L7.52 3.75A1 1 0 0 0 6 4.6Z"
        fill="currentColor"
        stroke="none"
      />
    ),

    pause: icon(
      <>
        <rect x="6" y="4" width="4" height="16" rx="1" fill="currentColor" stroke="none" />
        <rect x="14" y="4" width="4" height="16" rx="1" fill="currentColor" stroke="none" />
      </>
    ),

    lock: icon(
      <>
        <rect width="18" height="11" x="3" y="11" rx="2" />
        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
      </>
    ),

    backspace: icon(
      <>
        <path d="M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z" />
        <path d="m18 9-6 6" />
        <path d="m12 9 6 6" />
      </>
    ),

    /* Filled gold circle — the single token currency. */
    coin: icon(
      <>
        <circle cx="12" cy="12" r="9" fill="currentColor" stroke="none" />
        <circle
          cx="12"
          cy="12"
          r="4.5"
          fill="none"
          stroke="rgba(255,255,255,0.6)"
          strokeWidth="2"
        />
      </>
    ),

    eye: icon(
      <>
        <path d="M2.06 12.35a1 1 0 0 1 0-.7C3.42 8.1 7.22 5 12 5s8.58 3.1 9.94 6.65a1 1 0 0 1 0 .7C20.58 15.9 16.78 19 12 19s-8.58-3.1-9.94-6.65Z" />
        <circle cx="12" cy="12" r="3" />
      </>
    ),

    flag: icon(
      <>
        <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" />
        <path d="M4 22v-7" />
      </>
    ),

    sparkles: icon(
      <>
        <path d="M9.94 15.5a2 2 0 0 0-1.44-1.44l-6.13-1.58a.5.5 0 0 1 0-.96L8.5 9.94a2 2 0 0 0 1.44-1.44l1.58-6.13a.5.5 0 0 1 .96 0l1.58 6.13a2 2 0 0 0 1.44 1.44l6.13 1.58a.5.5 0 0 1 0 .96l-6.13 1.58a2 2 0 0 0-1.44 1.44l-1.58 6.13a.5.5 0 0 1-.96 0z" />
        <path d="M20 3v4" />
        <path d="M22 5h-4" />
      </>
    ),

    plus: icon(
      <>
        <path d="M5 12h14" />
        <path d="M12 5v14" />
      </>
    ),

    check: icon(<path d="M20 6 9 17l-5-5" />),

    x: icon(
      <>
        <path d="M18 6 6 18" />
        <path d="m6 6 12 12" />
      </>
    ),

    moreVertical: icon(
      <>
        <circle cx="12" cy="5" r="1" />
        <circle cx="12" cy="12" r="1" />
        <circle cx="12" cy="19" r="1" />
      </>
    ),

    // Child silhouette — smaller head, compact body. Parent bottom-nav
    // "Profiles" entry (child switcher), distinct from the adult `user`.
    kid: icon(
      <>
        <circle cx="12" cy="6.5" r="3.5" />
        <path d="M6 21v-1a6 6 0 0 1 12 0v1" />
      </>
    ),
  };
})();