// fc-logo-sports.jsx — OnWeight "O on W" mark, one variant per combat sport.
//
// Base mark is copied EXACTLY from the chosen app icon (markOonW): the raised arms
// trace a W, big solid red gloves at the fists, and the head is an open "O" ring
// FLOATING just above the W's centre peak — no neck. 100x108 frame, logo stroke 9.
// Each sport keeps that skeleton untouched and only swaps the GEAR on the fists and
// head, plus the single red accent.

const LVB_W = 100, LVB_H = 108;
const LSW = 9;
const lin = (c, w = LSW) => ({ fill: 'none', stroke: c, strokeWidth: w, strokeLinecap: 'round', strokeLinejoin: 'round' });

const FIST_L = [14, 46], FIST_R = [86, 46];
const HEAD = { cx: 50, cy: 34, r: 15 };          // floating open ring, exactly as the icon
const PEAK = [50, 56];                            // W centre peak, top of the torso gap

// The arms (W) + floating head ring. Identical to the app icon.
function Base({ ink }) {
  return (
    <g>
      <path d="M14 46 L34 88 L50 56 L66 88 L86 46" {...lin(ink)} />
      <circle cx={HEAD.cx} cy={HEAD.cy} r={HEAD.r} {...lin(ink)} />
    </g>
  );
}

// ── FIST TREATMENTS ─────────────────────────────────────────────
// `k` scales the stroke weight (1 = normal logo; <1 = thin/light line version).
// `outline` swaps the solid gloves for outlines so the thin variant stays airy.
const SolidGlove = ({ p, acc, k = 1, outline = false }) =>                                            // boxing
  outline ? <circle cx={p[0]} cy={p[1]} r="9" {...lin(acc, 9 * k)} /> : <circle cx={p[0]} cy={p[1]} r="9.5" fill={acc} />;
const OpenGlove = ({ p, acc, k = 1 }) => <circle cx={p[0]} cy={p[1]} r="8.5" {...lin(acc, 6 * k)} />;  // MMA
const WrapFist = ({ p, acc, k = 1 }) => <circle cx={p[0]} cy={p[1]} r="6.5" {...lin(acc, 4.5 * k)} />; // Muay Thai
const BareFist = ({ p, ink, k = 1, outline = false }) =>                                              // grappling / open
  outline ? <circle cx={p[0]} cy={p[1]} r="7" {...lin(ink, 7 * k)} /> : <circle cx={p[0]} cy={p[1]} r="7.5" fill={ink} />;
function KnifeHand({ p, ink, k = 1 }) {                                                                // karate blade
  return <line x1={p[0] - 8} y1={p[1] - 4} x2={p[0] + 8} y2={p[1] + 4} {...lin(ink, 8 * k)} />;
}

// ── HEAD ADD-ONS (sit on the floating O at cy34, r15) ───────────
// Muay Thai mongkol — a red crown arc riding above the head, with a tail knot.
function Mongkol({ acc, k = 1 }) {
  const { cx, cy, r } = HEAD;
  return (
    <g>
      <path d={`M ${cx - r + 1} ${cy - r * 0.5} Q ${cx} ${cy - r - 12} ${cx + r - 1} ${cy - r * 0.5}`} {...lin(acc, 5 * k)} />
      <circle cx={cx + r - 1} cy={cy - r * 0.5} r="2.6" fill={acc} />
    </g>
  );
}
// Taekwondo / sparring headguard — a red horseshoe wrapping the head.
function Headguard({ acc, k = 1 }) {
  const { cx, cy, r } = HEAD, R = r + 4;
  return <path d={`M ${cx - R} ${cy + 2} A ${R} ${R} 0 1 1 ${cx + R} ${cy + 2}`} {...lin(acc, 5 * k)} />;
}
// Wrestling ear guards — two red pods on the sides of the head.
function EarGuards({ acc }) {
  const { cx, cy, r } = HEAD;
  return (
    <g>
      <circle cx={cx - r} cy={cy} r="3.4" fill={acc} />
      <circle cx={cx + r} cy={cy} r="3.4" fill={acc} />
    </g>
  );
}

// ── BODY ACCENTS (fill the gap between head bottom ~49 and the W peak 56) ──
// Gi collar — a red lapel V hanging from under the head; optional belt knot at the point.
function GiCollar({ acc, wide, knot, k = 1 }) {
  const x = wide ? 9 : 6;
  return (
    <g>
      <line x1={50} y1={49.5} x2={50 - x} y2={59} {...lin(acc, 4.5 * k)} />
      <line x1={50} y1={49.5} x2={50 + x} y2={59} {...lin(acc, 4.5 * k)} />
      {knot && <circle cx="50" cy="50" r="2.8" fill={acc} />}
    </g>
  );
}
// Muay Thai prajioud — short red armbands on the raised arms.
const Armbands = ({ acc, k = 1 }) => (
  <g>
    <line x1="15" y1="55" x2="26" y2="60" {...lin(acc, 4 * k)} />
    <line x1="85" y1="55" x2="74" y2="60" {...lin(acc, 4 * k)} />
  </g>
);

