// Variation A — Screens (Dashboard, Discipline, Fuel, Strength, Challenges)
// Relies on globals from screens-a.jsx

// shared building blocks for A screens
function Card({ children, style, accent }) {
  return (
    <div style={{
      background: A.card,
      borderRadius: 22,
      padding: 18,
      border: `1px solid ${A.rule}`,
      position: 'relative',
      ...(accent ? { borderColor: accent, borderWidth: 1.5 } : {}),
      ...style,
    }}>{children}</div>
  );
}

function StatusPill({ tone = 'bad', children, icon }) {
  const map = {
    bad:  { bg: '#FCE6E6', fg: A.bad, dot: A.bad },
    warn: { bg: '#FFF1DC', fg: A.warn, dot: A.warn },
    good: { bg: '#E2F7EC', fg: A.good, dot: A.good },
    hype: { bg: A.hype, fg: A.ink, dot: A.ink },
  }[tone];
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '5px 10px', borderRadius: 999,
      background: map.bg, color: map.fg,
      fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase',
      fontFamily: A.body,
    }}>
      {icon}<span>{children}</span>
    </div>
  );
}

// ─── Mini bar — used as 7-day micro chart
function MiniBars({ values, max = 100, height = 56, highlight = 6, color = A.ink }) {
  const days = ['M','T','W','T','F','S','S'];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6, height: height + 18 }}>
      {values.map((v, i) => {
        const h = Math.max(4, (v / max) * height);
        const isToday = i === highlight;
        const bg = v === 0 ? A.rest : (isToday ? A.hype : color + (v < 40 ? '40' : 'B0'));
        return (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-end' }}>
            <div style={{
              width: '100%', height: h, borderRadius: 6, background: bg,
              boxShadow: isToday ? `0 0 0 1.5px ${A.ink}` : 'none',
              transformOrigin: 'bottom',
            }} className="anim-fillbar"/>
            <div style={{
              fontSize: 10, marginTop: 6, color: isToday ? A.ink : A.ink3,
              fontWeight: isToday ? 700 : 500, fontFamily: A.body,
            }}>{days[i]}</div>
          </div>
        );
      })}
    </div>
  );
}

// ─── Future-mirror trend chart — 12-week trajectory line + area fill ──
function MirrorTrendChart({ tone, points }) {
  const w = 280, h = 92;
  const n = points.length;
  const max = Math.max(...points), min = Math.min(...points);
  const xStep = w / (n - 1);
  const toY = (v) => h - 6 - ((v - min) / (max - min)) * (h - 12);
  const coords = points.map((v, i) => [i * xStep, toY(v)]);
  const line = coords.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
  const area = `${line} L${w},${h} L0,${h} Z`;
  const [lx, ly] = coords[coords.length - 1];
  const gid = `mirror-grad-${tone.replace('#', '')}`;
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: 'block' }}>
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={tone} stopOpacity="0.35" />
          <stop offset="100%" stopColor={tone} stopOpacity="0" />
        </linearGradient>
      </defs>
      <line x1="0" y1={h * 0.3} x2={w} y2={h * 0.3} stroke="rgba(255,255,255,0.08)" strokeWidth="1" />
      <path d={area} fill={`url(#${gid})`} />
      <path d={line} fill="none" stroke={tone} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={lx} cy={ly} r="9" fill="none" stroke={tone} strokeWidth="1.5" opacity="0.35" />
      <circle cx={lx} cy={ly} r="4.5" fill={tone} />
    </svg>
  );
}

// ─── Future-mirror card data — "improving" / "slipping" trajectories ──
const MIRROR_DATA = {
  improving: {
    score: 72, delta: '+12', tone: A.good, trendLabel: 'TRENDING UP', activeTab: 'improving',
    points: [38, 42, 40, 46, 50, 48, 54, 58, 56, 62, 66, 70, 78],
    counts: { improving: 6, slipping: 5 }, showMore: 2,
    items: [
      { emoji: '💪', label: 'Gaining more muscle', cat: 'STRENGTH', delta: '+14%' },
      { emoji: '🫁', label: 'Lungs recovering fast', cat: 'CARDIO', delta: '+9%' },
      { emoji: '🍎', label: 'Immunity climbing', cat: 'NUTRITION', delta: '+11%' },
      { emoji: '😴', label: 'Deeper sleep cycles', cat: 'RECOVERY', delta: '+18%' },
    ],
  },
  slipping: {
    score: 34, delta: '-19', tone: A.bad, trendLabel: 'NEEDS WORK', activeTab: 'slipping',
    points: [78, 74, 70, 68, 64, 62, 58, 56, 52, 48, 44, 40, 34],
    counts: { improving: 6, slipping: 5 }, showMore: 1,
    items: [
      { emoji: '📵', label: 'Focus slipping to screens', cat: 'ATTENTION', delta: '-23%' },
      { emoji: '🍷', label: 'Late-night snacking up', cat: 'DIET', delta: '-12%' },
      { emoji: '⏰', label: 'Bedtime drifting later', cat: 'SLEEP', delta: '-9%' },
      { emoji: '💧', label: 'Hydration dropping off', cat: 'HEALTH', delta: '-8%' },
    ],
  },
};

