// Warm Coach — revamped screens (V2)
// 1) Fuel · Detailed  (macros + snap/track + meal time + manual log)
// 2) Strength · Body Parts grid (the colored-stripe layout, refined)
// 3) Strength · Chest exercise sheet (modal bottom sheet)
// 4) Strength · Sessions list row (used inside Strength main)
//
// Relies on globals from screens-a.jsx (A theme, Iq, ICheck, ITab*, etc.)
// and screens-a-pages.jsx (Card, StatusPill, MiniBars).

// ─────────────────────────────────────────────────────────
// Shared helpers for V2
// ─────────────────────────────────────────────────────────

// A donut / ring with a centered number — used for macros
function MacroRing({ value, max, color, size = 64, stroke = 6 }) {
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const pct = Math.max(0, Math.min(1, value / max));
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}
        style={{ transform: 'rotate(-90deg)' }}>
        <circle cx={size / 2} cy={size / 2} r={r}
          fill="none" stroke={A.rest} strokeWidth={stroke} />
        <circle cx={size / 2} cy={size / 2} r={r}
          fill="none" stroke={color} strokeWidth={stroke}
          strokeLinecap="round"
          strokeDasharray={`${c * pct} ${c}`} />
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: A.display, fontWeight: 800, fontSize: 14,
        color: A.ink, letterSpacing: '-0.02em',
      }}>{value}</div>
    </div>
  );
}

// macro card — emoji label + ring + values
function MacroCard({ emoji, name, value, max, unit, color, accent }) {
  return (
    <div style={{
      padding: 14, borderRadius: 16, background: A.card,
      border: `1px solid ${A.rule}`,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <MacroRing value={value} max={max} color={color || A.ink} size={56} stroke={5} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4,
        }}>
          <span style={{ fontSize: 14 }}>{emoji}</span>
          <span style={{
            fontFamily: A.body, fontWeight: 700, fontSize: 11,
            color: A.ink2, letterSpacing: '0.12em', textTransform: 'uppercase',
          }}>{name}</span>
        </div>
        <div style={{
          fontFamily: A.display, fontWeight: 800, fontSize: 19,
          color: A.ink, letterSpacing: '-0.02em', lineHeight: 1,
        }}>
          {value}
          <span style={{ fontSize: 11, color: A.ink3, fontWeight: 500, marginLeft: 3 }}>{unit}</span>
        </div>
        <div style={{
          fontSize: 10.5, color: A.ink3, fontWeight: 500, marginTop: 2,
        }}>of {max} {unit}</div>
      </div>
    </div>
  );
}

// meal time chip
function MealChip({ icon, label, on }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '8px 12px', borderRadius: 999,
      background: on ? A.ink : A.card,
      border: `1.5px solid ${on ? A.ink : A.rule}`,
      color: on ? '#fff' : A.ink,
      fontFamily: A.display, fontWeight: 700, fontSize: 12, letterSpacing: '0.1em',
      whiteSpace: 'nowrap', flexShrink: 0,
      textTransform: 'uppercase',
    }}>
      <span style={{ fontSize: 13 }}>{icon}</span>{label}
    </div>
  );
}

