// HomeHelp · Flow 5: Edge cases + Helper-side

// ═══════════════════════════════════════════════════════
// 16 · Edge: no helpers found nearby
// ═══════════════════════════════════════════════════════
function HH_S_NoHelpers({ tone = 'neutral', mapStyle = 'streets' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="" left="close" transparent />

        <div style={{ padding: '0 24px 16px' }}>
          <h1 style={{ fontSize: 26, fontWeight: 700, letterSpacing: -0.7, margin: 0, lineHeight: 1.15 }}>
            No helpers available<br/>for your time slot.
          </h1>
          <p style={{ fontSize: 14, color: HH.muted, marginTop: 10, lineHeight: 1.5 }}>
            We checked everyone within 2 miles. Try one of these and we'll match you instead.
          </p>
        </div>

        <div style={{ flex: 1, padding: '0 20px', overflow: 'auto' }}>
          <HHCard style={{ overflow: 'hidden' }}>
            <HHMap h={140} you label="2 mi radius checked" style={mapStyle} />
            <div style={{ padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12 }}>
              <span style={{ color: HH.muted }}>12 helpers · all booked</span>
              <span style={{ fontFamily: HH.fontMono, color: HH.muted }}>checked 11s ago</span>
            </div>
          </HHCard>

          <HHLabel>Try one of these</HHLabel>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <HHCard style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.accentSoft, color: HH.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <ClockIcon/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Pick a later time</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>3 helpers free tomorrow morning</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>

            <HHCard style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.accentSoft, color: HH.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <PinIcon/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>Widen the radius</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>2 → 5 mi · adds 8 helpers · ETA up to 30 min more</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>

            <HHCard style={{ padding: '14px 16px', display: 'flex', gap: 12, alignItems: 'center' }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.accentSoft, color: HH.accentDark, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Ico d="M3 6h18 M3 12h18 M3 18h18" sw={2}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{copy('cta_open_bids', tone)}</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 2 }}>Helpers will bid · usually within 15 min</div>
              </div>
              <span style={{ color: HH.muted }}><ChevIcon/></span>
            </HHCard>
          </div>

          <div style={{ marginTop: 16, padding: '12px 14px', background: HH.surfaceAlt, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{ color: HH.muted, marginTop: 1 }}><BellIcon/></div>
            <div style={{ fontSize: 12, color: HH.ink2, lineHeight: 1.5, flex: 1 }}>
              Or — we'll text you the moment a helper opens up in your time slot.
              <div style={{ marginTop: 6 }}>
                <button style={{ fontSize: 12, fontWeight: 600, color: HH.accentDark, background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}>
                  Notify me ✓
                </button>
              </div>
            </div>
          </div>

          <div style={{ height: 24 }} />
        </div>

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}` }}>
          <HHBtn variant="ghost" size="md">Edit my request</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 17 · Edge: scheduled for later (next week)
// ═══════════════════════════════════════════════════════
function HH_S_Scheduled({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="Pick a time" left="back" />

        <div style={{ padding: '4px 20px 0' }}>
          <div style={{ fontSize: 13, color: HH.muted, lineHeight: 1.5 }}>
            Living room rearrange · 2 helpers · est. 2 hours
          </div>
        </div>

        {/* week strip */}
        <div style={{ padding: '20px 20px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <span style={{ fontSize: 15, fontWeight: 700 }}>May 2026</span>
            <div style={{ display: 'flex', gap: 4 }}>
              <button style={navBtn}><Ico d="M15 6l-6 6 6 6" size={14}/></button>
              <button style={navBtn}><ChevIcon/></button>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
            {[
              { d: 'Mon', n: 19, today: true,  free: 0 },
              { d: 'Tue', n: 20, free: 2 },
              { d: 'Wed', n: 21, free: 3 },
              { d: 'Thu', n: 22, free: 1 },
              { d: 'Fri', n: 23, free: 4 },
              { d: 'Sat', n: 24, free: 6, sel: true },
              { d: 'Sun', n: 25, free: 5 },
            ].map((c, i) => (
              <button key={i} style={{
                background: c.sel ? HH.ink : 'transparent',
                color: c.sel ? '#fff' : HH.ink,
                border: c.today && !c.sel ? `1.5px solid ${HH.accent}` : `1px solid ${HH.hairline2}`,
                borderRadius: 12, padding: '10px 0 8px', cursor: 'pointer',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              }}>
                <div style={{ fontSize: 10, opacity: 0.7, fontFamily: HH.fontMono, letterSpacing: 0.4 }}>{c.d.toUpperCase()}</div>
                <div style={{ fontSize: 17, fontWeight: 700, fontFamily: HH.fontMono }}>{c.n}</div>
                <div style={{ fontSize: 9, color: c.sel ? 'rgba(255,255,255,0.7)' : c.free === 0 ? HH.muted : HH.trust, fontFamily: HH.fontMono }}>
                  {c.free === 0 ? 'full' : c.free + ' free'}
                </div>
              </button>
            ))}
          </div>
        </div>

        <HHLabel>Saturday, May 24</HHLabel>
        <div style={{ flex: 1, overflow: 'auto', padding: '0 20px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
            {[
              ['8:00 AM', 6, false],
              ['9:00 AM', 4, false],
              ['10:00', 5, false],
              ['11:00', 3, false],
              ['12:00 PM', 2, false],
              ['1:00 PM', 4, true],
              ['2:00 PM', 6, false],
              ['3:00 PM', 5, false],
              ['4:00 PM', 3, false],
            ].map(([t, n, sel], i) => (
              <button key={i} style={{
                padding: '12px 0', textAlign: 'center', borderRadius: 12,
                border: `1px solid ${sel ? HH.accent : HH.hairline2}`,
                background: sel ? HH.accentSoft : HH.surface,
                cursor: 'pointer',
              }}>
                <div style={{ fontSize: 13, fontWeight: 700, fontFamily: HH.fontMono, color: sel ? HH.accentDark : HH.ink }}>{t}</div>
                <div style={{ fontSize: 10, color: sel ? HH.accentDark : HH.muted, marginTop: 2 }}>{n} helpers</div>
              </button>
            ))}
          </div>

          <div style={{ marginTop: 16, padding: '12px 14px', background: HH.surfaceAlt, borderRadius: 12, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
            <div style={{ color: HH.muted, marginTop: 1 }}><ClockIcon/></div>
            <div style={{ fontSize: 12, color: HH.ink2, lineHeight: 1.5 }}>
              We'll match you with a helper <b style={{ color: HH.ink }}>2 hours before</b> your time. You can cancel free until then.
            </div>
          </div>

          <div style={{ height: 16 }} />
        </div>

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}` }}>
          <HHBtn variant="primary" size="lg">Schedule for Sat, 1:00 PM</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