// ─── Future mirror — 12-week identity trajectory card ──
function FutureMirrorCard({ state = 'improving' }) {
  const d = MIRROR_DATA[state] ?? MIRROR_DATA.improving;
  const tone = d.tone;
  return (
    <Card style={{ background: A.ink, border: 'none' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
        <div className="eyebrow" style={{ color: A.hype, display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: A.hype, flex: '0 0 auto' }} />
          BECOMING
        </div>
        <div style={{ textAlign: 'right', flex: '0 0 auto' }}>
          <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 32, color: '#fff', lineHeight: 1 }}>{d.score}</div>
          <div style={{
            marginTop: 2, fontFamily: A.mono, fontSize: 11, fontWeight: 700, color: tone,
            display: 'flex', alignItems: 'center', gap: 3, justifyContent: 'flex-end',
          }}>
            {d.delta.startsWith('-') ? <IArrowDown /> : <IArrowUp />}{d.delta} pts
          </div>
        </div>
      </div>

      <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 21, color: '#fff', marginTop: 8, lineHeight: 1.2 }}>
        Future mirror
      </div>
      <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.45)', marginTop: 3, fontFamily: A.body }}>
        where you're heading · 12 wk
      </div>

      <div style={{ marginTop: 16 }}>
        <MirrorTrendChart tone={tone} points={d.points} />
      </div>
      <div style={{
        display: 'flex', justifyContent: 'space-between', marginTop: 8,
        fontFamily: A.mono, fontSize: 9.5, letterSpacing: '0.12em', textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.35)',
      }}>
        <span>12 wk ago</span>
        <span style={{ color: tone, fontWeight: 700 }}>{d.trendLabel}</span>
        <span>now</span>
      </div>

      {/* improving / slipping toggle */}
      <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
        {[
          { key: 'improving', label: 'IMPROVING', count: d.counts.improving, dot: A.good },
          { key: 'slipping', label: 'SLIPPING', count: d.counts.slipping, dot: A.bad },
        ].map((t) => {
          const active = t.key === d.activeTab;
          return (
            <div key={t.key} style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              padding: '9px 0', borderRadius: 999,
              background: active ? 'rgba(255,255,255,0.08)' : 'transparent',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.dot, flex: '0 0 auto' }} />
              <span style={{
                fontFamily: A.body, fontSize: 12, fontWeight: 700, letterSpacing: '0.04em',
                color: active ? '#fff' : 'rgba(255,255,255,0.5)',
              }}>{t.label} <span style={{ color: 'rgba(255,255,255,0.4)' }}>{t.count}</span></span>
            </div>
          );
        })}
      </div>

      {/* insight rows */}
      <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {d.items.map((it) => (
          <div key={it.label} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            background: 'rgba(255,255,255,0.04)', borderRadius: 14,
            padding: '11px 14px', borderLeft: `3px solid ${tone}`,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 9, background: 'rgba(255,255,255,0.06)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flex: '0 0 auto',
            }}>{it.emoji}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 13.5, color: '#fff', lineHeight: 1.3 }}>{it.label}</div>
              <div style={{
                fontFamily: A.mono, fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.4)', marginTop: 3,
              }}>{it.cat}</div>
            </div>
            <div style={{
              fontFamily: A.mono, fontSize: 12, fontWeight: 700, color: tone, flex: '0 0 auto',
              display: 'flex', alignItems: 'center', gap: 2,
            }}>
              {it.delta.startsWith('-') ? <IArrowDown /> : <IArrowUp />}{it.delta}
            </div>
          </div>
        ))}
        <div style={{
          textAlign: 'center', padding: '11px 0', borderRadius: 999,
          background: 'rgba(255,255,255,0.04)', fontFamily: A.body, fontSize: 11, fontWeight: 700,
          color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em', textTransform: 'uppercase',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          Show {d.showMore} more
          <Iq width={12} height={12} strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></Iq>
        </div>
      </div>
    </Card>
  );
}

// ─── Becoming — momentum arc gauge ──
function MomentumGauge({ score = 72, tone = A.good }) {
  const size = 190, cx = 95, cy = 95, r = 74;
  const startDeg = 120, sweep = 300;
  const toXY = (deg) => {
    const rad = (deg * Math.PI) / 180;
    return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
  };
  const [sx, sy] = toXY(startDeg);
  const [ex, ey] = toXY(startDeg + sweep);
  const fillDeg = startDeg + sweep * Math.min(score / 100, 1);
  const [fx, fy] = toXY(fillDeg);
  const fillLarge = sweep * (score / 100) > 180 ? 1 : 0;
  const trackD = `M${sx.toFixed(1)},${sy.toFixed(1)} A${r},${r} 0 1 1 ${ex.toFixed(1)},${ey.toFixed(1)}`;
  const fillD  = `M${sx.toFixed(1)},${sy.toFixed(1)} A${r},${r} 0 ${fillLarge} 1 ${fx.toFixed(1)},${fy.toFixed(1)}`;
  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
        <defs>
          <linearGradient id="mgauge-grad" x1="0" y1="1" x2="1" y2="0">
            <stop offset="0%" stopColor={tone} stopOpacity="0.45" />
            <stop offset="100%" stopColor={tone} />
          </linearGradient>
        </defs>
        <path d={trackD} stroke={A.rest} strokeWidth="13" strokeLinecap="round" fill="none" />
        <path d={fillD} stroke="url(#mgauge-grad)" strokeWidth="13" strokeLinecap="round" fill="none" />
        <circle cx={fx} cy={fy} r="7" fill={tone} />
        <circle cx={fx} cy={fy} r="12" fill="none" stroke={tone} strokeWidth="1.5" opacity="0.3" />
      </svg>
      <div style={{
        position: 'absolute', inset: 0, top: 8,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 54, color: A.ink, lineHeight: 1, letterSpacing: '-0.03em' }}>
          {score}
        </div>
        <div style={{ fontFamily: A.mono, fontSize: 9.5, letterSpacing: '0.14em', color: A.ink3, textTransform: 'uppercase', marginTop: 4 }}>
          MOMENTUM
        </div>
      </div>
    </div>
  );
}

// ─── Becoming — mini momentum chart ──
function MomentumChart({ tone, points }) {
  const w = 300, h = 72;
  const n = points.length;
  const max = Math.max(...points), min = Math.min(...points);
  const xStep = w / (n - 1);
  const toY = (v) => h - 6 - ((v - min) / (max - min)) * (h - 12);
  const coords = points.map((v, i) => [i * xStep, toY(v)]);
  const line = coords.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
  const area = `${line} L${w},${h} L0,${h} Z`;
  const [lx, ly] = coords[coords.length - 1];
  const gid = `mmt-grad-${tone.replace('#', '')}`;
  return (
    <svg width="100%" height={h} viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ display: 'block' }}>
      <defs>
        <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={tone} stopOpacity="0.2" />
          <stop offset="100%" stopColor={tone} stopOpacity="0" />
        </linearGradient>
      </defs>
      <line x1="0" y1={h * 0.3} x2={w} y2={h * 0.3} stroke={A.rule} strokeWidth="1" />
      <line x1="0" y1={h * 0.65} x2={w} y2={h * 0.65} stroke={A.rule} strokeWidth="1" />
      <path d={area} fill={`url(#${gid})`} />
      <path d={line} fill="none" stroke={tone} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={lx} cy={ly} r="4.5" fill={tone} stroke="#fff" strokeWidth="2" />
    </svg>
  );
}