// ─────────────────────────────────────────────────────────
// 1) FUEL · DETAILED  (revamp)
// ─────────────────────────────────────────────────────────
function A_Fuel_Detailed() {
  return (
    <AWrap>
      <AHeader mode="FUEL MODE" title="EAT CLEAN" action={
        <Iq width={18} height={18}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></Iq>
      }/>
      <ADateStrip selected={16} />
      <div className="scr-body" style={{ paddingTop: 4 }}>

        {/* Today's fuel hero — kept compact */}
        <Card style={{ padding: 0, overflow: 'hidden', borderColor: A.warn, borderWidth: 1.5 }}>
          <div style={{ padding: '14px 16px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div className="eyebrow" style={{ color: A.ink3 }}>TODAY'S FUEL</div>
                <div style={{
                  fontFamily: A.display, fontWeight: 800, fontSize: 52,
                  color: A.warn, lineHeight: 1, letterSpacing: '-0.04em', marginTop: 4,
                }}>55</div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <StatusPill tone="warn" icon={<IArrowUp />}>SHOWING UP</StatusPill>
                <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600, marginTop: 4 }}>−20 vs last 7 days</div>
              </div>
            </div>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${A.rule}` }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 5 }}>
                {[
                  { v: 75, d: 'T', tone: 'good' },
                  { v: null, d: 'F' },
                  { v: null, d: 'S' },
                  { v: null, d: 'S' },
                  { v: null, d: 'M' },
                  { v: null, d: 'T' },
                  { v: null, d: 'W', today: true },
                ].map((x, i) => {
                  let bg = A.rest, fg = A.ink3;
                  if (x.tone === 'good') { bg = A.good; fg = '#fff'; }
                  if (x.today) { bg = A.card; fg = A.ink; }
                  return (
                    <div key={i} style={{
                      borderRadius: 10, padding: '8px 4px', textAlign: 'center',
                      background: bg, color: fg,
                      border: x.today ? `1.5px solid ${A.ink2}` : 'none',
                      opacity: x.v === null && !x.today ? 0.55 : 1,
                    }}>
                      <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 12, lineHeight: 1 }}>{x.v ?? '·'}</div>
                      <div style={{ fontSize: 9, fontWeight: 600, marginTop: 2, opacity: 0.75 }}>{x.d}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </Card>

        {/* QUICK / DETAILED toggle */}
        <div style={{
          display: 'flex', gap: 4, padding: 4, borderRadius: 14,
          background: A.rest, marginTop: 14, marginBottom: 12,
        }}>
          {[
            { l: 'QUICK', on: false },
            { l: 'DETAILED', on: true },
          ].map(t => (
            <div key={t.l} style={{
              flex: 1, textAlign: 'center', padding: '9px 0', borderRadius: 10,
              background: t.on ? A.card : 'transparent',
              boxShadow: t.on ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
              color: t.on ? A.ink : A.ink2,
              fontFamily: A.display, fontWeight: 700, fontSize: 12.5, letterSpacing: '0.14em',
            }}>{t.l}</div>
          ))}
        </div>

        {/* MACROS — 2x2 with rings */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          <MacroCard emoji="🔥" name="Calories" value={1240} max={1913} unit="kcal" color={A.bad} />
          <MacroCard emoji="💪" name="Protein"  value={86}   max={135}  unit="g"    color={A.good} />
          <MacroCard emoji="🌾" name="Carbs"    value={142}  max={224}  unit="g"    color={A.warn} />
          <MacroCard emoji="🥑" name="Fat"      value={28}   max={53}   unit="g"    color="#7344E5" />
        </div>

        {/* SNAP & TRACK + gallery */}
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <button style={{
            flex: 1, padding: '14px 0', borderRadius: 16, border: 'none',
            background: A.ink, color: '#fff',
            fontFamily: A.display, fontWeight: 700, fontSize: 13, letterSpacing: '0.16em',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            boxShadow: '0 6px 18px rgba(20,17,13,0.18)',
          }}>
            <Iq width={16} height={16}><path d="M21 19a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h3l2-3h4l2 3h3a2 2 0 012 2v11z"/><circle cx="12" cy="13" r="4"/></Iq>
            SNAP & TRACK
          </button>
          <button style={{
            width: 52, height: 52, borderRadius: 16, border: `1px solid ${A.rule}`,
            background: A.card, color: A.ink,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Iq width={18} height={18}><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="8.5" cy="10.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></Iq>
          </button>
        </div>

        {/* OR ENTER MANUALLY divider */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          margin: '18px 4px 12px',
        }}>
          <div style={{ flex: 1, height: 1, background: A.rule }} />
          <div className="eyebrow" style={{ color: A.ink3, fontSize: 10 }}>OR ENTER MANUALLY</div>
          <div style={{ flex: 1, height: 1, background: A.rule }} />
        </div>

        {/* Food name input */}
        <div style={{
          padding: '14px 16px', borderRadius: 14, background: A.card,
          border: `1px solid ${A.rule}`,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ fontSize: 18 }}>🥡</span>
          <div style={{
            flex: 1, fontFamily: A.display, fontWeight: 700, fontSize: 16,
            color: A.ink3, letterSpacing: '-0.005em',
          }}>Food name…</div>
        </div>

        {/* When chips */}
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 14, marginBottom: 8, paddingLeft: 4,
        }}>
          <div className="eyebrow" style={{ color: A.ink3 }}>WHEN</div>
          <div style={{ fontSize: 11, color: A.ink3, fontWeight: 500 }}>Tap one</div>
        </div>
        <div style={{ display: 'flex', gap: 6, overflowX: 'auto', marginLeft: -18, paddingLeft: 18, paddingRight: 18 }}>
          <MealChip icon="🌅" label="MORNING" on />
          <MealChip icon="☕" label="BRUNCH" />
          <MealChip icon="🥗" label="LUNCH" />
          <MealChip icon="🌃" label="EVENING" />
          <MealChip icon="🌙" label="LATE" />
        </div>

        {/* Log food CTA */}
        <button style={{
          width: '100%', marginTop: 18, padding: '16px 0', borderRadius: 16, border: 'none',
          background: A.ink, color: A.hype,
          fontFamily: A.display, fontWeight: 700, fontSize: 14, letterSpacing: '0.2em',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          boxShadow: '0 8px 22px rgba(20,17,13,0.2)',
        }}>
          LOG FOOD
          <span style={{
            width: 22, height: 22, borderRadius: 11, background: A.hype, color: A.ink,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Iq width={12} height={12} strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></Iq>
          </span>
        </button>
        <div style={{ height: 30 }} />
      </div>
      <ATabBar active="food" />
    </AWrap>
  );
}

// ─────────────────────────────────────────────────────────
// 1b) FUEL · MONTHLY RECAP — what you actually ate this month,
//     plus an AI analysis CTA.
//     Reuses InsSection + InsCard from insights.jsx.
// ─────────────────────────────────────────────────────────
function A_FuelRecap() {
  const items = [
    { emoji: '🍳', name: 'Omelette', days: 24, sub: '73 eggs cracked', tint: '#FFF4D6' },
    { emoji: '🍗', name: 'Chicken Breast', days: 16, sub: '3.2kg eaten', tint: '#FCE6E6' },
    { emoji: '🌯', name: 'Shawarma', days: 11, sub: null, tint: '#FFE9D6' },
    { emoji: '🍕', name: 'Pizza', days: 9, sub: null, tint: '#F0E2F6' },
  ];
  const maxDays = 30;

  return (
    <AWrap>
      <AHeader mode="FUEL MODE" title="RECAP" action={
        <Iq width={18} height={18}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></Iq>
      }/>
      <div className="scr-body">

        {/* month hero */}
        <div style={{ background: A.ink, borderRadius: 22, padding: '18px 18px 20px', position: 'relative', overflow: 'hidden' }}>
          {/* AI insight — future-self, not just stats */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 7,
            background: 'rgba(184,242,58,0.12)', border: `1px solid rgba(184,242,58,0.28)`,
            borderRadius: 999, padding: '6px 12px', marginBottom: 14,
          }}>
            <span style={{ color: A.hype, display: 'flex' }}><ISpark /></span>
            <span style={{ fontFamily: A.body, fontSize: 12, fontWeight: 600, color: '#fff' }}>Your organs are saying thank you.</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              width: 30, height: 30, borderRadius: 10, background: A.hype, color: A.ink,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto',
            }}><ISpark /></span>
            <div style={{ fontFamily: A.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.14em', color: A.hype, textTransform: 'uppercase' }}>30 days on the plate</div>
          </div>
          <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 21, color: '#fff', lineHeight: 1.18, letterSpacing: '-0.01em', marginTop: 14 }}>
            Your month,<br/>by the plate.
          </div>
          <div style={{ fontFamily: A.body, fontSize: 13.5, color: 'rgba(255,255,255,0.66)', lineHeight: 1.5, marginTop: 10 }}>
            Four staples made up most of your month — <strong style={{ color: '#fff' }}>eggs were the real MVP</strong>.
          </div>
        </div>

        {/* the list */}
        <div style={{ marginTop: 18, marginBottom: 8 }}>
          <InsSection>Most-eaten this month</InsSection>
          {items.map((it) => (
            <InsCard key={it.name} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
              <div style={{
                width: 40, height: 40, borderRadius: 12, background: it.tint,
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 19, flex: '0 0 auto',
              }}>{it.emoji}</div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 14, color: A.ink }}>{it.name}</div>
                  <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 14, color: A.ink, whiteSpace: 'nowrap' }}>
                    {it.days} <span style={{ fontSize: 10, fontWeight: 600, color: A.ink3 }}>DAYS</span>
                  </div>
                </div>
                <div style={{ height: 6, borderRadius: 3, background: A.rest, marginTop: 8, overflow: 'hidden' }}>
                  <div style={{ width: `${(it.days / maxDays) * 100}%`, height: '100%', borderRadius: 3, background: A.hype }} />
                </div>
                {it.sub && <div style={{ fontSize: 11.5, color: A.ink2, marginTop: 6 }}>{it.sub}</div>}
              </div>
            </InsCard>
          ))}
        </div>

        {/* AI analysis CTA */}
        <button style={{
          width: '100%', marginBottom: 14, height: 52, padding: 0, border: 'none', borderRadius: 14,
          background: A.ink, color: A.hype,
          fontFamily: A.display, fontWeight: 700, fontSize: 13, letterSpacing: '0.18em',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          boxShadow: '0 6px 18px rgba(20,17,13,0.2)',
        }}>
          <ISpark /> AI ANALYSIS
        </button>
      </div>
      <ATabBar active="food" />
    </AWrap>
  );
}

// ─────────────────────────────────────────────────────────
// 2) STRENGTH · BODY PARTS picker (GYM mode)
// ─────────────────────────────────────────────────────────
function A_Strength_BodyParts() {
  const parts = [
    { name: 'CHEST',     emoji: '🫁', stripe: '#F08070', tint: '#FCE6E6' },
    { name: 'BACK',      emoji: '⬅️', stripe: '#3FC7C0', tint: '#DEF5F3' },
    { name: 'SHOULDERS', emoji: '💪', stripe: '#F0C04A', tint: '#FFF4D6' },
    { name: 'LEGS',      emoji: '🦵', stripe: '#7BC95E', tint: '#E2F4D6' },
    { name: 'BICEPS',    emoji: '💪', stripe: '#5BA1F0', tint: '#E0EEFC' },
    { name: 'TRICEPS',   emoji: '🦾', stripe: '#B47AE0', tint: '#F0E2F6' },
    { name: 'ABS',       emoji: '🟫', stripe: '#F0A03C', tint: '#FFEAC9' },
  ];

  return (
    <AWrap>
      <AHeader mode="STRENGTH MODE" title="MOVE HARD" action={
        <Iq width={18} height={18}><circle cx="12" cy="12" r="3"/></Iq>
      }/>
      <ADateStrip selected={16} />
      <div className="scr-body" style={{ paddingTop: 4 }}>

        {/* Mode picker — GYM is active */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[
            { name: 'GYM',      sub: 'Pick body part', emoji: '🏋️', on: true },
            { name: 'SPORTS',   sub: 'Pick a sport',   emoji: '🏀' },
            { name: 'RUN/WALK', sub: 'Time & distance', emoji: '🏃' },
          ].map(m => (
            <div key={m.name} style={{
              padding: '14px 10px', borderRadius: 16, textAlign: 'center',
              background: A.card,
              border: `1.5px solid ${m.on ? A.ink : A.rule}`,
              boxShadow: m.on ? '0 1px 0 rgba(20,17,13,0.04)' : 'none',
            }}>
              <div style={{ fontSize: 22 }}>{m.emoji}</div>
              <div style={{
                fontFamily: A.display, fontWeight: 800, fontSize: 14,
                color: A.ink, marginTop: 6, letterSpacing: '0.04em',
              }}>{m.name}</div>
              <div style={{ fontSize: 10.5, color: A.ink3, marginTop: 2, fontWeight: 600 }}>{m.sub}</div>
            </div>
          ))}
        </div>

        {/* WHAT DID YOU TRAIN section */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '20px 4px 12px' }}>
          <div className="eyebrow">WHAT DID YOU TRAIN?</div>
          <div style={{ fontSize: 10.5, color: A.ink3, fontWeight: 600, letterSpacing: '0.08em' }}>0 / 7 LOGGED</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {parts.map((p) => (
            <div key={p.name} style={{
              padding: 0, borderRadius: 16, background: A.card,
              border: `1px solid ${A.rule}`, overflow: 'hidden',
              position: 'relative',
            }}>
              <div style={{ height: 4, background: p.stripe }} />
              <div style={{
                padding: '12px 12px 12px',
                display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10, background: p.tint,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18, flexShrink: 0,
                }}>{p.emoji}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: A.display, fontWeight: 800, fontSize: 14,
                    color: A.ink, letterSpacing: '0.02em',
                  }}>{p.name}</div>
                  <div style={{ fontSize: 10.5, color: A.ink3, fontWeight: 600, marginTop: 1 }}>Tap to log</div>
                </div>
                <Iq width={12} height={12} stroke={p.stripe} strokeWidth="2.5"><path d="M9 5l7 7-7 7"/></Iq>
              </div>
            </div>
          ))}
        </div>

        {/* TODAY'S SESSIONS preview */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '22px 4px 10px' }}>
          <div className="eyebrow">TODAY'S SESSIONS</div>
          <div style={{ fontSize: 10.5, color: A.ink3, fontWeight: 600 }}>03 LOGGED</div>
        </div>
        <Card style={{ padding: 0 }}>
          {[
            { kind: 'QUICK LOG',  detail: '14:52', rating: '50/100' },
            { kind: 'CHEST',      detail: '14:32', rating: '5/10', tag: 'MEDIUM' },
            { kind: 'RUN · 3.2K', detail: '12:08', rating: '7/10', tag: 'STRONG' },
          ].map((s, i, arr) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 12,
              padding: '14px 16px',
              borderBottom: i < arr.length - 1 ? `1px solid ${A.rule}` : 'none',
            }}>
              <div style={{
                padding: '5px 9px', borderRadius: 999, background: A.rest,
                fontFamily: A.body, fontWeight: 700, fontSize: 10.5,
                color: A.ink, letterSpacing: '0.08em',
              }}>{s.kind}</div>
              <div style={{ flex: 1 }} />
              <div style={{ fontFamily: A.mono, fontSize: 11, color: A.ink3, fontWeight: 600 }}>{s.detail}</div>
              <div style={{
                padding: '4px 10px', borderRadius: 6, background: A.rest,
                fontFamily: A.mono, fontWeight: 700, fontSize: 11, color: A.ink,
              }}>{s.rating}</div>
            </div>
          ))}
        </Card>

        {/* identity outcomes — who you're becoming, not just sets */}
        <div style={{ background: A.ink, borderRadius: 22, padding: '18px 18px 20px', marginTop: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{
              width: 30, height: 30, borderRadius: 10, background: A.hype, color: A.ink,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto',
            }}><ISpark /></span>
            <div style={{ fontFamily: A.mono, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.14em', color: A.hype, textTransform: 'uppercase' }}>this month's gains</div>
          </div>
          <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 19, color: '#fff', marginTop: 14, lineHeight: 1.25 }}>
            You're stronger than last month.
          </div>
          <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              'Confidence is becoming visible.',
              'The mirror is starting to agree.',
              'Showing up is becoming your identity.',
            ].map((line) => (
              <div key={line} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ color: A.hype, flex: '0 0 auto' }}><ICheck /></span>
                <div style={{ fontFamily: A.body, fontSize: 13.5, color: 'rgba(255,255,255,0.85)', lineHeight: 1.4 }}>{line}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ height: 30 }} />
      </div>
      <ATabBar active="str" />
    </AWrap>
  );
}

// ─────────────────────────────────────────────────────────
// 3) STRENGTH · CHEST sheet (modal bottom sheet)
// ─────────────────────────────────────────────────────────
function A_Strength_Chest() {
  // a dim of the body parts grid behind, then the sheet on top.
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden', background: A.bg }}>
      {/* dimmed background hint */}
      <div style={{ opacity: 0.35, pointerEvents: 'none', filter: 'blur(0.4px)' }}>
        <A_Strength_BodyParts />
      </div>
      <div style={{
        position: 'absolute', inset: 0, background: 'rgba(20,17,13,0.32)',
      }} />

      {/* Sheet */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: '#FFFBEC',
        borderRadius: '24px 24px 0 0',
        padding: '12px 18px 110px',
        boxShadow: '0 -8px 30px rgba(20,17,13,0.25)',
        maxHeight: '78%', overflowY: 'auto',
      }}>
        {/* grabber */}
        <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 10px' }}>
          <div style={{ width: 38, height: 4, borderRadius: 2, background: A.ink3, opacity: 0.45 }} />
        </div>

        {/* header */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          paddingBottom: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 38, height: 38, borderRadius: 10, background: '#FCE6E6',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 19,
            }}>🫁</div>
            <div style={{
              fontFamily: A.display, fontWeight: 800, fontSize: 22,
              color: A.ink, letterSpacing: '0.02em',
            }}>CHEST</div>
          </div>
          <div style={{
            width: 32, height: 32, borderRadius: 10, background: A.rest,
            color: A.ink, display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Iq width={16} height={16} strokeWidth="2.5"><path d="M6 6l12 12M18 6L6 18"/></Iq>
          </div>
        </div>

        {/* exercise chips */}
        <div className="eyebrow" style={{ color: A.ink3, marginBottom: 8 }}>EXERCISE</div>
        <div style={{
          display: 'flex', gap: 6, overflowX: 'auto',
          marginLeft: -18, paddingLeft: 18, paddingRight: 18, paddingBottom: 4,
        }}>
          {[
            { name: 'Bench Press', on: true },
            { name: 'Dumbbell Flies' },
            { name: 'Push-ups' },
            { name: 'Cable Crossover' },
            { name: 'Dips' },
            { name: 'Incline Press' },
          ].map((e) => (
            <div key={e.name} style={{
              padding: '9px 14px', borderRadius: 999,
              background: e.on ? A.ink : A.card,
              border: `1.5px solid ${e.on ? A.ink : A.rule}`,
              color: e.on ? '#fff' : A.ink,
              fontFamily: A.display, fontWeight: 700, fontSize: 13, letterSpacing: '0.02em',
              whiteSpace: 'nowrap', flexShrink: 0,
            }}>{e.name}</div>
          ))}
        </div>

        {/* type in */}
        <div style={{ position: 'relative', marginTop: 12 }}>
          <div style={{
            padding: '13px 16px', borderRadius: 12, background: A.card,
            border: `1px solid ${A.rule}`,
            display: 'flex', alignItems: 'center', gap: 10,
            color: A.ink3, fontFamily: A.body, fontSize: 14, fontWeight: 500,
          }}>
            <Iq width={16} height={16}><path d="M12 5v14M5 12h14"/></Iq>
            Or type a custom exercise…
          </div>
        </div>

        {/* SETS list */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '18px 0 8px' }}>
          <div className="eyebrow" style={{ color: A.ink3 }}>SETS · BENCH PRESS</div>
          <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600 }}>2 LOGGED</div>
        </div>

        {[
          { n: 1, reps: 10, w: 60, done: true },
          { n: 2, reps: 8,  w: 70, done: true },
        ].map(s => (
          <div key={s.n} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '10px 12px',
            background: A.card, border: `1px solid ${A.rule}`, borderRadius: 12,
            marginBottom: 6,
          }}>
            <div style={{
              width: 26, height: 26, borderRadius: 8,
              background: A.hype, color: A.ink,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: A.display, fontWeight: 800, fontSize: 12,
            }}>{s.n}</div>
            <div style={{ flex: 1 }} />
            <div style={{
              fontFamily: A.display, fontWeight: 800, fontSize: 16,
              color: A.ink, letterSpacing: '-0.01em',
            }}>
              {s.reps}<span style={{ fontSize: 11, color: A.ink3, fontWeight: 500 }}> reps</span>
            </div>
            <div style={{ width: 1, height: 16, background: A.rule }} />
            <div style={{
              fontFamily: A.display, fontWeight: 800, fontSize: 16,
              color: A.ink, letterSpacing: '-0.01em',
            }}>
              {s.w}<span style={{ fontSize: 11, color: A.ink3, fontWeight: 500 }}> kg</span>
            </div>
            <button style={{
              border: 'none', background: 'transparent', color: A.ink3, padding: 4,
            }}>
              <Iq width={14} height={14}><path d="M3 6h18M19 6l-2 14a2 2 0 01-2 2H9a2 2 0 01-2-2L5 6M10 11v6M14 11v6M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"/></Iq>
            </button>
          </div>
        ))}

        {/* current set being entered */}
        <div style={{
          padding: 14, borderRadius: 14, background: '#FFFBEC',
          border: `1.5px solid ${A.ink}`,
          marginTop: 8,
        }}>
          <div className="eyebrow" style={{ color: A.ink, marginBottom: 10, fontSize: 10 }}>SET 3 · IN PROGRESS</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { label: 'REPS', value: '8' },
              { label: 'WEIGHT', value: '75', unit: 'kg' },
            ].map(f => (
              <div key={f.label} style={{
                padding: '10px 14px', borderRadius: 12, background: A.card,
                border: `1px solid ${A.rule}`,
              }}>
                <div style={{ fontSize: 10, color: A.ink3, fontWeight: 700, letterSpacing: '0.14em' }}>{f.label}{f.unit ? ` (${f.unit})` : ''}</div>
                <div style={{
                  fontFamily: A.display, fontWeight: 800, fontSize: 28,
                  color: A.ink, letterSpacing: '-0.03em', marginTop: 2, lineHeight: 1,
                }}>{f.value}<span style={{ display: 'inline-block', width: 2, height: 24, background: A.ink, marginLeft: 3, verticalAlign: 'middle' }}/></div>
              </div>
            ))}
          </div>
          <button style={{
            width: '100%', marginTop: 10, padding: '11px 0', borderRadius: 10, border: `1.5px dashed ${A.ink}`,
            background: 'transparent', color: A.ink,
            fontFamily: A.display, fontWeight: 700, fontSize: 12, letterSpacing: '0.18em',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <Iq width={13} height={13} strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></Iq>
            ADD THIS SET
          </button>
        </div>

        {/* actions */}
        <div style={{ display: 'flex', gap: 8, marginTop: 14 }}>
          <button style={{
            flex: 1, padding: '13px 0', borderRadius: 14, border: `1px solid ${A.rule}`,
            background: A.card, color: A.ink2,
            fontFamily: A.display, fontWeight: 700, fontSize: 12, letterSpacing: '0.16em',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}>
            <ICheck /> SAVE EXERCISE
          </button>
          <button style={{
            flex: 1.2, padding: '13px 0', borderRadius: 14, border: 'none',
            background: A.ink, color: A.hype,
            fontFamily: A.display, fontWeight: 700, fontSize: 12, letterSpacing: '0.18em',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            boxShadow: '0 6px 18px rgba(20,17,13,0.22)',
          }}>
            SAVE SESSION
            <Iq width={12} height={12} strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></Iq>
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  A_Fuel_Detailed, A_FuelRecap, A_Strength_BodyParts, A_Strength_Chest,
  MacroRing, MacroCard, MealChip,
});