// Three home dashboard states — 0 / 1 / 3 medicines

// ════════════════════════════════════════════════════════════
// STATE 0 · No medicines yet
// ════════════════════════════════════════════════════════════
function HFHome0() {
  const F = HF_FONTS;
  return (
    <HFPhone>
      <HFGreeting/>

      <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
        {/* Empty-state hero card */}
        <div style={{ padding: '4px 22px 16px' }}>
          <div style={{
            position: 'relative', borderRadius: HF.radCard,
            background: HF.surface,
            border: '1px solid ' + HF.accentLine,
            boxShadow: '0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 30px -10px rgba(182,91,58,0.18)',
            overflow: 'hidden',
            padding: '24px 24px 22px',
          }}>
            <div aria-hidden style={{
              position: 'absolute', inset: 0, pointerEvents: 'none',
              background: 'radial-gradient(circle at 85% 0%, ' + HF.accentTint + ' 0%, transparent 60%)',
            }}/>
            <div style={{ position: 'relative', display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 7,
                  padding: '5px 10px 5px 6px', borderRadius: 99,
                  background: HF.accentTint, color: HF.accentDk,
                  fontFamily: F.mono, fontSize: 9.5, fontWeight: 700, letterSpacing: 1.2,
                }}>
                  <span style={{
                    width: 14, height: 14, borderRadius: 99, background: HF.accent,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <HFIcon name="sparkle" size={9} color="#fff"/>
                  </span>
                  WELCOME, ALEX
                </div>
                <div style={{
                  fontFamily: F.serif, fontSize: 30, letterSpacing: -0.8,
                  fontWeight: 400, lineHeight: 1.08, color: HF.ink, marginTop: 12,
                }}>
                  Let's add your<br/>
                  <em style={{ fontStyle: 'italic', color: HF.accent }}>first peptide.</em>
                </div>
                <div style={{
                  marginTop: 12, fontSize: 13.5, color: HF.muted, lineHeight: 1.5, maxWidth: 240,
                }}>
                  About a minute. We'll handle the math, freshness, and reminders.
                </div>
              </div>
              <div style={{ flexShrink: 0, marginTop: -2 }}>
                <HFVial w={70} h={100} fillPct={100} color={HF.accent}/>
              </div>
            </div>
            <div style={{ position: 'relative', marginTop: 18 }}>
              <HFButton variant="accent">
                Start setup <HFIcon name="arrow" size={15} color="#fff"/>
              </HFButton>
            </div>
          </div>
        </div>

        {/* What you'll get */}
        <div style={{ padding: '0 22px 16px' }}>
          <HFLabel style={{ marginBottom: 10 }}>What you'll get</HFLabel>
          <div style={{
            background: HF.surface, border: '1px solid ' + HF.border,
            borderRadius: HF.radCard, overflow: 'hidden',
          }}>
            {[
              { icon: 'clock', t: 'Dose countdown',       s: 'Never miss a window' },
              { icon: 'flask', t: 'Vial freshness',        s: '28-day reconstitution timer' },
              { icon: 'pulse', t: 'Active level tracking', s: 'See half-life in real time' },
              { icon: 'cal',   t: 'Site rotation',         s: 'Auto-suggests next location' },
            ].map((row, i, arr) => (
              <div key={row.t} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: '13px 16px',
                borderBottom: i < arr.length - 1 ? '1px solid ' + HF.borderSoft : 'none',
              }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 10,
                  background: HF.accentTint,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <HFIcon name={row.icon} size={15} color={HF.accent}/>
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: -0.2, color: HF.ink }}>{row.t}</div>
                  <div style={{ fontSize: 11.5, color: HF.muted, marginTop: 1 }}>{row.s}</div>
                </div>
                <span style={{
                  width: 18, height: 18, borderRadius: 99,
                  background: HF.surfaceAlt,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: HF.faint, fontFamily: F.mono, fontSize: 9, fontWeight: 700,
                }}>{i + 1}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Browse library */}
        <div style={{ padding: '0 22px 16px' }}>
          <HFLabel style={{ marginBottom: 10 }}>Or browse the library</HFLabel>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { name: 'BPC-157',      tag: HF.tagBpc,  meta: 'Recovery · t½ 4h' },
              { name: 'TB-500',       tag: HF.tagTb,   meta: 'Tissue · t½ 60h' },
              { name: 'Semaglutide',  tag: HF.tagSema, meta: 'Metabolic · t½ 7d' },
              { name: 'Thymosin α-1', tag: HF.tagThy,  meta: 'Immune · t½ 2h' },
            ].map(p => (
              <div key={p.name} style={{
                padding: '12px 14px', borderRadius: 14,
                background: HF.surface, border: '1px solid ' + HF.border,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 99, background: p.tag }}/>
                  <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: -0.2 }}>{p.name}</span>
                </div>
                <div style={{
                  fontFamily: F.mono, fontSize: 9.5, color: HF.muted, marginTop: 7,
                  letterSpacing: 0.4, fontWeight: 600,
                }}>{p.meta.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Calm tip */}
        <div style={{ padding: '0 22px 18px' }}>
          <div style={{
            padding: 14, borderRadius: 14, background: HF.surfaceAlt,
            display: 'flex', alignItems: 'flex-start', gap: 10,
          }}>
            <HFIcon name="info" size={14} color={HF.muted}/>
            <div style={{ fontSize: 12, color: HF.muted, lineHeight: 1.5 }}>
              You can still log without a peptide — but pairing a compound unlocks reminders, rotation maps and the freshness countdown.
            </div>
          </div>
        </div>
      </div>

      <HFTabBar active="home"/>
    </HFPhone>
  );
}

