// fc-imperial.jsx — IMPERIAL (lb) PARITY demonstration.
// The same weight-critical surfaces rendered in pounds, so the team can sign off
// on how pounds look and round before the units engine (fc-units) is wired through
// every screen. Internally consistent MMA Lightweight (155 lb) narrative.
//   ImpToday      · Today dashboard hero, in lb
//   ImpLog        · Log-weight keypad, in lb
//   ImpDivisions  · divisions & weigh-in limits reference, in lb
//   ImpSpec       · the units & rounding contract (engineering hand-off)
(function () {
  const Phone = window.Phone, StatusBar = window.StatusBar, HomeIndicator = window.HomeIndicator;
  const DashBanner = window.DashBanner, LargeTitle = window.LargeTitle, GearButton = window.GearButton, TabBar = window.TabBar;
  const A = 'var(--accent)', GREEN = 'var(--t-green)';

  const big = (s) => ({ fontFamily: 'var(--num)', fontWeight: 300, fontSize: s, lineHeight: 0.84, letterSpacing: '-0.03em', color: 'var(--ink)' });
  const unitS = { fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.18em', color: 'var(--ink-3)', fontWeight: 600 };

  // ── TODAY (dashboard hero), in lb ───────────────────────────────────────────
  function ImpToday() {
    return (
      <Phone styleKey="balanced" label="Today · lb">
        <StatusBar />
        <DashBanner tone="ink" label="IN CAMP" meta="23 DAYS OUT" />
        <div style={{ padding: '10px 20px 0' }} />
        <LargeTitle title="Today" trailing={<GearButton />} eyebrowColor="var(--ink-3)" />
        <div className="scroll" style={{ flex: 1, padding: '4px 20px 24px' }}>
          {/* hero number */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: 'var(--mono)', fontSize: 10.5, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>
              <span style={{ color: GREEN }}>● On track</span>
              <span style={{ color: 'var(--ink-3)' }}>· 6:50 AM, fasted</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14, marginTop: 6 }}>
              <span style={big(112)}>158.4</span>
              <div style={{ paddingBottom: 4 }}>
                <div style={unitS}>LB</div>
                <div style={{ fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.1em', color: GREEN, fontWeight: 600, marginTop: 6 }}>−0.5 24H</div>
              </div>
            </div>
            <button style={{ width: '100%', marginTop: 20, background: 'var(--ink)', color: 'var(--paper)', border: 'none', borderRadius: 'var(--radius-ctl)', minHeight: 54, padding: '0 18px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
              <span style={{ fontFamily: 'var(--display)', fontSize: 15, letterSpacing: '0.13em', fontWeight: 600 }}>ADD TODAY'S WEIGHT</span>
              <span style={{ width: 22, height: 22, background: A, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><svg width="11" height="11" viewBox="0 0 10 10" fill="none"><line x1="5" y1="1.5" x2="5" y2="8.5" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" /><line x1="1.5" y1="5" x2="8.5" y2="5" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" /></svg></span>
            </button>
          </div>

          {/* how you're tracking */}
          <div style={{ marginTop: 24 }}>
            <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>How you're tracking</div>
            <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', padding: '18px 19px', marginTop: 11 }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span style={{ fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700, color: GREEN }}>Making weight</span>
                <svg width="7" height="12" viewBox="0 0 7 12" fill="none"><path d="M1 1 L6 6 L1 11" stroke="var(--rule-2)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
              </div>
              <div style={{ fontFamily: 'var(--sans)', fontSize: 13.5, lineHeight: 1.5, color: 'var(--ink-2)', marginTop: 7, textWrap: 'pretty' }}>A safe, steady pace. You make weight without draining your power.</div>
              <div style={{ display: 'flex', marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--rule)' }}>
                {[['Projected', '154.4', 'lb', 'var(--ink)'], ['Limit', '155.0', 'lb', A], ['Hits limit', '3', 'd early', GREEN]].map((m, i) => (
                  <div key={i} style={{ flex: 1, borderLeft: i ? '1px solid var(--rule)' : 'none', paddingLeft: i ? 14 : 0 }}>
                    <div style={{ fontFamily: 'var(--display)', fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>{m[0]}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 6 }}>
                      <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 26, letterSpacing: '-0.02em', color: m[3] }}>{m[1]}</span>
                      <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.06em', color: 'var(--ink-3)', fontWeight: 600 }}>{m[2]}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        <TabBar active="home" />
        <HomeIndicator />
      </Phone>
    );
  }

  // ── LOG WEIGHT keypad, in lb ────────────────────────────────────────────────
  function ImpLog() {
    return (
      <Phone styleKey="balanced" label="Log weight · lb">
        <StatusBar />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 18px 14px' }}>
          <button style={{ fontFamily: 'var(--sans)', fontSize: 16, color: 'var(--ink-3)', fontWeight: 500, minHeight: 44 }}>Cancel</button>
          <span style={{ fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 600, color: 'var(--ink)' }}>Log weight</span>
          <button style={{ fontFamily: 'var(--sans)', fontSize: 16, color: A, fontWeight: 600, minHeight: 44 }}>Save</button>
        </div>
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
          <div style={{ textAlign: 'center', padding: '26px 20px 24px' }}>
            <div style={{ fontFamily: 'var(--display)', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600 }}>Today's weight</div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 10, marginTop: 14 }}>
              <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 76, letterSpacing: '-0.03em', color: 'var(--ink)' }}>158.4<span style={{ display: 'inline-block', width: 2, height: '0.78em', background: A, marginLeft: 5, borderRadius: 1, transform: 'translateY(0.04em)' }} /></span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 15, letterSpacing: '0.12em', color: 'var(--ink-3)', fontWeight: 600 }}>LB</span>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-3)', fontWeight: 500, marginTop: 12 }}>STEPS OF 0.2 LB · YESTERDAY 158.9</div>
          </div>
          <div style={{ padding: '0 20px' }}>
            <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', display: 'flex', alignItems: 'center', minHeight: 52, padding: '0 16px' }}>
              <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 15.5, color: 'var(--ink)', fontWeight: 500 }}>Date</span>
              <span style={{ fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink-3)' }}>Today, 31 Dec</span>
            </div>
          </div>
          <div style={{ flex: 1, minHeight: 16 }} />
          {window.IOSNumberPad ? <window.IOSNumberPad onKey={() => {}} /> : <div style={{ height: 230 }} />}
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  // ── DIVISIONS & LIMITS reference, in lb ─────────────────────────────────────
  function ImpDivisions() {
    const divs = (window.OWUnits && window.OWUnits.DIVISIONS_MMA) || [];
    return (
      <Phone styleKey="balanced" label="Divisions · lb">
        <StatusBar />
        <LargeTitle eyebrow="MMA · your weigh-in" title="Your limit" trailing={<GearButton />} eyebrowColor={A} />
        <div className="scroll" style={{ flex: 1, padding: '2px 20px 28px' }}>
          {/* the athlete's limit 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 }}>Lightweight</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 10 }}>
              <span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 52, lineHeight: 0.9 }}>155.0</span>
              <span style={{ fontFamily: 'var(--mono)', fontSize: 13, letterSpacing: '0.12em', color: 'rgba(246,244,239,0.7)', fontWeight: 600 }}>LB</span>
            </div>
            <div style={{ fontFamily: 'var(--sans)', fontSize: 13, color: 'rgba(246,244,239,0.8)', marginTop: 10 }}>The number on the scale. = 70.3 kg · underwear weigh-in, no allowance.</div>
          </div>

          <div style={{ fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, margin: '24px 0 10px' }}>MMA divisions</div>
          <div style={{ background: 'var(--paper)', borderRadius: 'var(--radius)', boxShadow: 'var(--card-shadow)', border: 'var(--card-border)', overflow: 'hidden' }}>
            {divs.map((d, i) => {
              const on = d[0] === 'Lightweight';
              return (
                <div key={d[0]} style={{ display: 'flex', alignItems: 'center', minHeight: 48, padding: '0 16px', borderBottom: i < divs.length - 1 ? '1px solid var(--rule)' : 'none', background: on ? 'var(--accent-soft)' : 'transparent' }}>
                  <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 15, fontWeight: on ? 700 : 500, color: on ? A : 'var(--ink)' }}>{d[0]}</span>
                  <span style={{ fontFamily: 'var(--num)', fontWeight: 400, fontSize: 17, color: on ? A : 'var(--ink-2)' }}>{d[1].toFixed(1)}</span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-3)', fontWeight: 600, marginLeft: 6 }}>LB</span>
                </div>
              );
            })}
          </div>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 12.5, color: 'var(--ink-3)', lineHeight: 1.5, marginTop: 12, padding: '0 4px', textWrap: 'pretty' }}>Limits are the official scale maximums. Gi and gear sports add an allowance on top of the body target, set per promotion.</div>
        </div>
        <TabBar active="plan" />
        <HomeIndicator />
      </Phone>
    );
  }

  // ── UNITS & ROUNDING contract (engineering hand-off) ────────────────────────
  function SpecRow({ k, v }) {
    return (
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14, minHeight: 44, padding: '11px 0', borderTop: '1px solid var(--rule)' }}>
        <span style={{ width: 116, flexShrink: 0, fontFamily: 'var(--display)', fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-3)', fontWeight: 600, paddingTop: 1 }}>{k}</span>
        <span style={{ flex: 1, fontFamily: 'var(--sans)', fontSize: 13.5, color: 'var(--ink)', lineHeight: 1.5, textWrap: 'pretty' }}>{v}</span>
      </div>
    );
  }
  function ImpSpec() {
    return (
      <Phone styleKey="balanced" label="Units spec">
        <StatusBar />
        <LargeTitle eyebrow="Engineering hand-off" title="Units & rounding" eyebrowColor={A} />
        <div className="scroll" style={{ flex: 1, padding: '2px 20px 28px' }}>
          <div style={{ fontFamily: 'var(--sans)', fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-2)', textWrap: 'pretty' }}>The contract behind the pounds screens. One source of truth, converted at the edge. The projection math never changes.</div>
          <div style={{ marginTop: 18 }}>
            <SpecRow k="Source of truth" v="Weigh-ins and limits are stored in kilograms. Pounds are display-only." />
            <SpecRow k="Conversion" v="1 kg = 2.20462 lb. Convert once, at render." />
            <SpecRow k="Display" v="Body weight to 1 decimal: 158.4 lb / 71.8 kg." />
            <SpecRow k="Input step" v="lb logs in 0.2 steps, kg in 0.1. Matches gym scales." />
            <SpecRow k="Limits round down" v="A limit shows 155.0 lb, never rounded up, so you never aim high." />
            <SpecRow k="Divisions" v="Class names carry the official lb limit; the kg equivalent is exact (155 lb = 70.31 kg)." />
          </div>
          <div style={{ display: 'flex', gap: 12, marginTop: 22 }}>
            <div style={{ flex: 1, background: 'var(--paper)', borderRadius: 'var(--radius)', border: 'var(--card-border)', boxShadow: 'var(--card-shadow)', padding: '16px 17px' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--ink-3)', fontWeight: 600 }}>STORED</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 8 }}><span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 30, color: 'var(--ink)' }}>71.8</span><span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-3)', fontWeight: 600 }}>KG</span></div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', color: 'var(--ink-3)' }}><svg width="20" height="14" viewBox="0 0 20 14" fill="none"><path d="M1 7 H17 M12 2 L18 7 L12 12" stroke="var(--ink-3)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg></div>
            <div style={{ flex: 1, background: 'var(--ink)', borderRadius: 'var(--radius)', padding: '16px 17px' }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', color: 'rgba(246,244,239,0.6)', fontWeight: 600 }}>SHOWN (LB)</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 8 }}><span style={{ fontFamily: 'var(--num)', fontWeight: 300, fontSize: 30, color: 'var(--paper)' }}>158.4</span><span style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'rgba(246,244,239,0.7)', fontWeight: 600 }}>LB</span></div>
            </div>
          </div>
        </div>
        <HomeIndicator />
      </Phone>
    );
  }

  Object.assign(window, { ImpToday, ImpLog, ImpDivisions, ImpSpec });
})();