// fc-sport-parity.jsx — PER-SPORT COPY PARITY demonstration.
// The identity / weigh-in surfaces, rendered straight from the engine (FC_SPORTS)
// for several sports, so the copy reads true everywhere — not "MMA" by default.
// Shows the four weigh-in archetypes that actually diverge: same-day (Wrestling),
// in-the-gi (BJJ), free-entry (Muay Thai), day-before + re-weigh (Judo), and the
// amateur same-day boxing case.  IIFE-scoped.
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator;
  const CompactNav = window.CompactNav, GearButton = window.GearButton, TabBar = window.TabBar;
  const A = 'var(--accent)';

  // representative class nearest a ~74 kg athlete (free-entry → open weight)
  function repDivision(s) {
    if (!s || s.freeEntry || !s.divisions) return { name: 'Open weight', limit: null };
    const list = (s.divisions.men || []).filter((d) => d[1] < 900);
    let best = list[0];
    for (const d of list) if (Math.abs(d[1] - 74) < Math.abs(best[1] - 74)) best = d;
    return { name: best[0], limit: best[1] };
  }
  function giWord(k) { return k.startsWith('BJJ') ? (k.includes('no-gi') ? 'a rashguard' : 'the gi') : k === 'Judo' ? 'the gi' : k === 'Taekwondo' ? 'the dobok' : 'fight kit'; }
  function weighIn(s) {
    const t = s.weighIn;
    if (t === 'same-day') return ['Same day, in kit', 'You weigh in the morning you compete. No rehydration window.'];
    if (t === 'within-2h') return ['Within 2 hours, dressed', 'Weighed minutes before you roll. Almost no rehydration.'];
    if (t === 'day-before') return ['Day before', '24 hours to rebuild after the scale.'];
    return ['Same day (amateur)', 'Amateurs weigh in same day; pros the day before.'];
  }
  function cutStyle(s) {
    return s.weighIn === 'day-before'
      ? ['Moderate water cut', 'A safe water cut you rebuild overnight.']
      : ['Real weight only', 'No water cut. The scale is the truth.'];
  }

  function FactRow({ k, head, sub, last }) {
    return (
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: '14px 16px', borderBottom: last ? 'none' : '1px solid var(--rule)' }}>
        <span style={{ width: 92, flexShrink: 0, fontFamily: 'var(--display)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 700, paddingTop: 2 }}>{k}</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, fontWeight: 600, color: 'var(--ink)' }}>{head}</div>
          {sub && <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.45, marginTop: 3, textWrap: 'pretty' }}>{sub}</div>}
        </div>
      </div>
    );
  }

  // ── per-sport weigh-in rules ────────────────────────────────────────────────
  function SportRules({ sportKey = 'Boxing' }) {
    const s = (window.FC_SPORTS && window.FC_SPORTS[sportKey]) || {};
    const div = repDivision(s);
    const [wHead, wSub] = weighIn(s);
    const [cHead, cSub] = cutStyle(s);
    const gear = s.equipmentReq ? [`In ${giWord(sportKey)}`, `+${s.equipmentKg} kg gear allowance on the scale.`] : ['Stripped', 'Weigh-in in underwear. No allowance.'];
    const reweigh = s.reweigh ? [`Random check · \u2264 +${s.reweighPct}%`, 'A same-day control caps how far you can dehydrate.'] : ['Single weigh-in', 'One reading, no same-day re-check.'];
    return (
      <Phone styleKey="balanced" label={`${sportKey} · weigh-in`}>
        <StatusBar />
        <CompactNav title={`${sportKey} · weigh-in`} trailing={<span style={{ width: 40 }} />} />
        <div className="scroll" style={{ flex: 1, padding: '6px 20px 28px', display: 'flex', flexDirection: 'column', gap: 20 }}>
          {/* division hero */}
          <div style={{ background: 'var(--ink)', color: 'var(--paper)', borderRadius: 'var(--radius)', padding: '20px 22px' }}>
            <div style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(246,244,239,0.6)', fontWeight: 600 }}>{div.limit ? 'Your division' : 'No fixed class'}</div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 24, fontWeight: 700, marginTop: 12 }}>{div.name}</div>
            {div.limit
              ? <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 8 }}><span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 34 }}>{div.limit.toFixed(1)}</span><span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(246,244,239,0.7)', fontWeight: 600 }}>KG · THE LIMIT</span></div>
              : <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, color: 'rgba(246,244,239,0.82)', marginTop: 8 }}>{sportKey} has no universal class table. Your target is the number to hit.</div>}
          </div>

          {/* rules */}
          <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', overflow: 'hidden' }}>
            <FactRow k="Weigh-in" head={wHead} sub={wSub} />
            <FactRow k="Gear" head={gear[0]} sub={gear[1]} />
            <FactRow k="Re-weigh" head={reweigh[0]} sub={reweigh[1]} />
            <FactRow k="The cut" head={cHead} sub={cSub} last />
          </div>

          {/* coach voice (per sport) */}
          <div style={{ background: 'var(--accent-soft)', borderRadius: 'var(--radius)', padding: '17px 18px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              {window.CoachMark && <window.CoachMark sport={sportKey} size={26} bg="var(--ink)" ink="var(--paper)" accent={A} />}
              <span style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: A, fontWeight: 700 }}>Coach's read</span>
            </div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 15, fontStyle: 'italic', lineHeight: 1.5, color: 'var(--ink)', marginTop: 11, textWrap: 'pretty' }}>&ldquo;{s.coach}&rdquo;</div>
          </div>
        </div>
        <TabBar active="plan" />
        <HomeIndicator />
      </Phone>
    );
  }

  function SportRulesBoxing() { return <SportRules sportKey="Boxing" />; }
  function SportRulesBJJ() { return <SportRules sportKey="BJJ" />; }
  function SportRulesMuayThai() { return <SportRules sportKey="Muay Thai" />; }
  function SportRulesJudo() { return <SportRules sportKey="Judo" />; }
  function SportRulesWrestling() { return <SportRules sportKey="Wrestling" />; }

  Object.assign(window, { SportRules, SportRulesBoxing, SportRulesBJJ, SportRulesMuayThai, SportRulesJudo, SportRulesWrestling });
})();