const navBtn = {
  width: 32, height: 32, borderRadius: 16, background: HH.surfaceAlt, border: 'none',
  display: 'flex', alignItems: 'center', justifyContent: 'center', color: HH.ink, cursor: 'pointer',
};

// ═══════════════════════════════════════════════════════
// 18 · Open-to-all-bids fallback
// ═══════════════════════════════════════════════════════
function HH_S_OpenBids({ tone = 'neutral' }) {
  const bids = [
    { name: 'Marcus Thompson', short: 'Marcus T.', price: 48, eta: '45 min', rate: 4.9, jobs: 312, note: 'Pax pro — 80+ done. Have all tools.', best: true },
    { name: 'Priya Shah', short: 'Priya S.', price: 55, eta: 'now', rate: 4.8, jobs: 188, note: 'Free right now, can be there in 25 min.' },
    { name: 'Aisha Brooks', short: 'Aisha B.', price: 50, eta: '1 hr', rate: 4.9, jobs: 201, note: 'Done lots of bedroom assemblies.' },
    { name: 'Jordan Kim', short: 'Jordan K.', price: 42, eta: '90 min', rate: 4.7, jobs: 94, note: 'Best price, cordless drill included.' },
    { name: 'Tomás Reyes', short: 'Tomás R.', price: 65, eta: '2 hr', rate: 5.0, jobs: 46, note: 'Newer, perfect rating so far.' },
  ];
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="" left="back" right={<span>Sort</span>} />
        <div style={{ padding: '0 20px 8px' }}>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: -0.6 }}>5 bids in 12 min</div>
          <div style={{ fontSize: 12, color: HH.muted, marginTop: 4 }}>IKEA Pax wardrobe · your budget $42–$80</div>

          {/* live indicator */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: HH.trust, animation: 'hhPulse2 1.4s infinite' }} />
            <style>{'@keyframes hhPulse2{0%,100%{opacity:1}50%{opacity:.3}}'}</style>
            <span style={{ fontSize: 11, color: HH.trust, fontWeight: 600 }}>Still accepting bids</span>
            <span style={{ fontSize: 11, color: HH.muted, fontFamily: HH.fontMono }}>· closes in 3 min</span>
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          {bids.map((b, i) => (
            <div key={i} style={{
              display: 'flex', gap: 12, padding: '14px 20px',
              borderBottom: `1px solid ${HH.hairline2}`,
              background: b.best ? HH.accentSoft + '99' : HH.surface,
              position: 'relative',
            }}>
              <HHAvatar name={b.name} size={48} verified />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{ fontSize: 14, fontWeight: 700 }}>{b.short}</span>
                  <span style={{ fontFamily: HH.fontMono, fontSize: 17, fontWeight: 700, letterSpacing: -0.4 }}>${b.price}</span>
                </div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 2, fontFamily: HH.fontMono }}>
                  ★ {b.rate} · {b.jobs} jobs · can start in {b.eta}
                </div>
                <div style={{ fontSize: 12.5, color: HH.ink2, marginTop: 6, lineHeight: 1.4 }}>
                  "{b.note}"
                </div>
              </div>
              {b.best && (
                <div style={{
                  position: 'absolute', right: 12, top: 12,
                  background: HH.ink, color: '#fff',
                  fontSize: 9, fontWeight: 700, padding: '2px 6px', borderRadius: 3,
                  fontFamily: HH.fontMono, letterSpacing: 0.4,
                }}>RECOMMENDED</div>
              )}
            </div>
          ))}
        </div>

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}`, display: 'flex', gap: 10 }}>
          <HHBtn variant="ghost" size="md" full={false} style={{ flex: 1 }}>Wait for more</HHBtn>
          <HHBtn variant="primary" size="md" style={{ flex: 1.4 }}>Accept Marcus · $48</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 19 · Helper · Online + incoming smart-match jobs
// ═══════════════════════════════════════════════════════
function HH_S_HelperHome({ tone = 'neutral', mapStyle = 'streets' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', position: 'relative' }}>
        <div style={{ position: 'absolute', inset: 0 }}>
          <HHMap h="100%" pins={3} you label="2 matches near you" style={mapStyle} />
        </div>

        {/* top status */}
        <div style={{ position: 'absolute', top: 14, left: 16, right: 16 }}>
          <HHCard style={{ padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <HHAvatar name="Marcus Thompson" size={36} verified />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 700 }}>You're online</div>
              <div style={{ fontSize: 11, color: HH.muted, marginTop: 1, fontFamily: HH.fontMono }}>
                TODAY · $186 · 3 JOBS · ★ 4.9
              </div>
            </div>
            <div style={{
              width: 52, height: 30, borderRadius: 15, background: HH.trust,
              position: 'relative', boxShadow: 'inset 0 1px 3px rgba(0,0,0,0.1)',
            }}>
              <div style={{
                position: 'absolute', top: 2, right: 2, width: 26, height: 26, borderRadius: 13,
                background: '#fff', boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
              }} />
            </div>
          </HHCard>
        </div>

        <HHSheet bottom={64} style={{ paddingBottom: 14 }}>
          <div style={{ padding: '0 20px' }}>
            <div style={{
              fontSize: 11, fontFamily: HH.fontMono, color: HH.muted,
              letterSpacing: 0.6, textTransform: 'uppercase',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8,
            }}>
              <span>Matched to you · 2 open</span>
              <span style={{ color: HH.accent }}>Live</span>
            </div>

            {[
              { ic: '🛋', t: 'IKEA Pax wardrobe', by: 'Alex R.', d: '0.3 mi', dur: '60 min', price: 48, urgent: true, decline: '0:42' },
              { ic: '📺', t: '65″ TV wall mount', by: 'Sam K.', d: '1.2 mi', dur: '45 min', price: 80, urgent: false },
            ].map((j, i) => (
              <div key={i} style={{
                padding: '12px 0', display: 'flex', gap: 12, alignItems: 'center',
                borderTop: i ? `1px solid ${HH.hairline2}` : 'none',
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 10,
                  background: j.urgent ? HH.accent : HH.surfaceAlt,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 22, position: 'relative',
                }}>{j.ic}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: -0.2 }}>{j.t}</div>
                  <div style={{ fontSize: 11.5, color: HH.muted, marginTop: 2 }}>{j.by} · {j.d} · {j.dur}</div>
                  {j.decline && <div style={{ fontSize: 10, color: HH.accentDark, marginTop: 4, fontFamily: HH.fontMono }}>auto-decline in {j.decline}</div>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 17, fontWeight: 700, fontFamily: HH.fontMono, letterSpacing: -0.4 }}>${j.price}</div>
                  <button style={{
                    marginTop: 4, padding: '6px 14px', borderRadius: 14,
                    background: HH.ink, color: '#fff', border: 'none', fontSize: 11.5, fontWeight: 700, cursor: 'pointer',
                  }}>Accept</button>
                </div>
              </div>
            ))}
          </div>
        </HHSheet>

        <HHTabBar active={0} helper />
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 20 · Helper · Job detail
// ═══════════════════════════════════════════════════════
function HH_S_HelperJob({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <HHTopBar title="Job from Alex R." left="close" right={<span style={{ color: HH.accentDark, fontWeight: 600 }}>0:42</span>} />

        <div style={{ flex: 1, overflow: 'auto' }}>
          <HHPhoto seed="pax-job" h={180} r={0} label="POSTER'S PHOTO · 1 OF 2" />

          <div style={{ padding: '16px 20px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: -0.4 }}>IKEA Pax wardrobe</div>
                <div style={{ fontSize: 12, color: HH.muted, marginTop: 4 }}>
                  3-door · boxes in bedroom · ~60 min
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ fontSize: 22, fontWeight: 700, fontFamily: HH.fontMono, letterSpacing: -0.5 }}>$48</div>
                <div style={{ fontSize: 10, color: HH.muted, fontFamily: HH.fontMono }}>fixed</div>
              </div>
            </div>

            <div style={{ marginTop: 14, padding: 12, background: HH.surfaceAlt, borderRadius: 10, fontSize: 13, color: HH.ink2, lineHeight: 1.5 }}>
              "3-door Pax, boxes already in bedroom. Tonight if possible. Apartment buzzer works."
            </div>

            <div style={{ marginTop: 14, display: 'flex', flexDirection: 'column', gap: 0 }}>
              {[
                [<ClockIcon/>, 'Today · 7:00 PM', 'starts in 22 min'],
                [<PinIcon/>, '2418 Linden Ave, 4B', '0.3 mi · drive ~4 min'],
                [<UserIcon/>, 'Alex R.', '★ 4.8 · 14 bookings'],
              ].map(([ic, t, s], i) => (
                <div key={i} style={{ display: 'flex', gap: 12, padding: '10px 0', borderTop: i ? `1px dashed ${HH.hairline}` : 'none', alignItems: 'center' }}>
                  <span style={{ color: HH.muted }}>{ic}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 500 }}>{t}</div>
                    <div style={{ fontSize: 11, color: HH.muted }}>{s}</div>
                  </div>
                </div>
              ))}
            </div>

            <HHLabel style={{ padding: '20px 0 8px' }}>Your earnings</HHLabel>
            <HHCard style={{ padding: 14 }}>
              {[
                ['Job price', '$48.00'],
                ['Platform fee (15%)', '−$7.20'],
              ].map(([l, v], i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', borderBottom: i === 0 ? `1px dashed ${HH.hairline}` : 'none', fontSize: 13 }}>
                  <span style={{ color: HH.muted }}>{l}</span>
                  <span style={{ fontFamily: HH.fontMono }}>{v}</span>
                </div>
              ))}
              <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 10, marginTop: 6, borderTop: `1px solid ${HH.hairline}`, fontSize: 15, fontWeight: 700 }}>
                <span>You earn</span>
                <span style={{ fontFamily: HH.fontMono, letterSpacing: -0.4 }}>$40.80</span>
              </div>
            </HHCard>
          </div>
        </div>

        <div style={{ padding: '14px 20px 22px', background: HH.bg, borderTop: `1px solid ${HH.hairline2}`, display: 'flex', gap: 10 }}>
          <HHBtn variant="ghost" size="lg" full={false} style={{ flex: 1 }}>Decline</HHBtn>
          <HHBtn variant="primary" size="lg" style={{ flex: 1.6 }}>Accept · drive 4 min</HHBtn>
        </div>
      </div>
    </HHPhone>
  );
}

// ═══════════════════════════════════════════════════════
// 21 · Helper · Earnings
// ═══════════════════════════════════════════════════════
function HH_S_HelperEarnings({ tone = 'neutral' }) {
  return (
    <HHPhone>
      <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <div style={{ padding: '14px 20px' }}>
          <h1 style={{ fontSize: 28, fontWeight: 700, letterSpacing: -0.8, margin: 0 }}>Earnings</h1>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
          {/* big stat */}
          <div style={{ padding: '0 20px' }}>
            <HHSeg options={['Week', 'Month', 'Year']} active="Week" />

            <div style={{ marginTop: 20 }}>
              <div style={{ fontSize: 11, fontFamily: HH.fontMono, color: HH.muted, letterSpacing: 0.6, textTransform: 'uppercase' }}>This week</div>
              <div style={{ fontSize: 40, fontWeight: 700, fontFamily: HH.fontMono, letterSpacing: -1.5, marginTop: 4, lineHeight: 1 }}>$612.40</div>
              <div style={{ fontSize: 12, color: HH.muted, marginTop: 6, display: 'flex', gap: 12 }}>
                <span>14 jobs</span>
                <span>·</span>
                <span>18.5 hrs</span>
                <span>·</span>
                <span style={{ color: HH.trust, fontWeight: 600 }}>+22% vs last wk</span>
              </div>
            </div>

            {/* chart */}
            <div style={{ marginTop: 24, display: 'flex', alignItems: 'flex-end', gap: 8, height: 110 }}>
              {[
                { d: 'M', v: 0.45, val: 56 },
                { d: 'T', v: 0.60, val: 72 },
                { d: 'W', v: 0.30, val: 38 },
                { d: 'T', v: 0.80, val: 102 },
                { d: 'F', v: 0.50, val: 64 },
                { d: 'S', v: 0.95, val: 124, today: true },
                { d: 'S', v: 0.70, val: 88 },
              ].map((b, i) => (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                  <div style={{ fontSize: 9, color: HH.muted, fontFamily: HH.fontMono }}>${b.val}</div>
                  <div style={{
                    width: '100%', height: `${b.v * 100}%`, minHeight: 6,
                    background: b.today ? HH.accent : HH.surfaceAlt,
                    border: `1px solid ${b.today ? HH.accent : HH.hairline}`,
                    borderRadius: 6,
                  }} />
                  <div style={{ fontSize: 10, color: HH.muted, fontFamily: HH.fontMono, fontWeight: b.today ? 700 : 400 }}>{b.d}</div>
                </div>
              ))}
            </div>
          </div>

          <HHLabel action="See all">Recent jobs</HHLabel>
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🛋</div>}
            title="IKEA Pax wardrobe"
            sub={<span>Alex R. · <HHStars rating={5} size={10}/> · 58 min</span>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.trust, fontWeight: 600 }}>+$40.80</span>}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>📺</div>}
            title="TV wall-mount"
            sub={<span>Sam K. · <HHStars rating={5} size={10}/> · 41 min</span>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.trust, fontWeight: 600 }}>+$68.00</span>}
          />
          <HHRow
            left={<div style={{ width: 44, height: 44, borderRadius: 10, background: HH.surfaceAlt, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20 }}>🧺</div>}
            title="Washer hookup"
            sub={<span>Priya hand-off · 30 min</span>}
            right={<span style={{ fontFamily: HH.fontMono, color: HH.trust, fontWeight: 600 }}>+$22.00</span>}
            divider={false}
          />

          <div style={{ padding: '20px', marginBottom: 80 }}>
            <HHCard style={{ padding: 16, display: 'flex', alignItems: 'center', gap: 12, background: HH.trustSoft, border: `1px solid ${HH.trust}33` }}>
              <div style={{ width: 40, height: 40, borderRadius: 20, background: HH.trust, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <BoltIcon/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 700 }}>Cash out · $612.40</div>
                <div style={{ fontSize: 11, color: HH.muted, marginTop: 1 }}>Instant transfer · 1% fee</div>
              </div>
              <span style={{ color: HH.trust }}><ChevIcon/></span>
            </HHCard>
          </div>
        </div>

        <HHTabBar active={2} helper />
      </div>
    </HHPhone>
  );
}

Object.assign(window, { HH_S_NoHelpers, HH_S_Scheduled, HH_S_OpenBids, HH_S_HelperHome, HH_S_HelperJob, HH_S_HelperEarnings });