/* icons.jsx — minimal geometric icon set + Flag/Team label.
   Exports to window. Load via Babel. */
const Ico = ({ d, size = 18, stroke = 2, fill = 'none', ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill}
       stroke="currentColor" strokeWidth={stroke} strokeLinecap="round"
       strokeLinejoin="round" {...p}>{d}</svg>
);

const IconCheck  = (p) => <Ico {...p} d={<polyline points="20 6 9 17 4 12" />} />;
const IconClose  = (p) => <Ico {...p} d={<g><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></g>} />;
const IconLock   = (p) => <Ico {...p} d={<g><rect x="4.5" y="11" width="15" height="9" rx="1.5"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></g>} />;
const IconShare  = (p) => <Ico {...p} d={<g><circle cx="18" cy="5" r="2.6"/><circle cx="6" cy="12" r="2.6"/><circle cx="18" cy="19" r="2.6"/><line x1="8.3" y1="10.8" x2="15.7" y2="6.2"/><line x1="8.3" y1="13.2" x2="15.7" y2="17.8"/></g>} />;
const IconLink   = (p) => <Ico {...p} d={<g><path d="M9.5 14.5l5-5"/><path d="M8 12l-2 2a3 3 0 1 0 4.2 4.2l2-2"/><path d="M16 12l2-2a3 3 0 1 0-4.2-4.2l-2 2"/></g>} />;
const IconDownload=(p) => <Ico {...p} d={<g><path d="M12 4v11"/><polyline points="7 11 12 16 17 11"/><path d="M5 20h14"/></g>} />;
const IconArrow  = (p) => <Ico {...p} d={<g><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></g>} />;
const IconChevron= (p) => <Ico {...p} d={<polyline points="9 6 15 12 9 18" />} />;
const IconInfo   = (p) => <Ico {...p} d={<g><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="7.6" r="0.6" fill="currentColor"/></g>} />;
const IconTarget = (p) => <Ico {...p} d={<g><circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r="0.8" fill="currentColor"/></g>} />;
const IconPlay   = (p) => <Ico {...p} d={<polygon points="7 4 20 12 7 20" fill="currentColor" stroke="none"/>} />;
const IconClock  = (p) => <Ico {...p} d={<g><circle cx="12" cy="12" r="8.5"/><polyline points="12 7 12 12 16 14"/></g>} />;
const IconBracket= (p) => <Ico {...p} d={<g><path d="M4 5h5v6h5"/><path d="M4 19h5v-6"/><path d="M14 11h6"/></g>} />;
const IconGrid   = (p) => <Ico {...p} d={<g><rect x="4" y="4" width="7" height="7" rx="1"/><rect x="13" y="4" width="7" height="7" rx="1"/><rect x="4" y="13" width="7" height="7" rx="1"/><rect x="13" y="13" width="7" height="7" rx="1"/></g>} />;
const IconHome   = (p) => <Ico {...p} d={<g><path d="M4 11l8-7 8 7"/><path d="M6 10v9h12v-9"/></g>} />;
const IconLeaderboard = (p) => <Ico {...p} d={<g><rect x="3" y="10" width="5" height="10" rx="1"/><rect x="9.5" y="4" width="5" height="16" rx="1"/><rect x="16" y="13" width="5" height="7" rx="1"/></g>} />;
const IconQuiz   = (p) => <Ico {...p} d={<g><circle cx="12" cy="12" r="9"/><path d="M9.2 9.5a2.8 2.8 0 1 1 4.6 2.1c-.9.7-1.6 1.2-1.6 2.4"/><circle cx="12" cy="17.2" r="0.6" fill="currentColor"/></g>} />;

// Solid floodlit trophy (kept simple/geometric)
const IconTrophy = ({ size = 18, ...p }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" {...p}>
    <path d="M6 3h12v2.2c2.2 0 3.5 1 3.5 3 0 2.4-2 4-4.4 4.3-.7 1.3-1.9 2.3-3.6 2.6V20h3v1.6H7.5V20h3v-4.9c-1.7-.3-2.9-1.3-3.6-2.6C4.5 12.2 2.5 10.6 2.5 8.2c0-2 1.3-3 3.5-3V3Zm0 4.1c-1 0-1.5.4-1.5 1.1 0 1 .9 1.8 2 2.1A12 12 0 0 1 6 7.1Zm12 0a12 12 0 0 1-.5 3.3c1.1-.3 2-1.1 2-2.1 0-.7-.5-1.1-1.5-1.1Z"/>
  </svg>
);

// ✅ / ❌ correctness glyphs (filled circle tokens)
const Verdict = ({ ok, size = 18 }) => (
  <span className="verdict" data-ok={ok} style={{ width: size, height: size }}>
    {ok ? <IconCheck size={size * 0.62} stroke={3.2} /> : <IconClose size={size * 0.62} stroke={3.2} />}
  </span>
);

/* ---------- Flag + team name ---------- */
function Flag({ code, size = 22 }) {
  const t = window.WC.team(code);
  return (
    <span className="flag" style={{ fontSize: size, lineHeight: 1 }} aria-label={t ? t.name : code}>
      {t ? t.flag : '🏳️'}
    </span>
  );
}

// Inline team chip: flag + (name | 3-letter)
function Team({ code, variant = 'name', flag = 22, className = '', strong }) {
  const t = code ? window.WC.team(code) : null;
  return (
    <span className={`team ${className}`} data-strong={strong ? '1' : undefined}>
      {t ? <Flag code={code} size={flag} /> : <span className="flag flag--tbd" style={{ fontSize: flag }}>·</span>}
      <span className="team__name">{t ? (variant === 'code' ? t.code : t.name) : '—'}</span>
    </span>
  );
}

Object.assign(window, {
  Ico, IconCheck, IconClose, IconLock, IconShare, IconLink, IconDownload, IconArrow,
  IconChevron, IconInfo, IconTarget, IconPlay, IconClock, IconBracket, IconGrid, IconHome,
  IconLeaderboard, IconQuiz, IconTrophy, Verdict, Flag, Team,
});