// ─── Becoming — circular emoji avatar with arc ring ──
function EmojiRing({ emoji, tone = A.good, size = 72 }) {
  const cx = size / 2, cy = size / 2, r = size / 2 - 4;
  const startDeg = 120, sweep = 270;
  const toXY = (deg) => {
    const rad = (deg * Math.PI) / 180;
    return [cx + r * Math.cos(rad), cy + r * Math.sin(rad)];
  };
  const [sx, sy] = toXY(startDeg);
  const [ex, ey] = toXY(startDeg + sweep);
  const arcD = `M${sx.toFixed(1)},${sy.toFixed(1)} A${r},${r} 0 1 1 ${ex.toFixed(1)},${ey.toFixed(1)}`;
  return (
    <div style={{ position: 'relative', width: size, height: size, flex: '0 0 auto' }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ position: 'absolute', inset: 0 }}>
        <circle cx={cx} cy={cy} r={r} fill={A.rest} />
        <path d={arcD} stroke={tone} strokeWidth="3.5" strokeLinecap="round" fill="none" />
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: size * 0.38,
      }}>{emoji}</div>
    </div>
  );
}

// ─── Becoming — data ──
const BECOMING_DATA = {
  improving: {
    score: 72, delta: '+12', tone: A.good, trendLabel: 'TRENDING UP',
    points: [38, 42, 40, 46, 50, 48, 54, 58, 56, 62, 66, 70, 78],
    tags: ['Stronger', 'Smoke-free', 'Immune', 'A runner', 'Sharper', 'Calmer'],
    signalCount: 6,
    items: [
      { emoji: '💪', title: 'You are becoming stronger',    cat: 'STRENGTH',  delta: '+14%', wm: '68', copy: 'Lifting 14% heavier than 12 weeks ago.' },
      { emoji: '📱', title: 'Using Instagram more',          cat: 'FOCUS',     delta: '-16%', wm: '38', copy: 'Screen time on Instagram is up 16% this week.' },
      { emoji: '🫁', title: 'Your lungs are recovering fast', cat: 'CARDIO',    delta: '+9%',  wm: '55', copy: "You're smoking 40% fewer cigarettes than a month ago." },
      { emoji: '🍎', title: 'Your immunity is increasing',   cat: 'NUTRITION', delta: '+11%', wm: '62', copy: 'More whole foods, fewer sick days logged.' },
      { emoji: '🏃', title: 'You are becoming a runner',     cat: 'ENDURANCE', delta: '+18%', wm: '74', copy: '5K pace down 1:10/km since you started.' },
    ],
    showMore: 2,
  },
  slipping: {
    score: 34, delta: '-19', tone: A.bad, trendLabel: 'NEEDS WORK',
    points: [78, 74, 70, 68, 64, 62, 58, 56, 52, 48, 44, 40, 34],
    tags: ['Distracted', 'Poor sleep', 'Under-hydrated', 'Skipping meals', 'Sedentary'],
    signalCount: 5,
    items: [
      { emoji: '📵', title: "You're losing focus",              cat: 'ATTENTION', delta: '-23%', wm: '29', copy: 'Screen time is up sharply versus last month.' },
      { emoji: '🍷', title: 'Late-night snacking is back',      cat: 'DIET',      delta: '-12%', wm: '41', copy: 'Eating after 9pm more often than not.' },
      { emoji: '⏰', title: 'Your sleep schedule is drifting',  cat: 'SLEEP',     delta: '-9%',  wm: '45', copy: 'Bedtime has slipped almost an hour later.' },
      { emoji: '💧', title: "You're under-hydrated",            cat: 'HEALTH',    delta: '-8%',  wm: '48', copy: 'Water intake is down from your weekly average.' },
    ],
    showMore: 1,
  },
};