// ── PER-SPORT COMPOSITIONS ──────────────────────────────────────
// o = { k, outline } — k scales every stroke, outline hollows the filled fists.
const GEAR = {
  boxing: (ink, acc, o = {}) => (<g><SolidGlove p={FIST_L} acc={acc} {...o} /><SolidGlove p={FIST_R} acc={acc} {...o} /></g>),
  mma: (ink, acc, o = {}) => (<g><OpenGlove p={FIST_L} acc={acc} {...o} /><OpenGlove p={FIST_R} acc={acc} {...o} /></g>),
  muaythai: (ink, acc, o = {}) => (<g><Mongkol acc={acc} {...o} /><Armbands acc={acc} {...o} /><WrapFist p={FIST_L} acc={acc} {...o} /><WrapFist p={FIST_R} acc={acc} {...o} /></g>),
  kickboxing: (ink, acc, o = {}) => (<g><Headguard acc={acc} {...o} /><SolidGlove p={FIST_L} acc={acc} {...o} /><SolidGlove p={FIST_R} acc={acc} {...o} /></g>),
  bjj: (ink, acc, o = {}) => (<g><GiCollar acc={acc} knot {...o} /><BareFist p={FIST_L} ink={ink} {...o} /><BareFist p={FIST_R} ink={ink} {...o} /></g>),
  judo: (ink, acc, o = {}) => (<g><GiCollar acc={acc} wide {...o} /><BareFist p={FIST_L} ink={ink} {...o} /><BareFist p={FIST_R} ink={ink} {...o} /></g>),
  karate: (ink, acc, o = {}) => (<g><GiCollar acc={acc} knot {...o} /><KnifeHand p={FIST_L} ink={ink} {...o} /><KnifeHand p={FIST_R} ink={ink} {...o} /></g>),
  taekwondo: (ink, acc, o = {}) => (<g><Headguard acc={acc} {...o} /><BareFist p={FIST_L} ink={ink} {...o} /><BareFist p={FIST_R} ink={ink} {...o} /></g>),
  wrestling: (ink, acc, o = {}) => (<g><EarGuards acc={acc} {...o} /><BareFist p={FIST_L} ink={ink} {...o} /><BareFist p={FIST_R} ink={ink} {...o} /></g>),
};

// sw = base stroke width (default 9 = the logo as drawn). Pass a smaller sw for a
// thin, light line version; outline=true hollows the solid fists to match.
function SportLogo({ sport = 'boxing', ink = 'var(--ink)', accent = 'var(--red)', size = '72%', sw = LSW, outline = false }) {
  const gear = GEAR[sport] || GEAR.boxing;
  const k = sw / LSW;
  return (
    <svg viewBox={`0 0 ${LVB_W} ${LVB_H}`} width={size} height={size} fill="none" role="img" aria-label={`OnWeight ${sport} mark`} style={{ display: 'block' }}>
      <Base ink={ink} sw={sw} />
      {gear(ink, accent, { k, outline })}
    </svg>
  );
}

// Coach avatar — the sport's mini mark sitting in a filled disc. Replaces the old
// "CD" initials so the corner-man icon is bespoke to the athlete's sport (boxing
// default). Accepts an FC label ("Muay Thai") or a key ("muaythai"); unknown → boxing.
function CoachMark({ sport = 'boxing', size = 30, bg = 'var(--ink)', ink = 'var(--paper)', accent = 'var(--red)' }) {
  const norm = (window.OW_sportKey ? window.OW_sportKey(sport)
    : (typeof sport === 'string' ? sport.toLowerCase().replace(/[^a-z]/g, '') : 'boxing')) || 'boxing';
  const key = GEAR[norm] ? norm : 'boxing';
  return (
    <span role="img" aria-label={`OnWeight ${key} coach mark`} style={{ width: size, height: size, borderRadius: '50%', background: bg, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, overflow: 'hidden' }}>
      <SportLogo sport={key} ink={ink} accent={accent} size={Math.round(size * 0.7)} />
    </span>
  );
}

// The generic OnWeight app icon — base fighter mark + solid red gloves (no sport
// gear). This is the chosen markOonW. Use it anywhere the app brands itself.
function AppMark({ ink = 'var(--paper)', accent = 'var(--accent)', size = '66%' }) {
  return (
    <svg viewBox={`0 0 ${LVB_W} ${LVB_H}`} width={size} height={size} fill="none" role="img" aria-label="OnWeight" style={{ display: 'block' }}>
      <Base ink={ink} />
      <SolidGlove p={FIST_L} acc={accent} />
      <SolidGlove p={FIST_R} acc={accent} />
    </svg>
  );
}

const SPORTS_CORE = [
  { key: 'boxing', label: 'Boxing', note: 'Solid 16oz gloves' },
  { key: 'mma', label: 'MMA', note: 'Open 4oz gloves' },
  { key: 'muaythai', label: 'Muay Thai', note: 'Mongkol · prajioud · wraps' },
  { key: 'bjj', label: 'BJJ', note: 'Gi collar · belt knot' },
  { key: 'taekwondo', label: 'Taekwondo', note: 'Headguard · open hands' },
];
const SPORTS_EXP = [
  { key: 'wrestling', label: 'Wrestling', note: 'Ear guards · bare hands' },
  { key: 'judo', label: 'Judo', note: 'Wide gi lapel' },
  { key: 'karate', label: 'Karate', note: 'Gi · knife hands' },
  { key: 'kickboxing', label: 'Kickboxing', note: 'Gloves · headguard' },
];

Object.assign(window, { SportLogo, AppMark, CoachMark, SPORTS_CORE, SPORTS_EXP });