// ════════════════════════════════════════════════════════════
// STATE 1 · One medicine (BPC-157)
// ════════════════════════════════════════════════════════════
function HFHome1() {
  const F = HF_FONTS;
  const peptide = { name: 'BPC-157', color: HF.tagBpc };

  return (
    <HFPhone>
      <HFGreeting streak={14} level={3}/>

      <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
        {/* Status sentence */}
        <div style={{ padding: '0 22px 8px' }}>
          <div style={{
            fontFamily: F.serif, fontSize: 19, letterSpacing: -0.3,
            color: HF.muted, lineHeight: 1.35,
          }}>
            Next dose is <em style={{ fontStyle: 'italic', color: HF.ink }}>tomorrow evening.</em> You're <span style={{ color: HF.accent }}>96%</span> on protocol this month.
          </div>
        </div>

        {/* Hero ring */}
        <div style={{ display: 'flex', justifyContent: 'center', padding: '14px 0 8px' }}>
          <HFHeroRing
            d={244} progress={0.63}
            eyebrow="NEXT DOSE"
            label="1d 8h"
            sub="Sat · 7:30 PM"
            chip="BPC-157 · 250 MCG"
            chipColor={peptide.color}
          />
        </div>

        {/* Today */}
        <div style={{ padding: '14px 22px 14px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <span style={{ fontFamily: F.serif, fontSize: 22, letterSpacing: -0.3 }}>Today</span>
            <HFLabel>1 of 1 logged</HFLabel>
          </div>
          <HFCard style={{ padding: 0 }}>
            <HFPeptideRow p={{
              name: 'BPC-157', dose: '250 mcg', color: peptide.color,
              time: '7:30 AM', site: 'L Glute', done: true, relativeTime: '4h ago',
            }}/>
            <div style={{
              padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 12,
              background: HF.surfaceAlt,
            }}>
              <HFIcon name="cal" size={13} color={HF.muted}/>
              <span style={{ fontSize: 12, color: HF.muted, flex: 1 }}>
                Next: <span style={{ color: HF.ink, fontWeight: 600 }}>Sat 7:30 PM</span> · then Mon, Wed
              </span>
              <HFIcon name="chev" size={12} color={HF.muted}/>
            </div>
          </HFCard>
        </div>

        {/* Active level + vial */}
        <div style={{ padding: '0 22px 14px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 10 }}>
          <HFCard style={{ padding: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <HFLabel>Active level</HFLabel>
              <span style={{
                fontFamily: F.mono, fontSize: 9, color: HF.muted, letterSpacing: 0.8, fontWeight: 600,
              }}>t½ 4H</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 6 }}>
              <span style={{
                fontFamily: F.serif, fontSize: 32, lineHeight: 1, letterSpacing: -0.8,
                color: HF.ink, fontWeight: 400,
              }}>0.42</span>
              <span style={{ fontSize: 12, color: HF.muted, fontWeight: 500 }}>mcg/mL</span>
            </div>
            <div style={{ marginTop: 8 }}>
              <HFDecay w={170} h={32} color={peptide.color}/>
            </div>
            <div style={{
              marginTop: 4, fontFamily: F.mono, fontSize: 9.5,
              color: HF.faint, letterSpacing: 0.4, fontWeight: 600,
            }}>NOW · DECAYING SINCE 7:30 AM</div>
          </HFCard>

          <HFCard style={{ padding: 14 }}>
            <HFLabel>Vial</HFLabel>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 6 }}>
              <div>
                <div style={{
                  fontFamily: F.serif, fontSize: 26, letterSpacing: -0.5, lineHeight: 1, color: HF.ink,
                }}>22<span style={{ fontSize: 13, color: HF.muted, marginLeft: 4 }}>d</span></div>
                <div style={{ fontSize: 11, color: HF.muted, marginTop: 4 }}>fresh · 18 doses</div>
              </div>
              <HFVial w={42} h={64} fillPct={62} color={peptide.color} tagColor={peptide.color}/>
            </div>
            <div style={{
              marginTop: 10, height: 4, borderRadius: 99,
              background: HF.surfaceAlt, overflow: 'hidden',
            }}>
              <div style={{ height: '100%', width: '79%', background: HF.ink, opacity: 0.85 }}/>
            </div>
          </HFCard>
        </div>

        {/* Body map + site rotation */}
        <div style={{ padding: '0 22px 14px' }}>
          <HFCard style={{ padding: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
              <span style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.2 }}>Injection sites</span>
              <HFLabel>THIS WEEK</HFLabel>
            </div>
            <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
              <HFBodyMap w={90} h={158} marks={[
                { x: 42, y: 100, color: peptide.color, opacity: 1 },
                { x: 38, y: 80, color: peptide.color, opacity: 0.5 },
                { x: 54, y: 92, color: peptide.color, opacity: 0.25 },
              ]}/>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                <div>
                  <div style={{ fontSize: 11.5, color: HF.muted, marginBottom: 2 }}>Last injection</div>
                  <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: -0.2 }}>Left Glute</div>
                  <div style={{ fontFamily: F.mono, fontSize: 10.5, color: HF.muted, letterSpacing: 0.4, marginTop: 2 }}>4H AGO · 250 MCG</div>
                </div>
                <div style={{
                  padding: '10px 12px', borderRadius: 12, background: HF.accentTint,
                  color: HF.accentDk, fontSize: 12, lineHeight: 1.5,
                }}>
                  <span style={{ fontWeight: 700 }}>Up next:</span> rotate to right thigh — gives the glute 48h to settle.
                </div>
              </div>
            </div>
          </HFCard>
        </div>

        {/* Daily check-in */}
        <div style={{ padding: '0 22px 18px' }}>
          <HFCard>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.2 }}>How are you today?</div>
                <div style={{ fontSize: 11.5, color: HF.muted, marginTop: 1 }}>15 seconds · day 7 streak</div>
              </div>
              <span style={{
                padding: '6px 12px', borderRadius: 99, background: HF.ink, color: HF.surface,
                fontSize: 11.5, fontWeight: 700,
              }}>Start</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
              {[
                { k: 'Energy', v: 4 },
                { k: 'Sleep',  v: 3 },
                { k: 'Mood',   v: 0 },
              ].map(c => (
                <div key={c.k} style={{
                  padding: '10px 10px 12px', borderRadius: 12, background: HF.surfaceAlt,
                }}>
                  <div style={{
                    fontFamily: F.mono, fontSize: 9.5, letterSpacing: 1, fontWeight: 700,
                    color: HF.muted, textTransform: 'uppercase',
                  }}>{c.k}</div>
                  <div style={{ display: 'flex', gap: 3, marginTop: 8 }}>
                    {[0,1,2,3,4].map(n => (
                      <span key={n} style={{
                        flex: 1, height: 6, borderRadius: 99,
                        background: n < c.v ? HF.accent : HF.border,
                      }}/>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </HFCard>
        </div>
      </div>

      <HFTabBar active="home"/>
    </HFPhone>
  );
}

// ════════════════════════════════════════════════════════════
// STATE 3 · Three medicines
// ════════════════════════════════════════════════════════════
function HFHome3() {
  const F = HF_FONTS;
  const peptides = [
    { name: 'BPC-157',     dose: '250 mcg', color: HF.tagBpc,  time: '7:30 AM', site: 'L Glute', done: true,  relativeTime: '2h ago', halfLife: '4h',  level: 0.42, vialDays: 22 },
    { name: 'TB-500',      dose: '500 mcg', color: HF.tagTb,   time: '7:30 AM', site: 'L Glute', done: true,  relativeTime: '2h ago', halfLife: '60h', level: 0.18, vialDays: 11 },
    { name: 'Semaglutide', dose: '0.5 mg',  color: HF.tagSema, time: '8:00 PM', site: 'Abdomen', done: false, upNext: true,           halfLife: '7d',  level: 0.85, vialDays: 5  },
  ];

  return (
    <HFPhone>
      <HFGreeting streak={42} level={5}/>

      <div style={{ flex: 1, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '0 22px 12px' }}>
          <div style={{
            fontFamily: F.serif, fontSize: 19, letterSpacing: -0.3,
            color: HF.muted, lineHeight: 1.35,
          }}>
            <em style={{ fontStyle: 'italic', color: HF.ink }}>2 done, 1 to go</em> — next in <span style={{ color: HF.accent }}>10h 24m</span>.
          </div>
        </div>

        {/* Timeline strip */}
        <div style={{ padding: '0 22px 14px' }}>
          <HFCard style={{ padding: '16px 18px 14px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: -0.2 }}>Today's doses</span>
              <HFLabel>3 SCHEDULED</HFLabel>
            </div>
            <HFDoseTimeline
              nowHour={9.7}
              stamps={[
                { hour: 7.5, color: HF.tagBpc,  done: true },
                { hour: 7.5, color: HF.tagTb,   done: true },
                { hour: 20,  color: HF.tagSema, done: false },
              ]}
            />
            <div style={{ display: 'flex', gap: 14, marginTop: 2, flexWrap: 'wrap' }}>
              {peptides.map(p => (
                <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 99, background: p.color }}/>
                  <span style={{ fontSize: 11, fontWeight: 600, letterSpacing: -0.1 }}>{p.name}</span>
                  {!p.done && <span style={{ fontFamily: F.mono, fontSize: 9, color: HF.muted, letterSpacing: 0.5 }}>· UP NEXT</span>}
                </div>
              ))}
            </div>
          </HFCard>
        </div>

        {/* Today list */}
        <div style={{ padding: '0 22px 14px' }}>
          <HFCard style={{ padding: 0 }}>
            {peptides.map(p => <HFPeptideRow key={p.name} p={p}/>)}
          </HFCard>
        </div>

        {/* Active levels */}
        <div style={{ padding: '0 22px 14px' }}>
          <HFCard>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
              <span style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: -0.2 }}>Active levels</span>
              <HFLabel>RIGHT NOW</HFLabel>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {peptides.map(p => (
                <div key={p.name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ width: 86, flexShrink: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ width: 8, height: 8, borderRadius: 99, background: p.color }}/>
                      <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: -0.2 }}>{p.name}</span>
                    </div>
                    <div style={{
                      fontFamily: F.mono, fontSize: 9.5, color: HF.muted,
                      marginTop: 3, letterSpacing: 0.4, fontWeight: 600,
                    }}>t½ {p.halfLife.toUpperCase()}</div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <HFDecay w={150} h={30} color={p.color} dose={p.level}/>
                  </div>
                  <div style={{ width: 46, textAlign: 'right', flexShrink: 0 }}>
                    <div style={{
                      fontFamily: F.serif, fontSize: 20, lineHeight: 1, letterSpacing: -0.4,
                      color: HF.ink, fontWeight: 400,
                    }}>{(p.level * 100).toFixed(0)}<span style={{ fontSize: 10, color: HF.muted, marginLeft: 2 }}>%</span></div>
                  </div>
                </div>
              ))}
            </div>
          </HFCard>
        </div>

        {/* Vials inventory */}
        <div style={{ padding: '0 22px 14px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
            <HFLabel>Vials</HFLabel>
            <span style={{
              fontFamily: F.mono, fontSize: 10, color: HF.accent, letterSpacing: 0.5, fontWeight: 700,
            }}>SEMAGLUTIDE LOW · 5D</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            {peptides.map(p => {
              const low = p.vialDays < 8;
              return (
                <div key={p.name} style={{
                  padding: '12px 12px 14px', borderRadius: 14,
                  background: HF.surface,
                  border: '1px solid ' + (low ? HF.accentLine : HF.border),
                  position: 'relative',
                }}>
                  {low && (
                    <span style={{
                      position: 'absolute', top: 8, right: 8,
                      width: 6, height: 6, borderRadius: 99, background: HF.accent,
                    }}/>
                  )}
                  <HFVial w={36} h={54} fillPct={low ? 18 : (p.name === 'BPC-157' ? 62 : 40)} color={p.color} tagColor={p.color}/>
                  <div style={{ marginTop: 10 }}>
                    <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: -0.2 }}>{p.name}</div>
                    <div style={{
                      fontFamily: F.mono, fontSize: 9.5,
                      color: low ? HF.accent : HF.muted,
                      letterSpacing: 0.4, fontWeight: 700, marginTop: 3,
                    }}>{p.vialDays}D LEFT</div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Body map + rotation */}
        <div style={{ padding: '0 22px 14px' }}>
          <HFCard style={{ padding: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
              <span style={{ fontSize: 13.5, fontWeight: 700, letterSpacing: -0.2 }}>Site rotation</span>
              <HFLabel>7-DAY MAP</HFLabel>
            </div>
            <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
              <HFBodyMap w={86} h={156} marks={[
                { x: 38, y: 60, color: HF.tagSema, opacity: 0.5 },
                { x: 42, y: 100, color: HF.tagBpc, opacity: 1 },
                { x: 54, y: 96, color: HF.tagBpc, opacity: 0.35 },
                { x: 56, y: 78, color: HF.tagTb, opacity: 0.7 },
                { x: 30, y: 70, color: HF.tagSema, opacity: 1 },
              ]}/>
              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  { site: 'L Glute', uses: 3, pct: 0.5, color: HF.tagBpc },
                  { site: 'R Glute', uses: 2, pct: 0.33, color: HF.tagTb },
                  { site: 'Abdomen', uses: 1, pct: 0.17, color: HF.tagSema },
                ].map(s => (
                  <div key={s.site}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <span style={{ fontSize: 12, fontWeight: 600 }}>{s.site}</span>
                      <span style={{ fontFamily: F.mono, fontSize: 10, color: HF.muted, letterSpacing: 0.4, fontWeight: 600 }}>{s.uses}× · {(s.pct * 100).toFixed(0)}%</span>
                    </div>
                    <div style={{
                      marginTop: 4, height: 4, borderRadius: 99,
                      background: HF.surfaceAlt, overflow: 'hidden',
                    }}>
                      <div style={{ height: '100%', width: `${s.pct * 100}%`, background: s.color }}/>
                    </div>
                  </div>
                ))}
                <div style={{
                  marginTop: 4, padding: '8px 10px', borderRadius: 10,
                  background: HF.surfaceAlt, fontSize: 11, color: HF.muted, lineHeight: 1.45,
                }}>
                  Try <span style={{ color: HF.ink, fontWeight: 600 }}>right thigh</span> tonight — unused this week.
                </div>
              </div>
            </div>
          </HFCard>
        </div>

        {/* Streak + adherence */}
        <div style={{ padding: '0 22px 18px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <HFCard style={{ padding: 14 }}>
            <HFLabel>Streak</HFLabel>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
              <HFIcon name="bolt" size={16} color={HF.accent}/>
              <span style={{
                fontFamily: F.serif, fontSize: 30, fontWeight: 400, letterSpacing: -0.8, lineHeight: 1,
              }}>42</span>
              <span style={{ fontSize: 11, color: HF.muted, marginLeft: 2 }}>days</span>
            </div>
            <div style={{ display: 'flex', gap: 3, marginTop: 10 }}>
              {Array.from({ length: 7 }).map((_, i) => (
                <span key={i} style={{
                  flex: 1, height: 16, borderRadius: 3,
                  background: i < 6 ? HF.accent : HF.border,
                }}/>
              ))}
            </div>
            <div style={{
              fontFamily: F.mono, fontSize: 9.5, color: HF.muted, marginTop: 6,
              letterSpacing: 0.4, fontWeight: 600,
            }}>S M T W T F S</div>
          </HFCard>
          <HFCard style={{ padding: 14 }}>
            <HFLabel>Adherence</HFLabel>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4, marginTop: 4 }}>
              <span style={{
                fontFamily: F.serif, fontSize: 30, fontWeight: 400, letterSpacing: -0.8, lineHeight: 1,
              }}>96</span>
              <span style={{ fontSize: 11, color: HF.muted, marginLeft: 2 }}>% · 30d</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'flex-end', gap: 2, marginTop: 10, height: 22 }}>
              {[80, 90, 100, 100, 100, 92, 96, 100, 100, 88, 100, 100, 96, 100].map((v, i) => (
                <span key={i} style={{
                  flex: 1, height: `${v * 0.22}px`, borderRadius: 1,
                  background: v >= 95 ? HF.accent : HF.faint,
                  opacity: v >= 95 ? 1 : 0.5,
                }}/>
              ))}
            </div>
            <div style={{
              fontFamily: F.mono, fontSize: 9.5, color: HF.muted, marginTop: 6,
              letterSpacing: 0.4, fontWeight: 600,
            }}>LAST 14 DAYS</div>
          </HFCard>
        </div>
      </div>

      <HFTabBar active="home"/>
    </HFPhone>
  );
}

Object.assign(window, { HFHome0, HFHome1, HFHome3 });