// ─────────────────────────────────────────────────────────
// 0) BECOMING — "Future mirror" detail screen
// ─────────────────────────────────────────────────────────
function A_Becoming({ state = 'improving' } = {}) {
  const d = BECOMING_DATA[state] ?? BECOMING_DATA.improving;
  const tone = d.tone;
  const up = !d.delta.startsWith('-');
  return (
    <AWrap>
      <AHeader mode="FUTURE MIRROR" title="BECOMING" action={<ISpark />} />
      <div className="scr-body">

        {/* ── momentum hero card ── */}
        <Card style={{ padding: 20, textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: tone, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginBottom: 16 }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: tone }} />
            FUTURE MIRROR · 12 WEEKS
          </div>

          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <MomentumGauge score={d.score} tone={tone} />
          </div>

          {/* pts pill */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            margin: '14px auto 0', padding: '6px 14px', borderRadius: 999,
            background: `${tone}1A`, border: `1px solid ${tone}40`,
            fontFamily: A.mono, fontSize: 11, fontWeight: 700, color: tone, letterSpacing: '0.08em',
          }}>
            {up ? <IArrowUp /> : <IArrowDown />}{d.delta} PTS THIS MONTH
          </div>

          {/* headline */}
          <div style={{
            fontFamily: A.display, fontWeight: 800, fontSize: 22, color: A.ink,
            lineHeight: 1.2, marginTop: 14, textAlign: 'center',
          }}>
            {up ? "You're becoming someone new" : "It's time to course-correct"}
          </div>

          {/* identity tags */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center', marginTop: 14 }}>
            {d.tags.map((tag) => (
              <div key={tag} style={{
                display: 'flex', alignItems: 'center', gap: 5,
                padding: '6px 12px', borderRadius: 999,
                background: A.rest,
                fontFamily: A.body, fontSize: 13, fontWeight: 500, color: A.ink2,
              }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: tone }} />
                {tag}
              </div>
            ))}
          </div>

          {/* mini momentum chart */}
          <div style={{ marginTop: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <div className="eyebrow" style={{ fontSize: 10, color: A.ink2 }}>MOMENTUM · 12 WK</div>
              <div className="eyebrow" style={{ fontSize: 10, color: tone }}>{d.trendLabel}</div>
            </div>
            <MomentumChart tone={tone} points={d.points} />
          </div>
        </Card>

        {/* ── signals section ── */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', margin: '20px 0 10px' }}>
          <div className="eyebrow" style={{ color: A.ink, fontSize: 12 }}>THE NEW YOU</div>
          <div className="eyebrow" style={{ color: A.ink3, fontSize: 11 }}>{d.signalCount} SIGNALS</div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {d.items.map((it) => {
            const itTone = it.delta.startsWith('-') ? A.bad : A.good;
            return (
              <Card key={it.title} style={{ padding: 16, position: 'relative', overflow: 'hidden' }}>
                {/* watermark */}
                <div style={{
                  position: 'absolute', right: 4, bottom: -10,
                  fontFamily: A.display, fontWeight: 800, fontSize: 68, lineHeight: 1,
                  color: A.ink, opacity: 0.055, letterSpacing: '-0.04em', pointerEvents: 'none', userSelect: 'none',
                }}>{it.wm}</div>

                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <EmojiRing emoji={it.emoji} tone={itTone} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
                      <div style={{
                        fontFamily: A.mono, fontSize: 10, fontWeight: 700, letterSpacing: '0.1em',
                        padding: '3px 9px', borderRadius: 999, background: A.rest, color: A.ink2,
                      }}>{it.cat}</div>
                      <div style={{
                        fontFamily: A.mono, fontSize: 11, fontWeight: 700, color: itTone,
                        display: 'flex', alignItems: 'center', gap: 2,
                      }}>
                        {it.delta.startsWith('-') ? <IArrowDown /> : <IArrowUp />}{it.delta}
                      </div>
                    </div>
                    <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 15, color: A.ink, lineHeight: 1.25 }}>
                      {it.title}
                    </div>
                    <div style={{ fontSize: 12.5, color: A.ink2, marginTop: 5, lineHeight: 1.4, fontFamily: A.body }}>
                      {it.copy}
                    </div>
                  </div>
                </div>
              </Card>
            );
          })}
        </div>

        {/* show more */}
        <div style={{
          marginTop: 10, padding: '13px 0', borderRadius: 16,
          border: `1px solid ${A.rule}`, background: A.card,
          textAlign: 'center', fontFamily: A.body, fontSize: 12, fontWeight: 700,
          color: A.ink2, letterSpacing: '0.06em', textTransform: 'uppercase',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        }}>
          Show {d.showMore} more
          <Iq width={13} height={13} strokeWidth="2.5"><path d="M6 9l6 6 6-6"/></Iq>
        </div>

        {/* CTA */}
        <div style={{
          marginTop: 12, padding: '16px 0', borderRadius: 999,
          background: A.hype, textAlign: 'center',
          fontFamily: A.display, fontWeight: 800, fontSize: 16, color: A.ink,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <ISpark style={{ width: 18, height: 18 }} />
          Set your next goal
        </div>

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

// ─────────────────────────────────────────────────────────
// 1) DASHBOARD
// ─────────────────────────────────────────────────────────
function A_Dashboard({ name = 'GRITTT', showBecoming = true, mirrorState = 'improving' } = {}) {
  return (
    <AWrap>
      <AHeader mode="DASHBOARD" title={name} action={
        <Iq width={18} height={18}><path d="M9 5l7 7-7 7"/></Iq>
      }/>
      <div className="scr-body">
        {/* becoming — identity trajectory, not just scores */}
        {showBecoming && <FutureMirrorCard state={mirrorState} />}

        {/* yesterday hero */}
        <Card style={{ marginTop: showBecoming ? 14 : 0, padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '16px 18px 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div className="eyebrow" style={{ color: A.ink3 }}>YESTERDAY</div>
              <div style={{ marginTop: 6 }}>
                <StatusPill tone="bad" icon={<IArrowDown />}>BELOW POTENTIAL</StatusPill>
              </div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div className="eyebrow" style={{ color: A.ink3 }}>STREAK</div>
              <div style={{
                marginTop: 4, display: 'inline-flex', alignItems: 'center', gap: 4,
                fontFamily: A.display, fontWeight: 700, color: A.ink, fontSize: 18,
              }}>
                <span style={{ color: A.warn }}><IFire /></span>3 DAYS
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 4, position: 'relative' }}>
            <div style={{
              position: 'absolute', width: 220, height: 220, borderRadius: '50%',
              background: `radial-gradient(circle, ${A.bad}26 0%, transparent 65%)`,
              filter: 'blur(2px)', pointerEvents: 'none',
            }} />
            <AGauge value={22} color={A.bad} />
          </div>
          {/* mode breakdown */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3,1fr)',
            borderTop: `1px solid ${A.rule}`,
          }}>
            {[
              { k: 'DISCIPLINE', v: 22, tone: A.bad, emoji: '🧠' },
              { k: 'FOOD',       v: 75, tone: A.good, emoji: '🍽️' },
              { k: 'PHYSICAL',   v: 37, tone: A.warn, emoji: '💪' },
            ].map((m, i, arr) => (
              <div key={m.k} style={{
                padding: '14px 8px',
                borderRight: i < arr.length - 1 ? `1px solid ${A.rule}` : 'none',
                textAlign: 'center',
              }}>
                <div style={{ fontSize: 15 }}>{m.emoji}</div>
                <div className="eyebrow" style={{ color: A.ink3, fontSize: 10, marginTop: 4 }}>{m.k}</div>
                <div style={{
                  marginTop: 4, fontFamily: A.display, fontWeight: 700, fontSize: 26,
                  color: A.ink, lineHeight: 1, letterSpacing: '-0.02em',
                }} className="anim-countup">{m.v}</div>
                <div style={{
                  marginTop: 6, height: 4, borderRadius: 4, background: A.rest, overflow: 'hidden',
                }}>
                  <div className="anim-fillbar" style={{ height: '100%', width: `${m.v}%`, background: m.tone, borderRadius: 4 }} />
                </div>
              </div>
            ))}
          </div>
        </Card>

        {/* 7-day score */}
        <Card style={{ marginTop: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
            <div>
              <div className="eyebrow">7-DAY SCORE</div>
              <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 22, color: A.ink, marginTop: 2 }}>
                AVG 48<span style={{ fontSize: 13, color: A.ink3, fontWeight: 500 }}> / 100</span>
              </div>
            </div>
            <div style={{
              display: 'flex', gap: 4, padding: 3, borderRadius: 999,
              background: A.rest,
            }}>
              {['HABITS', 'FOOD', 'PHYS'].map((t, i) => (
                <div key={t} style={{
                  padding: '6px 11px', borderRadius: 999,
                  background: i === 0 ? A.ink : 'transparent',
                  color: i === 0 ? '#fff' : A.ink2,
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                  fontFamily: A.body,
                }}>{t}</div>
              ))}
            </div>
          </div>
          <MiniBars values={[68, 54, 32, 0, 71, 38, 22]} highlight={6} />
        </Card>

        {/* insight rows */}
        {[
          { mode: 'FOOD', emoji: '🍽️', tint: '#FCE6E6', avg: 77, tone: 'bad', state: 'SLIPPING', copy: 'Down 23 pts this week. Same pattern as last week — fix lunches.', delta: '-23' },
          { mode: 'PHYSICAL', emoji: '💪', tint: '#FFF1DC', avg: 63, tone: 'warn', state: 'WAVERING', copy: 'Missed 2 sessions. One sweat today gets you back on the line.', delta: '-12' },
          { mode: 'DISCIPLINE', emoji: '🧠', tint: '#E2F7EC', avg: 41, tone: 'good', state: 'BUILDING', copy: 'Cold showers locked in 4 days running. Stack one more habit.', delta: '+8' },
        ].map((row) => (
          <Card key={row.mode} style={{ marginTop: 10, padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12 }}>
              <div style={{
                width: 38, height: 38, borderRadius: 11, background: row.tint, flex: '0 0 auto',
                display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
              }}>{row.emoji}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div className="eyebrow">{row.mode}</div>
                  <StatusPill tone={row.tone}>{row.state}</StatusPill>
                </div>
                <div style={{ marginTop: 2, fontSize: 13.5, color: A.ink2, lineHeight: 1.4, maxWidth: 250 }}>{row.copy}</div>
              </div>
              <div style={{ textAlign: 'right', flex: '0 0 auto' }}>
                <div className="eyebrow" style={{ color: A.ink3 }}>AVG</div>
                <div style={{ fontFamily: A.display, fontSize: 22, fontWeight: 700, color: A.ink, lineHeight: 1 }}>{row.avg}</div>
                <div style={{
                  marginTop: 4, fontSize: 11, fontWeight: 700, fontFamily: A.mono,
                  color: row.delta.startsWith('-') ? A.bad : A.good,
                }}>{row.delta}</div>
              </div>
            </div>
          </Card>
        ))}
        <div style={{ height: 30 }} />
      </div>
      <ATabBar active="user" />
    </AWrap>
  );
}

// ─────────────────────────────────────────────────────────
// 2) DISCIPLINE
// ─────────────────────────────────────────────────────────
function A_Discipline() {
  const habits = [
    { name: 'COLD SHOWERS ONLY', imp: 5, done: true,  streak: 4 },
    { name: 'DIGITAL DETOX',     imp: 5, done: false, streak: 1 },
    { name: '2 HOURS OF LEARNING', imp: 5, done: true, streak: 12 },
    { name: 'NO SUGAR',          imp: 6, done: false, streak: 0 },
    { name: 'MORNING RUN',       imp: 6, done: false, streak: 2 },
  ];
  const score = 30;
  return (
    <AWrap>
      <AHeader mode="DISCIPLINE MODE" title="LOCK IN" 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 }}>
        {/* score block */}
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 4 }}>
          <AGauge value={score} color={A.warn} />
        </div>
        <div style={{ textAlign: 'center', marginBottom: 14 }}>
          <StatusPill tone="warn" icon={<IArrowUp />}>BUILDING MOMENTUM</StatusPill>
        </div>

        {/* segmented control */}
        <div style={{
          display: 'flex', gap: 4, padding: 4, borderRadius: 14,
          background: A.rest, marginBottom: 10,
        }}>
          {['BUILD', 'CONTROL'].map((t, i) => (
            <div key={t} style={{
              flex: 1, textAlign: 'center', padding: '10px 0',
              borderRadius: 10,
              background: i === 0 ? A.card : 'transparent',
              boxShadow: i === 0 ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
              color: i === 0 ? A.ink : A.ink2,
              fontFamily: A.display, fontWeight: 700, fontSize: 13, letterSpacing: '0.12em',
            }}>{t}</div>
          ))}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '4px 6px 10px' }}>
          <div className="eyebrow">2 / 5 DONE</div>
          <div className="eyebrow" style={{ color: A.ink3 }}>+10 SCORE</div>
        </div>

        {/* habits */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {habits.map((h) => (
            <Card key={h.name} style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 28, height: 28, borderRadius: 9, flexShrink: 0,
                background: h.done ? A.hype : A.card,
                border: h.done ? 'none' : `1.5px solid ${A.rule}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: A.ink,
              }}>
                {h.done && <ICheck />}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  fontFamily: A.display, fontWeight: 700, fontSize: 14,
                  letterSpacing: '0.02em', color: A.ink,
                  textDecoration: h.done ? 'line-through' : 'none',
                  textDecorationColor: A.ink3,
                }}>{h.name}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 3 }}>
                  <span style={{
                    fontSize: 10.5, fontWeight: 700, color: A.good,
                    letterSpacing: '0.06em',
                  }}>+{h.imp}% DISCIPLINE</span>
                  {h.streak > 0 && (
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 2, fontSize: 10.5, color: A.ink3, fontWeight: 600 }}>
                      <span style={{ color: A.warn }}><IFire /></span>{h.streak}
                    </span>
                  )}
                </div>
              </div>
              <div style={{
                fontFamily: A.display, fontWeight: 800, fontSize: 16,
                color: h.done ? A.good : A.ink3,
              }}>+{h.imp}</div>
            </Card>
          ))}
        </div>

        {/* add FAB */}
        <div style={{
          position: 'absolute', left: '50%', bottom: 110, transform: 'translateX(-50%)',
          width: 56, height: 56, borderRadius: 28,
          background: A.ink, color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 10px 26px rgba(20,17,13,0.25)',
        }}>
          <Iq width={24} height={24} strokeWidth="2.5"><path d="M12 5v14M5 12h14"/></Iq>
        </div>
        <div style={{ height: 30 }} />
      </div>
      <ATabBar active="home" />
    </AWrap>
  );
}

// ─────────────────────────────────────────────────────────
// 3) FUEL
// ─────────────────────────────────────────────────────────
function A_Fuel() {
  const score = 35;
  const [diet, setDiet] = React.useState(null);
  const [junk, setJunk] = React.useState(null);
  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 }}>
        {/* score card */}
        <Card style={{ padding: 0, overflow: 'hidden', borderColor: A.bad, borderWidth: 1.5 }}>
          <div style={{ padding: '16px 18px' }}>
            <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: 64,
                  color: A.bad, lineHeight: 1, letterSpacing: '-0.04em', marginTop: 4,
                }} className="anim-countup">{score}</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
                <StatusPill tone="bad" icon={<IArrowDown />}>DECLINING</StatusPill>
                <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600 }}>-22 vs last 7 days</div>
              </div>
            </div>

            {/* weekly heat dots */}
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${A.rule}` }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6 }}>
                {[91, null, 75, null, 55, 75, 35].map((v, i) => {
                  const d = ['M','T','W','T','F','S','S'][i];
                  let bg = A.rest, fg = A.ink3;
                  if (v !== null) {
                    if (v >= 70) { bg = A.good; fg = '#fff'; }
                    else if (v >= 50) { bg = A.warn; fg = A.ink; }
                    else { bg = A.bad; fg = '#fff'; }
                  }
                  return (
                    <div key={i} style={{
                      borderRadius: 10, padding: '8px 4px', textAlign: 'center',
                      background: bg, color: fg, opacity: v === null ? 0.5 : 1,
                    }}>
                      <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 13, lineHeight: 1 }}>{v ?? '·'}</div>
                      <div style={{ fontSize: 9, fontWeight: 600, marginTop: 2, opacity: 0.75 }}>{d}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </Card>

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

        {/* Q1 */}
        <Card style={{ padding: 14, marginBottom: 8 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, background: A.rest,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <Iq width={18} height={18} stroke={A.ink2}><circle cx="12" cy="12" r="9"/><path d="M8 8h2v2H8zM14 8h2v2h-2z"/></Iq>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 14 }}>STUCK TO YOUR DIET?</div>
              <div style={{ fontSize: 12, color: A.ink2, marginTop: 1 }}>Did you follow your planned meals?</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10 }}>
                {['YES', 'NO'].map((v, i) => {
                  const yes = v === 'YES';
                  return (
                    <div key={v} style={{
                      padding: '11px 0', textAlign: 'center', borderRadius: 11,
                      background: A.card,
                      border: `1.5px solid ${yes ? A.good : A.rule}`,
                      color: yes ? A.good : A.ink2,
                      fontFamily: A.display, fontWeight: 700, fontSize: 13, letterSpacing: '0.1em',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                    }}>
                      {yes ? <ICheck /> : <Iq width={14} height={14} strokeWidth="2.5"><path d="M6 6l12 12M18 6L6 18"/></Iq>}
                      {v}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </Card>

        {/* Q2 */}
        <Card style={{ padding: 14, marginBottom: 8 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10, background: '#FFE9D6',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              fontSize: 18,
            }}>🍔</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 14 }}>HAD JUNK FOOD?</div>
              <div style={{ fontSize: 12, color: A.ink2, marginTop: 1 }}>Any processed or unhealthy items?</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginTop: 10 }}>
                {[
                  { v: 'YES', c: A.bad },
                  { v: 'NO',  c: A.good, active: true },
                ].map((b) => (
                  <div key={b.v} style={{
                    padding: '11px 0', textAlign: 'center', borderRadius: 11,
                    background: b.active ? '#E2F7EC' : A.card,
                    border: `1.5px solid ${b.active ? A.good : A.rule}`,
                    color: b.c,
                    fontFamily: A.display, fontWeight: 700, fontSize: 13, letterSpacing: '0.1em',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                  }}>
                    {b.v === 'YES'
                      ? <Iq width={14} height={14} strokeWidth="2.5"><path d="M6 6l12 12M18 6L6 18"/></Iq>
                      : <ICheck />}
                    {b.v}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Card>

        {/* food quality slider */}
        <Card style={{ padding: 14, marginBottom: 14 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10, background: '#FFF4D6',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill={A.warn}><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4.5L6 22l1.5-8.5L2 9h7z"/></svg>
              </div>
              <div>
                <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 14 }}>FOOD QUALITY</div>
                <div style={{ fontSize: 12, color: A.ink2, marginTop: 1 }}>Great · Tap to adjust</div>
              </div>
            </div>
            <div style={{
              fontFamily: A.display, fontWeight: 800, fontSize: 18, color: A.good,
            }}>7<span style={{ color: A.ink3, fontWeight: 500, fontSize: 13 }}>/10</span></div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(10,1fr)', gap: 4 }}>
            {Array.from({ length: 10 }).map((_, i) => (
              <div key={i} style={{
                height: 8, borderRadius: 4,
                background: i < 7 ? A.good : A.rest,
              }} className="anim-fillbar" />
            ))}
          </div>
        </Card>

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

// ─────────────────────────────────────────────────────────
// 4) STRENGTH
// ─────────────────────────────────────────────────────────
function A_Strength() {
  const score = 0;
  const [rating, setRating] = React.useState(7);
  return (
    <AWrap>
      <AHeader mode="STRENGTH MODE" title="MOVE HARD" 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 }}>
        {/* score */}
        <Card style={{ padding: 0 }}>
          <div style={{ padding: '16px 18px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div>
                <div className="eyebrow" style={{ color: A.ink3 }}>TODAY'S STRENGTH</div>
                <div style={{
                  fontFamily: A.display, fontWeight: 800, fontSize: 64,
                  color: A.ink3, lineHeight: 1, letterSpacing: '-0.04em', marginTop: 4,
                }}>0</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
                <StatusPill tone="warn" icon={<IArrowDown />}>UNLOGGED</StatusPill>
                <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600, textAlign: 'right' }}>Last: 37 · Thu</div>
              </div>
            </div>
            <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${A.rule}` }}>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 6 }}>
                {[84, null, null, null, 67, 37, null].map((v, i) => {
                  const d = ['M','T','W','T','F','S','S'][i];
                  const today = i === 5;
                  let bg = A.rest, fg = A.ink3;
                  if (v !== null) {
                    if (v >= 70) { bg = A.good; fg = '#fff'; }
                    else if (v >= 50) { bg = A.warn; fg = A.ink; }
                    else { bg = A.bad; fg = '#fff'; }
                  }
                  return (
                    <div key={i} style={{
                      borderRadius: 10, padding: '8px 4px', textAlign: 'center',
                      background: bg, color: fg,
                      border: today ? `1.5px solid ${A.ink}` : 'none',
                      opacity: v === null ? 0.55 : 1,
                    }}>
                      <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 13, lineHeight: 1 }}>{v ?? '·'}</div>
                      <div style={{ fontSize: 9, fontWeight: 600, marginTop: 2, opacity: 0.75 }}>{d}</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </Card>

        {/* how it go today — aesthetic rating card */}
        <Card style={{
          marginTop: 14, padding: 0, overflow: 'hidden',
          background: `radial-gradient(120% 80% at 50% 0%, #FFFBEC 0%, ${A.card} 60%)`,
        }}>
          {(() => {
            // Rating → meaning (label, color, copy)
            const tiers = [
              { upTo: 2,  label: 'WRECKED',  color: A.bad,  copy: 'Tough one. Recovery is the work today.' },
              { upTo: 4,  label: 'LOW',      color: A.bad,  copy: 'Showed up. That counts.' },
              { upTo: 6,  label: 'STEADY',   color: A.warn, copy: 'Solid effort — kept the streak alive.' },
              { upTo: 8,  label: 'STRONG',   color: A.good, copy: 'Real work today. You earned this.' },
              { upTo: 10, label: 'ELITE',    color: A.good, copy: 'Top tier. Don\'t stop now.' },
            ];
            const tier = tiers.find(t => rating <= t.upTo);

            return (
              <>
                {/* HERO — big sculpted numeral with halo */}
                <div style={{
                  padding: '22px 18px 16px',
                  textAlign: 'center',
                  position: 'relative',
                }}>
                  <div className="eyebrow" style={{ color: A.ink3 }}>HOW DID IT GO?</div>

                  {/* halo */}
                  <div style={{
                    position: 'relative', marginTop: 10, height: 96,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <div style={{
                      position: 'absolute', width: 160, height: 160,
                      borderRadius: '50%',
                      background: `radial-gradient(circle, ${tier.color}26 0%, transparent 65%)`,
                      filter: 'blur(2px)',
                    }} />
                    <div style={{
                      position: 'relative',
                      display: 'inline-flex', alignItems: 'baseline', gap: 4,
                      fontFamily: A.display, fontWeight: 800,
                      letterSpacing: '-0.06em',
                      color: A.ink,
                    }}>
                      <span style={{ fontSize: 96, lineHeight: 0.85 }}>{rating}</span>
                      <span style={{
                        fontSize: 26, color: A.ink3, fontWeight: 500,
                        letterSpacing: '-0.02em',
                      }}>/10</span>
                    </div>
                  </div>

                  {/* dynamic label */}
                  <div style={{
                    marginTop: 8,
                    fontFamily: A.display, fontWeight: 800,
                    fontSize: 16, letterSpacing: '0.18em',
                    color: tier.color,
                  }}>{tier.label}</div>
                  <div style={{
                    fontSize: 12.5, color: A.ink2, marginTop: 6, lineHeight: 1.4,
                    maxWidth: 240, marginInline: 'auto',
                  }}>{tier.copy}</div>
                </div>

                {/* sculpted bar climb — heights ramp from low to high */}
                <div style={{ padding: '6px 18px 0' }}>
                  <div style={{
                    display: 'grid', gridTemplateColumns: 'repeat(10, 1fr)',
                    gap: 5, alignItems: 'flex-end', height: 56,
                  }}>
                    {Array.from({ length: 10 }).map((_, i) => {
                      const n = i + 1;
                      const filled = n <= rating;
                      const isActive = n === rating;
                      // ramp height from 16 → 52
                      const h = 16 + (i / 9) * 36;
                      // band color
                      const band = n <= 2 ? A.bad : n <= 4 ? '#F08560' : n <= 6 ? A.warn : n <= 8 ? '#7BC95E' : A.good;
                      return (
                        <div key={i} style={{
                          height: h, borderRadius: 6,
                          background: filled ? band : A.rest,
                          opacity: filled ? 1 : 0.7,
                          boxShadow: isActive ? `0 0 0 2px ${A.card}, 0 0 0 3.5px ${A.ink}` : 'none',
                          transition: 'all .25s ease',
                        }} />
                      );
                    })}
                  </div>
                  {/* tick labels */}
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', marginTop: 8,
                    fontSize: 9.5, color: A.ink3, fontWeight: 600, letterSpacing: '0.1em',
                    fontFamily: A.body,
                  }}>
                    <span>1 · COOKED</span>
                    <span>10 · ELITE</span>
                  </div>
                </div>

                {/* CTA — pill with lime arrow */}
                <div style={{ padding: '18px 18px 18px' }}>
                  <button style={{
                    width: '100%', padding: '14px 0', border: 'none', borderRadius: 14,
                    background: A.ink, color: '#fff',
                    fontFamily: A.display, fontWeight: 700, fontSize: 13, letterSpacing: '0.2em',
                    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                    boxShadow: '0 6px 18px rgba(20,17,13,0.18)',
                  }}>
                    LOG RATING
                    <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>
              </>
            );
          })()}
        </Card>

        <div className="eyebrow" style={{ margin: '18px 4px 10px' }}>OR LOG A FULL SESSION</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[
            { name: 'GYM',       sub: 'Pick body part', emoji: '🏋️', tint: '#EAF2FF' },
            { name: 'SPORTS',    sub: 'Pick a sport',   emoji: '🏀', tint: '#FFF1E5' },
            { name: 'RUN/WALK',  sub: 'Time & dist',    emoji: '🏃', tint: '#E2F7EC' },
          ].map((c) => (
            <Card key={c.name} style={{ padding: 14, textAlign: 'center' }}>
              <div style={{
                width: 42, height: 42, borderRadius: 12, background: c.tint,
                margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 22,
              }}>{c.emoji}</div>
              <div style={{ fontFamily: A.display, fontWeight: 700, fontSize: 13, marginTop: 8, letterSpacing: '0.04em' }}>{c.name}</div>
              <div style={{ fontSize: 10.5, color: A.ink3, marginTop: 2 }}>{c.sub}</div>
            </Card>
          ))}
        </div>
        <div style={{ height: 30 }} />
      </div>
      <ATabBar active="str" />
    </AWrap>
  );
}

