// icons.jsx — Lucide-style icons used in WCL
function makeIcon(d) {
  return function Icon({ size = 16, ...rest }) {
    return (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...rest}>
        {d}
      </svg>
    );
  };
}
const I = {
  Home:        makeIcon(<><path d="m3 9 9-7 9 7"/><path d="M5 9v12h14V9"/><path d="M9 21v-7h6v7"/></>),
  Trophy:      makeIcon(<><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M6 3h12v7a6 6 0 0 1-12 0V3z"/><path d="M9 21h6"/><path d="M12 15v6"/></>),
  Calendar:    makeIcon(<><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>),
  Activity:    makeIcon(<><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></>),
  Bracket:     makeIcon(<><path d="M3 5v14"/><path d="M3 12h6"/><path d="M9 5v14"/><path d="M15 5v14"/><path d="M15 12h6"/><path d="M21 5v14"/></>),
  Shield:      makeIcon(<><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>),
  Book:        makeIcon(<><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></>),
  Sigma:       makeIcon(<><path d="M18 7V4H6l6 8-6 8h12v-3"/></>),
  Crown:       makeIcon(<><path d="M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z"/><path d="M5 21h14"/></>),
  Settings:    makeIcon(<><path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 0 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>),
  Search:      makeIcon(<><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>),
  Bell:        makeIcon(<><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0"/></>),
  Moon:        makeIcon(<><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></>),
  Sun:         makeIcon(<><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></>),
  ChevR:       makeIcon(<path d="m9 18 6-6-6-6"/>),
  ChevDown:    makeIcon(<path d="m6 9 6 6 6-6"/>),
  ArrowUR:     makeIcon(<><path d="M7 17 17 7"/><path d="M7 7h10v10"/></>),
  Pin:         makeIcon(<><path d="M12 17v5"/><path d="M9 10.76V6a3 3 0 0 1 6 0v4.76a2 2 0 0 0 .59 1.41L17 14H7l1.41-1.83A2 2 0 0 0 9 10.76z"/></>),
  Plus:        makeIcon(<><path d="M5 12h14M12 5v14"/></>),
  Filter:      makeIcon(<path d="M22 3H2l8 9.5V19l4 2v-8.5z"/>),
  TrendUp:     makeIcon(<><path d="m22 7-8.5 8.5-5-5L2 17"/><path d="M16 7h6v6"/></>),
  TrendDown:   makeIcon(<><path d="m22 17-8.5-8.5-5 5L2 7"/><path d="M16 17h6v-6"/></>),
  Dot:         makeIcon(<circle cx="12" cy="12" r="3"/>),
  Globe:       makeIcon(<><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></>),
  Live:        makeIcon(<><circle cx="12" cy="12" r="3"/><path d="M4.93 4.93a10 10 0 0 0 0 14.14M19.07 4.93a10 10 0 0 1 0 14.14M7.76 7.76a6 6 0 0 0 0 8.49M16.24 7.76a6 6 0 0 1 0 8.49"/></>),
  GripV:       makeIcon(<><circle cx="9" cy="6" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="18" r="1"/><circle cx="15" cy="6" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="18" r="1"/></>),
  Check:       makeIcon(<path d="M20 6 9 17l-5-5"/>),
  X:           makeIcon(<><path d="M18 6 6 18M6 6l12 12"/></>),
  Stadium:     makeIcon(<><ellipse cx="12" cy="12" rx="10" ry="6"/><path d="M2 12c0 3.3 4.5 6 10 6s10-2.7 10-6"/></>),
  Whistle:     makeIcon(<><circle cx="8" cy="14" r="6"/><path d="M14 14h8l-2-4h-6"/></>),
  Users:       makeIcon(<><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></>),
  Clock:       makeIcon(<><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></>),
  Chat:        makeIcon(<><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></>),
  Send:        makeIcon(<><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></>),
  Map:         makeIcon(<><path d="M9 3 3 6v15l6-3 6 3 6-3V3l-6 3-6-3Z"/><path d="M9 3v15M15 6v15"/></>),
  List:        makeIcon(<><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></>),
  Layers:      makeIcon(<><path d="m12 2 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 17l9 5 9-5"/></>),
  Compass:     makeIcon(<><circle cx="12" cy="12" r="10"/><path d="m16.2 7.8-2 6-6 2 2-6 6-2z"/></>),
  Sparkle:     makeIcon(<><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></>),
  Flame:       makeIcon(<><path d="M12 2c1 3 4 5 4 9a4 4 0 0 1-8 0c0-1 .5-2 1-2.5C9 11 9 13 9 13s-1-1-1-3c0-2 2-5 4-8z"/></>),
  Grid:        makeIcon(<><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>),
  Trash:       makeIcon(<><path d="M3 6h18M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></>),
};

// Stylized soccer ball — used for brand mark + login + favicon
function SoccerBall({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden>
      <circle cx="32" cy="32" r="29" fill="currentColor" opacity="0.06" stroke="currentColor" strokeWidth="2" />
      <circle cx="32" cy="32" r="28" fill="#FFFFFF" />
      {/* central pentagon */}
      <polygon points="32,18 42,25 38,37 26,37 22,25" fill="#0a0a0a" />
      {/* outer panel hints (5 black wedges around the pentagon) */}
      <polygon points="32,18 22,25 14,14 23,8" fill="#0a0a0a" opacity="0.92" />
      <polygon points="32,18 42,25 50,14 41,8" fill="#0a0a0a" opacity="0.92" />
      <polygon points="26,37 22,25 14,30 16,42" fill="#0a0a0a" opacity="0.92" />
      <polygon points="38,37 42,25 50,30 48,42" fill="#0a0a0a" opacity="0.92" />
      <polygon points="26,37 38,37 36,52 28,52" fill="#0a0a0a" opacity="0.92" />
      {/* seam lines */}
      <polyline points="32,18 23,8 41,8 32,18" stroke="#FFFFFF" strokeWidth="1.5" fill="none" />
      <polyline points="22,25 14,14 14,30" stroke="#FFFFFF" strokeWidth="1.5" fill="none" />
      <polyline points="42,25 50,14 50,30" stroke="#FFFFFF" strokeWidth="1.5" fill="none" />
      <polyline points="26,37 16,42 28,52" stroke="#FFFFFF" strokeWidth="1.5" fill="none" />
      <polyline points="38,37 48,42 36,52" stroke="#FFFFFF" strokeWidth="1.5" fill="none" />
      <circle cx="32" cy="32" r="28" fill="none" stroke="#0a0a0a" strokeWidth="1.5" />
    </svg>
  );
}
Object.assign(window, { SoccerBall });
Object.assign(window, { I });