// ─────────────────────────────────────────────────────────
// 5) CHALLENGES
// ─────────────────────────────────────────────────────────
function A_Challenges() {
  return (
    <AWrap>
      <AHeader mode="CHALLENGES" title="GRITTT" action={
        <Iq width={18} height={18}><path d="M12 5v14M5 12h14"/></Iq>
      }/>
      <div className="scr-body">
        {/* Active */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '4px 4px 10px' }}>
          <div className="eyebrow" style={{ color: A.ink, display: 'flex', gap: 6, alignItems: 'center' }}>
            <span className="dot" style={{ background: A.hype }}></span>ACTIVE · 4
          </div>
          <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600 }}>SWIPE →</div>
        </div>

        <Card style={{ padding: 0, overflow: 'hidden', borderColor: A.warn, borderWidth: 1.5 }}>
          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <StatusPill tone="warn">HEALTH · 21D</StatusPill>
              <Iq width={16} height={16} stroke={A.ink3}><path d="M18 6L6 18M6 6l12 12"/></Iq>
            </div>
            <div style={{
              fontFamily: A.display, fontWeight: 800, fontSize: 24,
              letterSpacing: '-0.01em', marginTop: 14, color: A.ink, textTransform: 'uppercase',
            }}>Physical Activity</div>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginTop: 10 }}>
              <div>
                <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 36, color: A.ink, lineHeight: 1 }}>
                  0<span style={{ color: A.ink3, fontSize: 16, fontWeight: 600 }}>/21</span>
                </div>
                <div className="eyebrow" style={{ color: A.ink3, marginTop: 2 }}>DAYS DONE</div>
              </div>
              <div style={{ width: 1, alignSelf: 'stretch', background: A.rule }} />
              <div>
                <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 36, color: A.ink, lineHeight: 1 }}>21</div>
                <div className="eyebrow" style={{ color: A.ink3, marginTop: 2 }}>DAYS LEFT</div>
              </div>
            </div>

            {/* progress dots */}
            <div style={{ marginTop: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
                <span className="eyebrow" style={{ color: A.ink3 }}>0% COMPLETE</span>
                <span className="eyebrow" style={{ color: A.warn }}>JUST STARTED</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(21,1fr)', gap: 2 }}>
                {Array.from({ length: 21 }).map((_, i) => (
                  <div key={i} style={{
                    height: 6, borderRadius: 2,
                    background: i === 0 ? A.warn : A.rest,
                  }} />
                ))}
              </div>
            </div>
            <div style={{ fontSize: 12, color: A.ink2, marginTop: 12 }}>
              Better than <strong style={{ color: A.bad }}>10%</strong> of people on this challenge
            </div>
          </div>
        </Card>

        {/* Health row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '22px 4px 10px' }}>
          <div className="eyebrow" style={{ color: A.ink, display: 'flex', gap: 6, alignItems: 'center' }}>
            <span className="dot" style={{ background: A.warn }}></span>HEALTH · 2
          </div>
          <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600 }}>SEE ALL</div>
        </div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto' }}>
          {[
            { tag: 'HEALTH', tone: 'warn', name: 'COLD SHOWERS ONLY', copy: 'Start every day with cold water. Build mental resilience one uncomfortable morning at a time.', dur: '30D' },
            { tag: 'HEALTH', tone: 'warn', name: 'PROTEIN GOAL', copy: 'Hit your protein every day. Body comp follows from here.', dur: '21D' },
          ].map((c) => (
            <Card key={c.name} style={{ padding: 14, minWidth: 230, maxWidth: 230 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <StatusPill tone={c.tone}>{c.tag}</StatusPill>
                <div style={{
                  padding: '4px 8px', borderRadius: 999, background: A.rest,
                  fontSize: 10.5, fontWeight: 700, color: A.ink2, letterSpacing: '0.08em',
                  fontFamily: A.body,
                }}>{c.dur}</div>
              </div>
              <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 17, lineHeight: 1.15, color: A.ink, textTransform: 'uppercase' }}>{c.name}</div>
              <div style={{ fontSize: 12, color: A.ink2, marginTop: 8, lineHeight: 1.4, minHeight: 50 }}>{c.copy}</div>
              <button style={{
                width: '100%', marginTop: 14, padding: '11px 0',
                border: 'none', borderRadius: 12,
                background: A.ink, color: '#fff',
                fontFamily: A.display, fontWeight: 700, fontSize: 12, letterSpacing: '0.16em',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>START <Iq width={12} height={12}><path d="M5 12h14M12 5l7 7-7 7"/></Iq></button>
            </Card>
          ))}
        </div>

        {/* Lifestyle row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', padding: '20px 4px 10px' }}>
          <div className="eyebrow" style={{ color: A.ink, display: 'flex', gap: 6, alignItems: 'center' }}>
            <span className="dot" style={{ background: '#9D6DFF' }}></span>LIFESTYLE · 2
          </div>
          <div style={{ fontSize: 11, color: A.ink3, fontWeight: 600 }}>SEE ALL</div>
        </div>
        <div style={{ display: 'flex', gap: 10, overflowX: 'auto' }}>
          {[
            { tag: 'LIFESTYLE', name: 'DIGITAL DETOX', copy: 'No social media. Reclaim your attention span over 7 days.', dur: '7D' },
            { tag: 'LIFESTYLE', name: '5AM CLUB', copy: 'Wake up before everyone. The day belongs to you.', dur: '14D' },
          ].map((c) => (
            <Card key={c.name} style={{ padding: 14, minWidth: 230, maxWidth: 230 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <div style={{
                  padding: '5px 10px', borderRadius: 999,
                  background: '#EFE6FF', color: '#7344E5',
                  fontSize: 10.5, fontWeight: 700, letterSpacing: '0.1em', fontFamily: A.body,
                }}>{c.tag}</div>
                <div style={{
                  padding: '4px 8px', borderRadius: 999, background: A.rest,
                  fontSize: 10.5, fontWeight: 700, color: A.ink2, letterSpacing: '0.08em', fontFamily: A.body,
                }}>{c.dur}</div>
              </div>
              <div style={{ fontFamily: A.display, fontWeight: 800, fontSize: 17, lineHeight: 1.15, color: A.ink, textTransform: 'uppercase' }}>{c.name}</div>
              <div style={{ fontSize: 12, color: A.ink2, marginTop: 8, lineHeight: 1.4, minHeight: 50 }}>{c.copy}</div>
              <button style={{
                width: '100%', marginTop: 14, padding: '11px 0',
                border: 'none', borderRadius: 12,
                background: A.ink, color: '#fff',
                fontFamily: A.display, fontWeight: 700, fontSize: 12, letterSpacing: '0.16em',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>START <Iq width={12} height={12}><path d="M5 12h14M12 5l7 7-7 7"/></Iq></button>
            </Card>
          ))}
        </div>
        <div style={{ height: 30 }} />
      </div>
      <ATabBar active="flag" />
    </AWrap>
  );
}

Object.assign(window, {
  A_Dashboard, A_Discipline, A_Fuel, A_Strength, A_Challenges, A_Becoming,
});