// Wireframe primitives — grayscale low-fi building blocks
// Load AFTER React/Babel, BEFORE the screen files that use them.

const WF = {
  bg:       '#f7f7f6',
  paper:    '#ffffff',
  ink:      '#1a1a1a',
  ink2:     '#3a3a3a',
  muted:    '#737373',
  faint:    '#a3a3a3',
  line:     '#d4d4d4',
  line2:    '#e5e5e5',
  fill1:    '#ededed',
  fill2:    '#f3f3f2',
  hatch:    '#e8e8e6',
  accent:   '#d97757',  // reserved for the primary action of each direction
  accentSoft:'#fbe7dc',
  ok:       '#1a1a1a',
  font:     'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
  mono:     '"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace',
};

// ───────────────────────── Phone shell ─────────────────────────
function Phone({ children, width = 320, height = 660, label }) {
  return (
    <div style={{
      width, height,
      background: WF.paper,
      borderRadius: 36,
      border: `1.5px solid ${WF.ink}`,
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
      position: 'relative',
      overflow: 'hidden',
      fontFamily: WF.font,
      color: WF.ink,
    }}>
      {/* status bar */}
      <div style={{
        height: 28, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 22px 0 22px', fontSize: 11, fontWeight: 600, color: WF.ink,
        position: 'relative',
      }}>
        <span>9:41</span>
        {/* notch */}
        <div style={{
          position: 'absolute', left: '50%', top: 6, transform: 'translateX(-50%)',
          width: 92, height: 18, background: WF.ink, borderRadius: 12,
        }} />
        <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
          <span style={{ width: 14, height: 8, border: `1px solid ${WF.ink}`, borderRadius: 2 }}>
            <span style={{ display:'block', width:'70%', height:'100%', background: WF.ink }} />
          </span>
        </span>
      </div>
      {/* content area */}
      <div style={{ position: 'absolute', inset: '28px 0 18px 0', overflow: 'hidden' }}>
        {children}
      </div>
      {/* home indicator */}
      <div style={{
        position:'absolute', left:'50%', bottom: 6, transform:'translateX(-50%)',
        width: 120, height: 4, background: WF.ink, borderRadius: 2,
      }} />
    </div>
  );
}

// ───────────────────────── Atoms ─────────────────────────
function Box({ children, style, ...rest }) {
  return <div style={{ ...style }} {...rest}>{children}</div>;
}

// A placeholder rect with diagonal hatch lines — for imagery/maps
function Hatch({ w = '100%', h = 80, r = 8, label, dark = false, style = {} }) {
  const stroke = dark ? '#bdbdbd' : '#dcdcdc';
  const bg = dark ? '#ececea' : '#f1f1ef';
  return (
    <div style={{
      width: w, height: h, borderRadius: r, background: bg,
      backgroundImage: `repeating-linear-gradient(45deg, ${stroke} 0 1px, transparent 1px 8px)`,
      border: `1px solid ${WF.line}`,
      display:'flex', alignItems:'center', justifyContent:'center',
      color: WF.muted, fontFamily: WF.mono, fontSize: 10, letterSpacing: 0.4,
      ...style,
    }}>
      {label}
    </div>
  );
}

// A tile — soft fill, optional icon glyph + label
function Tile({ icon = '▢', label, active = false, style = {} }) {
  return (
    <div style={{
      background: active ? WF.ink : WF.fill2,
      color: active ? '#fff' : WF.ink,
      border: `1px solid ${active ? WF.ink : WF.line}`,
      borderRadius: 12,
      padding: '12px 8px',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 6, minHeight: 76,
      ...style,
    }}>
      <div style={{ fontSize: 22, lineHeight: 1, fontWeight: 300 }}>{icon}</div>
      <div style={{ fontSize: 10.5, fontWeight: 500, textAlign: 'center', lineHeight: 1.2 }}>{label}</div>
    </div>
  );
}

function Btn({ children, primary, ghost, full = true, style = {} }) {
  const base = {
    display:'flex', alignItems:'center', justifyContent:'center',
    height: 40, borderRadius: 22, fontSize: 13, fontWeight: 600,
    width: full ? '100%' : 'auto', padding: full ? 0 : '0 16px',
  };
  if (primary) return <div style={{ ...base, background: WF.accent, color:'#fff', ...style }}>{children}</div>;
  if (ghost)   return <div style={{ ...base, background:'transparent', color: WF.ink, border:`1px solid ${WF.line}`, ...style }}>{children}</div>;
  return <div style={{ ...base, background: WF.ink, color:'#fff', ...style }}>{children}</div>;
}

function Pill({ children, active, style = {} }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap: 4,
      height: 22, padding:'0 9px', borderRadius: 11,
      fontSize: 10, fontWeight: 500,
      background: active ? WF.ink : WF.fill1,
      color: active ? '#fff' : WF.ink2,
      border: `1px solid ${active ? WF.ink : WF.line}`,
      whiteSpace:'nowrap',
      ...style,
    }}>{children}</span>
  );
}

function Bar({ w = '100%', h = 8, r = 4, color = WF.line2, style = {} }) {
  return <div style={{ width: w, height: h, background: color, borderRadius: r, ...style }} />;
}

function Avatar({ size = 36, label = '◐', verified = false }) {
  return (
    <div style={{ position:'relative', width: size, height: size }}>
      <div style={{
        width: size, height: size, borderRadius: '50%',
        background: WF.fill1, border:`1px solid ${WF.line}`,
        display:'flex', alignItems:'center', justifyContent:'center',
        fontSize: size * 0.5, color: WF.muted,
      }}>{label}</div>
      {verified && (
        <div title="Verified ID" style={{
          position:'absolute', right: -2, bottom: -2,
          width: 14, height: 14, borderRadius: 7,
          background: WF.ink, color:'#fff', fontSize: 9, fontWeight: 700,
          display:'flex', alignItems:'center', justifyContent:'center',
          border:'1.5px solid #fff',
        }}>✓</div>
      )}
    </div>
  );
}

// ───────────────────────── Composites ─────────────────────────
function TopBar({ title, left = '‹', right, sub }) {
  return (
    <div style={{
      padding: '6px 16px 8px', borderBottom: `1px solid ${WF.line2}`,
      display:'flex', flexDirection:'column', gap: 2, background: WF.paper,
    }}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', minHeight: 28 }}>
        <span style={{ fontSize: 18, color: WF.ink, width: 24 }}>{left}</span>
        <span style={{ fontSize: 13, fontWeight: 600 }}>{title}</span>
        <span style={{ fontSize: 11, color: WF.muted, width: 24, textAlign:'right' }}>{right}</span>
      </div>
      {sub && <div style={{ fontSize: 10, color: WF.muted, textAlign:'center', fontFamily: WF.mono }}>{sub}</div>}
    </div>
  );
}

function BottomNav({ active = 0, helper = false }) {
  const items = helper
    ? ['Jobs', 'Map', 'Earnings', 'Profile']
    : ['Home', 'Post', 'Trips', 'Inbox', 'Me'];
  return (
    <div style={{
      position:'absolute', left: 0, right: 0, bottom: 0,
      height: 52, borderTop:`1px solid ${WF.line2}`, background: WF.paper,
      display:'grid', gridTemplateColumns: `repeat(${items.length}, 1fr)`,
    }}>
      {items.map((label, i) => (
        <div key={i} style={{
          display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap: 3,
          color: i === active ? WF.ink : WF.faint, fontSize: 10, fontWeight: i === active ? 600 : 400,
        }}>
          <div style={{
            width: 16, height: 16, borderRadius: 4, border:`1.5px solid currentColor`,
            background: i === active ? 'currentColor' : 'transparent',
          }}/>
          {label}
        </div>
      ))}
    </div>
  );
}

// Map placeholder — grid streets + pin
function MapWF({ h = 220, pins = 1, you = true, label, dim = false }) {
  return (
    <div style={{
      position:'relative', height: h, overflow:'hidden',
      background: dim ? '#e9e9e6' : '#eeeeec',
      backgroundImage: `
        linear-gradient(0deg, rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(20deg, rgba(0,0,0,0.04) 1px, transparent 1px),
        radial-gradient(circle at 30% 60%, rgba(0,0,0,0.05) 0 60px, transparent 60px),
        radial-gradient(circle at 75% 30%, rgba(0,0,0,0.04) 0 80px, transparent 80px)
      `,
      backgroundSize: '24px 24px, 24px 24px, 80px 80px, auto, auto',
      borderBottom:`1px solid ${WF.line2}`,
    }}>
      {/* fake road */}
      <div style={{ position:'absolute', left: 0, right: 0, top: '46%', height: 14,
        background:'#fff', borderTop:`1px solid ${WF.line}`, borderBottom:`1px solid ${WF.line}` }} />
      <div style={{ position:'absolute', left: '38%', top: 0, bottom: 0, width: 12,
        background:'#fff', borderLeft:`1px solid ${WF.line}`, borderRight:`1px solid ${WF.line}` }} />
      {you && (
        <div style={{ position:'absolute', left:'50%', top:'50%', transform:'translate(-50%,-50%)' }}>
          <div style={{ width: 14, height: 14, borderRadius: 7, background: WF.accent, border:'2px solid #fff', boxShadow:'0 0 0 8px rgba(217,119,87,0.18)' }} />
        </div>
      )}
      {Array.from({ length: pins }).map((_, i) => {
        const positions = [
          { left:'22%', top:'28%' }, { left:'70%', top:'22%' }, { left:'78%', top:'62%' },
          { left:'18%', top:'66%' }, { left:'58%', top:'76%' }, { left:'40%', top:'18%' },
        ];
        const p = positions[i % positions.length];
        return (
          <div key={i} style={{ position:'absolute', ...p, transform:'translate(-50%,-100%)' }}>
            <div style={{
              width: 22, height: 28, position:'relative',
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 11, background: WF.ink,
                color:'#fff', fontSize: 10, fontWeight: 700,
                display:'flex', alignItems:'center', justifyContent:'center',
                border:'2px solid #fff', boxShadow:'0 2px 4px rgba(0,0,0,0.2)',
              }}>{i+1}</div>
              <div style={{
                position:'absolute', left:'50%', bottom: 0, transform:'translateX(-50%) rotate(45deg)',
                width: 6, height: 6, background: WF.ink, borderRight:'2px solid #fff', borderBottom:'2px solid #fff',
              }}/>
            </div>
          </div>
        );
      })}
      {label && (
        <div style={{
          position:'absolute', left: 10, top: 10,
          background: WF.paper, border: `1px solid ${WF.line}`, borderRadius: 6,
          padding: '4px 8px', fontSize: 10, fontFamily: WF.mono, color: WF.muted,
        }}>{label}</div>
      )}
    </div>
  );
}

// Small caption/annotation under a screen
function Caption({ children, style = {} }) {
  return (
    <div style={{
      fontFamily: WF.mono, fontSize: 11, color: WF.muted,
      textAlign:'center', marginTop: 6, lineHeight: 1.4, maxWidth: 320,
      ...style,
    }}>{children}</div>
  );
}

// A labeled section heading inside a screen
function SectionLabel({ children }) {
  return (
    <div style={{
      fontSize: 10, fontFamily: WF.mono, textTransform:'uppercase', letterSpacing: 0.8,
      color: WF.muted, padding: '12px 16px 6px',
    }}>{children}</div>
  );
}

// Row in a list
function Row({ left, title, sub, right, badge, dense = false }) {
  return (
    <div style={{
      display:'flex', alignItems:'center', gap: 10,
      padding: dense ? '8px 16px' : '12px 16px',
      borderBottom:`1px solid ${WF.line2}`, background: WF.paper,
    }}>
      {left}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
          <span style={{ fontSize: 13, fontWeight: 600 }}>{title}</span>
          {badge}
        </div>
        {sub && <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>{sub}</div>}
      </div>
      {right && <div style={{ fontSize: 11, color: WF.ink2, textAlign:'right' }}>{right}</div>}
    </div>
  );
}

// Sheet (bottom-sheet card)
function Sheet({ children, h = 'auto', style = {} }) {
  return (
    <div style={{
      position:'absolute', left: 0, right: 0, bottom: 52,
      background: WF.paper, borderTopLeftRadius: 18, borderTopRightRadius: 18,
      borderTop:`1px solid ${WF.line}`, boxShadow:'0 -8px 20px rgba(0,0,0,0.06)',
      padding: '8px 0 12px', maxHeight: h,
      ...style,
    }}>
      <div style={{ width: 36, height: 4, borderRadius: 2, background: WF.line, margin:'2px auto 8px' }} />
      {children}
    </div>
  );
}

// ─────────── Export to window so other Babel scripts can use these ───────────
Object.assign(window, {
  WF, Phone, Box, Hatch, Tile, Btn, Pill, Bar, Avatar,
  TopBar, BottomNav, MapWF, Caption, SectionLabel, Row, Sheet,
});


//===========

// Shared screens — Onboarding (role choice, location, verify ID)
// Re-used across all directions.

function Onb_Welcome() {
  return (
    <Phone>
      <div style={{ padding:'40px 24px 0', height:'100%', display:'flex', flexDirection:'column' }}>
        <div style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.15, marginBottom: 10 }}>
          Get help setting up<br/>anything at home.
        </div>
        <div style={{ fontSize: 12, color: WF.muted, lineHeight: 1.45, marginBottom: 24 }}>
          Furniture, TVs, appliances — nearby<br/>verified helpers, on demand.
        </div>
        <Hatch h={170} r={14} label="HERO ILLUSTRATION" />
        <div style={{ flex: 1 }} />
        <div style={{ display:'flex', flexDirection:'column', gap: 10, marginBottom: 16 }}>
          <Btn primary>Get started</Btn>
          <Btn ghost>I want to <b>&nbsp;help</b>&nbsp; people →</Btn>
        </div>
        <div style={{ fontSize: 10, color: WF.faint, textAlign:'center', fontFamily: WF.mono }}>
          Already have an account? Sign in
        </div>
      </div>
    </Phone>
  );
}

function Onb_Role() {
  return (
    <Phone>
      <TopBar title="" left="‹" />
      <div style={{ padding:'20px 20px' }}>
        <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 6 }}>Which one are you?</div>
        <div style={{ fontSize: 11, color: WF.muted, marginBottom: 20 }}>You can switch later.</div>

        <div style={{ display:'flex', flexDirection:'column', gap: 10 }}>
          <div style={{ border:`2px solid ${WF.ink}`, borderRadius: 14, padding: 14, background: WF.fill2 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom: 8 }}>
              <span style={{ fontWeight: 700, fontSize: 14 }}>I need help</span>
              <span style={{ width: 18, height: 18, borderRadius: 9, background: WF.ink, color:'#fff', fontSize: 10, display:'flex', alignItems:'center', justifyContent:'center' }}>✓</span>
            </div>
            <div style={{ fontSize: 11, color: WF.muted, lineHeight: 1.4 }}>
              Post a quick request, get matched with a nearby helper in minutes.
            </div>
          </div>

          <div style={{ border:`1px solid ${WF.line}`, borderRadius: 14, padding: 14 }}>
            <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 6 }}>I want to help</div>
            <div style={{ fontSize: 11, color: WF.muted, lineHeight: 1.4 }}>
              Earn money fixing, mounting, assembling near you. Verify ID first.
            </div>
          </div>
        </div>

        <div style={{ marginTop: 26 }}>
          <Btn primary>Continue</Btn>
        </div>
      </div>
    </Phone>
  );
}

function Onb_Location() {
  return (
    <Phone>
      <TopBar title="Your location" left="‹" right="skip" />
      <MapWF h={260} you label="finding nearby helpers…" />
      <div style={{ padding: '16px 20px' }}>
        <div style={{ fontSize: 11, fontFamily: WF.mono, color: WF.muted, marginBottom: 6 }}>HOME ADDRESS</div>
        <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, padding:'12px 14px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>2418 Linden Ave, Apt 4B</div>
            <div style={{ fontSize: 11, color: WF.muted }}>Brooklyn, NY 11215</div>
          </div>
          <span style={{ color: WF.muted, fontSize: 14 }}>›</span>
        </div>
        <div style={{ marginTop: 14 }}>
          <Btn primary>Use this location</Btn>
        </div>
        <div style={{ fontSize: 10, color: WF.faint, textAlign:'center', marginTop: 12, fontFamily: WF.mono }}>
          we only share with the helper you book
        </div>
      </div>
    </Phone>
  );
}

function Onb_VerifyID() {
  return (
    <Phone>
      <TopBar title="Verify your ID" left="‹" sub="helpers only · ≈ 90s" />
      <div style={{ padding: '20px' }}>
        <div style={{ fontSize: 16, fontWeight: 700, marginBottom: 6 }}>Quick ID check</div>
        <div style={{ fontSize: 12, color: WF.muted, marginBottom: 18, lineHeight: 1.45 }}>
          We confirm every helper is who they say they are. Posters see a verified badge before they book.
        </div>

        <div style={{ display:'flex', flexDirection:'column', gap: 8 }}>
          {[
            ['Government ID', 'photo of front + back', true],
            ['Selfie match',  'auto-compared to ID', true],
            ['Phone number',  'we text a 6-digit code', false],
            ['Background check', 'optional, +$ trust', false],
          ].map(([t, s, done], i) => (
            <div key={i} style={{
              display:'flex', alignItems:'center', gap: 12,
              padding: '12px 14px', border: `1px solid ${WF.line}`, borderRadius: 10,
              background: done ? WF.fill2 : WF.paper,
            }}>
              <div style={{
                width: 22, height: 22, borderRadius: 11,
                background: done ? WF.ink : WF.fill1, color: done ? '#fff' : WF.muted,
                display:'flex', alignItems:'center', justifyContent:'center', fontSize: 11, fontWeight: 700,
                border:`1px solid ${done ? WF.ink : WF.line}`,
              }}>{done ? '✓' : i+1}</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600 }}>{t}</div>
                <div style={{ fontSize: 10.5, color: WF.muted, marginTop: 1 }}>{s}</div>
              </div>
              <span style={{ color: WF.faint, fontSize: 14 }}>›</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 18 }}>
          <Btn primary>Continue verification</Btn>
        </div>
      </div>
    </Phone>
  );
}

Object.assign(window, { Onb_Welcome, Onb_Role, Onb_Location, Onb_VerifyID });


//===========

// Direction A — Instant Match (Uber-style)
// Tap category → set details → app auto-matches closest verified helper at fixed price.

function A_Home() {
  return (
    <Phone>
      {/* greeting + map peek */}
      <div style={{ padding:'12px 16px 0' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <div>
            <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>HI, ALEX</div>
            <div style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>What needs setting up?</div>
          </div>
          <Avatar size={32} label="A" />
        </div>
      </div>

      <div style={{ padding:'12px 16px' }}>
        <div style={{
          height: 36, borderRadius: 18, background: WF.fill2, border:`1px solid ${WF.line}`,
          display:'flex', alignItems:'center', gap: 8, padding:'0 14px',
          fontSize: 12, color: WF.muted,
        }}>
          <span>⌕</span> Describe what you need…
        </div>
      </div>

      <SectionLabel>CATEGORIES</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
        <Tile icon="🛋" label="Furniture" />
        <Tile icon="📺" label="TV mount" />
        <Tile icon="🧺" label="Appliance" />
        <Tile icon="🔧" label="Small fix" />
        <Tile icon="📦" label="Unpack" />
        <Tile icon="＋" label="Other" />
      </div>

      <SectionLabel>HELPERS NEAR YOU · 12</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ height: 96, borderRadius: 10, overflow:'hidden', border:`1px solid ${WF.line}` }}>
          <MapWF h={96} pins={4} label="0.4 mi avg" />
        </div>
      </div>

      <BottomNav active={0} />
    </Phone>
  );
}

function A_Post() {
  return (
    <Phone>
      <TopBar title="New request" left="✕" right="2/3" />
      <div style={{ padding: '16px 16px 0' }}>
        <Pill active>🛋 Furniture</Pill> <Pill>Today</Pill> <Pill>1 helper</Pill>
      </div>

      <SectionLabel>WHAT'S THE JOB?</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, padding: 12, fontSize: 12.5, lineHeight: 1.5, minHeight: 70 }}>
          <div>IKEA Pax wardrobe, 3 doors.</div>
          <div style={{ color: WF.muted }}>Boxes already in the bedroom.</div>
        </div>
      </div>

      <SectionLabel>PHOTOS · OPTIONAL</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8 }}>
        <Hatch w={64} h={64} r={8} label="01" />
        <Hatch w={64} h={64} r={8} label="02" />
        <div style={{
          width: 64, height: 64, borderRadius: 8, border:`1.5px dashed ${WF.line}`,
          display:'flex', alignItems:'center', justifyContent:'center', fontSize: 24, color: WF.faint,
        }}>＋</div>
      </div>

      <SectionLabel>WHEN</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8 }}>
        <Pill active>ASAP</Pill>
        <Pill>In 2 hrs</Pill>
        <Pill>Tonight</Pill>
        <Pill>Schedule…</Pill>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 16, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 10 }}>
          <span style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>FIXED PRICE</span>
          <span style={{ fontSize: 18, fontWeight: 700 }}>$48 <span style={{ fontSize: 11, color: WF.muted, fontWeight: 400 }}>· ~60 min</span></span>
        </div>
        <Btn primary>Find me a helper →</Btn>
      </div>
    </Phone>
  );
}

function A_Matching() {
  return (
    <Phone>
      <TopBar title="Finding a helper" left="✕" sub="searching within 1.5 mi" />
      <MapWF h={300} pins={3} you label="radar" />
      <div style={{ padding: '14px 16px' }}>
        <div style={{ display:'flex', alignItems:'center', gap: 10, marginBottom: 10 }}>
          <div style={{
            width: 28, height: 28, borderRadius: 14, border:`2.5px solid ${WF.accent}`, borderTopColor:'transparent',
            animation:'spin 1s linear infinite',
          }} />
          <div style={{ fontSize: 13, fontWeight: 600 }}>3 verified helpers nearby</div>
        </div>
        <Bar w="35%" h={6} color={WF.accent} style={{ marginBottom: 4 }} />
        <Bar h={6} />
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono, marginTop: 10, lineHeight: 1.5 }}>
          → ping helper #1 (0.3 mi) … waiting<br/>
          → fallback to #2 (0.6 mi) in 12s<br/>
          → cancel anytime, no charge
        </div>
      </div>
      <style>{'@keyframes spin{to{transform:rotate(360deg)}}'}</style>
    </Phone>
  );
}

function A_Matched() {
  return (
    <Phone>
      <TopBar title="Helper matched!" left="‹" />
      <MapWF h={220} pins={1} you label="ETA 8 min · 0.4 mi" />
      <div style={{ padding: '16px' }}>
        <div style={{ display:'flex', gap: 12, alignItems:'center' }}>
          <Avatar size={52} label="M" verified />
          <div style={{ flex: 1 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
              <span style={{ fontWeight: 700, fontSize: 15 }}>Marcus T.</span>
              <Pill style={{ background: WF.ink, color:'#fff', borderColor: WF.ink, fontSize: 9 }}>✓ ID verified</Pill>
            </div>
            <div style={{ fontSize: 11.5, color: WF.muted, marginTop: 3 }}>
              ★ 4.9 · 312 jobs · IKEA pro
            </div>
          </div>
        </div>

        <div style={{ display:'flex', gap: 8, marginTop: 14 }}>
          <Btn ghost>💬 Message</Btn>
          <Btn ghost>📞 Call</Btn>
        </div>

        <div style={{ marginTop: 14, padding: 12, background: WF.fill2, borderRadius: 10 }}>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: WF.muted }}>Job</span><span style={{ fontWeight: 600 }}>IKEA Pax wardrobe</span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12, marginBottom: 6 }}>
            <span style={{ color: WF.muted }}>Fixed price</span><span style={{ fontWeight: 600 }}>$48.00</span>
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize: 12 }}>
            <span style={{ color: WF.muted }}>Pay on arrival</span>
            <span style={{ fontWeight: 600 }}>•••• 4242</span>
          </div>
        </div>
      </div>

      <BottomNav active={2} />
    </Phone>
  );
}

function A_Inflight() {
  return (
    <Phone>
      <div style={{ height: '100%', display:'flex', flexDirection:'column' }}>
        <MapWF h={360} pins={1} you label="Marcus · 4 min away" />
        <Sheet>
          <div style={{ padding: '0 16px' }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
              <Avatar size={40} label="M" verified />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>Marcus is on the way</div>
                <div style={{ fontSize: 11, color: WF.muted }}>Arriving 7:42 PM · Toyota Corolla • 4PJ-829</div>
              </div>
            </div>
            <div style={{ display:'flex', gap: 8, marginTop: 14 }}>
              <Btn ghost full={false} style={{ flex: 1 }}>💬</Btn>
              <Btn ghost full={false} style={{ flex: 1 }}>📞</Btn>
              <Btn full={false} style={{ flex: 2 }}>Share trip</Btn>
            </div>
          </div>
        </Sheet>
        <BottomNav active={2} />
      </div>
    </Phone>
  );
}

function A_Chat() {
  const msgs = [
    { who:'them', t:'Hey! On my way. Anything I should bring up the elevator?' },
    { who:'me',   t:'No, all boxes already in the bedroom.' },
    { who:'them', t:'Perfect. Apartment buzzer working?' },
    { who:'me',   t:'Yes — apt 4B, buzz "Reyes".' },
    { who:'them', t:'👍 ETA 4 min' },
  ];
  return (
    <Phone>
      <TopBar title="Marcus T." left="‹" sub="✓ ID verified · ETA 4 min" />
      <div style={{ padding: 12, display:'flex', flexDirection:'column', gap: 6, height:'calc(100% - 100px - 52px)', overflow:'hidden' }}>
        {msgs.map((m, i) => (
          <div key={i} style={{ display:'flex', justifyContent: m.who==='me' ? 'flex-end' : 'flex-start' }}>
            <div style={{
              maxWidth:'78%', padding:'8px 11px', borderRadius: 14, fontSize: 12, lineHeight: 1.35,
              background: m.who==='me' ? WF.ink : WF.fill1,
              color: m.who==='me' ? '#fff' : WF.ink,
            }}>{m.t}</div>
          </div>
        ))}
      </div>
      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: '8px 12px', borderTop:`1px solid ${WF.line2}`, background: WF.paper }}>
        <div style={{
          display:'flex', alignItems:'center', gap: 8,
          height: 36, borderRadius: 18, background: WF.fill2, border:`1px solid ${WF.line}`,
          padding: '0 12px', fontSize: 12, color: WF.muted,
        }}>
          <span>📷</span><span style={{ flex: 1 }}>Message Marcus…</span><span>↗</span>
        </div>
      </div>
    </Phone>
  );
}

function A_Pay() {
  return (
    <Phone>
      <TopBar title="Job complete" left="✕" />
      <div style={{ padding: 16 }}>
        <Hatch h={140} r={12} label="PHOTO · ASSEMBLED ✓" />
        <div style={{ marginTop: 14, fontSize: 14, fontWeight: 700 }}>$48.00 charged to •••• 4242</div>
        <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>Marcus T. · 58 min · IKEA Pax wardrobe</div>

        <div style={{ marginTop: 18, padding: 14, border:`1px solid ${WF.line}`, borderRadius: 12 }}>
          <div style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Rate Marcus</div>
          <div style={{ display:'flex', gap: 6, fontSize: 22 }}>
            <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
          </div>
          <div style={{ marginTop: 10, display:'flex', flexWrap:'wrap', gap: 6 }}>
            <Pill>On time</Pill><Pill>Friendly</Pill><Pill>Clean work</Pill><Pill>Above &amp; beyond</Pill>
          </div>
        </div>

        <div style={{ marginTop: 14, display:'flex', gap: 8 }}>
          <Btn ghost>＋ Tip $5</Btn>
          <Btn primary>Submit</Btn>
        </div>
      </div>
    </Phone>
  );
}

function A_Profile() {
  return (
    <Phone>
      <TopBar title="Marcus T." left="‹" right="⋯" />
      <div style={{ padding: 16, display:'flex', gap: 14, alignItems:'center' }}>
        <Avatar size={64} label="M" verified />
        <div>
          <div style={{ display:'flex', alignItems:'center', gap: 6 }}>
            <span style={{ fontSize: 16, fontWeight: 700 }}>Marcus T.</span>
            <Pill style={{ background: WF.ink, color:'#fff', borderColor: WF.ink, fontSize: 9 }}>✓ ID verified</Pill>
          </div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 4 }}>★ 4.9 · 312 jobs · 0.4 mi away</div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>Speaks English, Spanish</div>
        </div>
      </div>

      <SectionLabel>SPECIALTIES</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexWrap:'wrap', gap: 6 }}>
        <Pill active>IKEA assembly</Pill><Pill>TV mounting</Pill><Pill>Shelves</Pill><Pill>Cribs</Pill>
      </div>

      <SectionLabel>RECENT REVIEWS</SectionLabel>
      <Row left={<Avatar size={28} label="J"/>} title="Jamie · ★★★★★" sub="“Got my desk done in 40 min. Super tidy.”" right="2d" />
      <Row left={<Avatar size={28} label="R"/>} title="Rina · ★★★★★" sub="“Mounted my 65″ TV perfectly.”" right="5d" />

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Request Marcus →</Btn>
      </div>
    </Phone>
  );
}

function A_Dashboard() {
  return (
    <Phone>
      <TopBar title="My requests" left="" right="＋" />
      <div style={{ padding: '12px 16px', display:'flex', gap: 6 }}>
        <Pill active>Active</Pill><Pill>Scheduled</Pill><Pill>Past</Pill>
      </div>
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🛋</div>}
        title="IKEA Pax wardrobe"
        sub="Marcus · arriving 7:42 PM"
        right={<Pill active style={{ fontSize: 9 }}>EN ROUTE</Pill>}
      />
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>📺</div>}
        title="65″ TV wall-mount"
        sub="Tomorrow 10 AM · helper TBD"
        right={<span style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>SCHED</span>}
      />

      <SectionLabel>RECENT</SectionLabel>
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🧺</div>}
        title="Washer hookup"
        sub="Priya · ★★★★★ · $62"
        right={<span style={{ fontSize: 10, color: WF.muted }}>May 14</span>}
      />
      <Row
        left={<div style={{ width: 38, height: 38, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🔧</div>}
        title="Curtain rods × 3"
        sub="Marcus · ★★★★☆ · $40"
        right={<span style={{ fontSize: 10, color: WF.muted }}>May 9</span>}
      />

      <BottomNav active={2} />
    </Phone>
  );
}

function A_Notifs() {
  return (
    <Phone>
      <TopBar title="Notifications" left="" right="✓" />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.accent }} />}
        title="Marcus accepted your request"
        sub="ETA 8 min · $48 fixed"
        right="now"
      />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.accent }} />}
        title="Marcus is arriving"
        sub="Apt 4B · 2418 Linden Ave"
        right="2m"
      />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.line }} />}
        title="Rate your last helper"
        sub="Priya · washer hookup"
        right="3d"
      />
      <Row
        left={<div style={{ width: 8, height: 8, borderRadius: 4, background: WF.line }} />}
        title="$10 credit added"
        sub="referral bonus"
        right="1w"
      />
      <BottomNav active={3} />
    </Phone>
  );
}

Object.assign(window, { A_Home, A_Post, A_Matching, A_Matched, A_Inflight, A_Chat, A_Pay, A_Profile, A_Dashboard, A_Notifs });


//===========

// Direction B — Apply with Quotes (reverse marketplace)
// Poster writes job → multiple helpers bid → poster picks the best one.

function B_Home() {
  return (
    <Phone>
      <div style={{ padding:'14px 16px 4px' }}>
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>WHAT DO YOU NEED?</div>
        <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>Post once, get 3–6 quotes.</div>
      </div>

      <div style={{ padding: '10px 16px 6px' }}>
        <Btn primary>＋ Post a new request</Btn>
      </div>

      <SectionLabel>POPULAR CATEGORIES</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8 }}>
        <Tile icon="🛋" label="Furniture assembly" />
        <Tile icon="📺" label="TV wall-mount" />
        <Tile icon="🧺" label="Appliance install" />
        <Tile icon="📦" label="Unpack & set up" />
      </div>

      <SectionLabel>YOUR OPEN POSTS</SectionLabel>
      <Row
        left={<div style={{ width: 36, height: 36, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🛋</div>}
        title="IKEA Pax assembly"
        sub="4 bids · $42 – $65"
        right={<Pill active style={{ fontSize: 9, background: WF.accent, borderColor: WF.accent, color:'#fff' }}>4 NEW</Pill>}
      />
      <Row
        left={<div style={{ width: 36, height: 36, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>📺</div>}
        title="65″ TV mount, stud wall"
        sub="2 bids · $80 – $95"
        right={<span style={{ fontSize: 10, color: WF.muted }}>2h</span>}
      />

      <BottomNav active={0} />
    </Phone>
  );
}

function B_PostJob() {
  return (
    <Phone>
      <TopBar title="Post a request" left="✕" right="3/3" />
      <SectionLabel>JOB</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, padding: 12, fontSize: 12.5, lineHeight: 1.5 }}>
          <div style={{ fontWeight: 600 }}>IKEA Pax wardrobe + 2 shelves</div>
          <div style={{ color: WF.muted, marginTop: 4 }}>
            Boxes in bedroom. Need it done today if possible.
          </div>
        </div>
      </div>

      <SectionLabel>YOUR BUDGET</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize: 11, color: WF.muted, marginBottom: 4 }}>
          <span>$30</span><span style={{ fontWeight: 700, color: WF.ink, fontSize: 13 }}>$40 – $60</span><span>$120</span>
        </div>
        <div style={{ position:'relative', height: 4, background: WF.fill1, borderRadius: 2 }}>
          <div style={{ position:'absolute', left:'10%', right:'40%', top: 0, bottom: 0, background: WF.ink, borderRadius: 2 }} />
          <div style={{ position:'absolute', left:'10%', top:'50%', transform:'translate(-50%,-50%)', width: 14, height: 14, borderRadius: 7, background:'#fff', border:`2px solid ${WF.ink}` }} />
          <div style={{ position:'absolute', left:'60%', top:'50%', transform:'translate(-50%,-50%)', width: 14, height: 14, borderRadius: 7, background:'#fff', border:`2px solid ${WF.ink}` }} />
        </div>
        <div style={{ fontSize: 10, color: WF.faint, fontFamily: WF.mono, marginTop: 8 }}>
          helpers see your budget · you only pay the bid you accept
        </div>
      </div>

      <SectionLabel>WHEN · WHERE</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexDirection:'column', gap: 8 }}>
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 12px', border:`1px solid ${WF.line}`, borderRadius: 10, fontSize: 12 }}>
          <span style={{ color: WF.muted }}>Today, anytime</span><span>›</span>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 12px', border:`1px solid ${WF.line}`, borderRadius: 10, fontSize: 12 }}>
          <span style={{ color: WF.muted }}>2418 Linden Ave, 4B</span><span>›</span>
        </div>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Post — collect bids</Btn>
        <div style={{ fontSize: 10, color: WF.faint, textAlign:'center', marginTop: 6, fontFamily: WF.mono }}>
          most posts get a bid in &lt; 15 min
        </div>
      </div>
    </Phone>
  );
}

function B_Bids() {
  const bids = [
    { name:'Marcus T.', dist:'0.4 mi', rate:'4.9', jobs:312, price:'$48', eta:'45 min', note:'Pax pro — 80+ done.', best:true },
    { name:'Priya S.',  dist:'1.1 mi', rate:'4.8', jobs:188, price:'$55', eta:'1 hr',  note:'Available right now.' },
    { name:'Jordan K.', dist:'1.6 mi', rate:'4.7', jobs:94,  price:'$42', eta:'90 min', note:'Cheapest — has tools.' },
    { name:'Tomás R.',  dist:'2.2 mi', rate:'5.0', jobs:46,  price:'$65', eta:'2 hr',   note:'New, fully verified.' },
  ];
  return (
    <Phone>
      <TopBar title="4 bids in 11 min" left="‹" right="⇅" sub="IKEA Pax wardrobe · $42–$65" />
      <div style={{ overflow:'hidden', height: 'calc(100% - 100px - 52px)' }}>
        {bids.map((b, i) => (
          <div key={i} style={{
            padding: '12px 14px', borderBottom: `1px solid ${WF.line2}`,
            display:'flex', gap: 10, background: b.best ? WF.fill2 : WF.paper, position:'relative',
          }}>
            {b.best && (
              <div style={{
                position:'absolute', right: 10, top: 10,
                background: WF.accent, color:'#fff', fontSize: 9, fontWeight: 700, padding:'2px 6px', borderRadius: 4, fontFamily: WF.mono,
              }}>RECOMMENDED</div>
            )}
            <Avatar size={42} label={b.name[0]} verified />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>{b.name}</div>
              <div style={{ fontSize: 10.5, color: WF.muted, marginTop: 2 }}>
                ★ {b.rate} · {b.jobs} jobs · {b.dist}
              </div>
              <div style={{ fontSize: 11.5, color: WF.ink2, marginTop: 6, lineHeight: 1.4 }}>
                “{b.note}”
              </div>
              <div style={{ display:'flex', gap: 12, marginTop: 6, alignItems:'baseline' }}>
                <span style={{ fontSize: 16, fontWeight: 700 }}>{b.price}</span>
                <span style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>can start in {b.eta}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active={2} />
    </Phone>
  );
}

function B_BidDetail() {
  return (
    <Phone>
      <TopBar title="Marcus's bid" left="‹" right="⋯" />
      <div style={{ padding: 16, display:'flex', gap: 12, alignItems:'center' }}>
        <Avatar size={56} label="M" verified />
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Marcus T.</div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 3 }}>★ 4.9 · 312 jobs · 0.4 mi · ✓ ID</div>
        </div>
        <div style={{ textAlign:'right' }}>
          <div style={{ fontSize: 20, fontWeight: 700 }}>$48</div>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>fixed bid</div>
        </div>
      </div>

      <div style={{ padding:'0 16px' }}>
        <div style={{
          background: WF.fill2, borderRadius: 10, padding: 12, fontSize: 12.5, lineHeight: 1.5,
        }}>
          “Hi! I've done 80+ Pax wardrobes. I have a cordless drill + level. Can be there in 45 min if you accept now.”
        </div>
      </div>

      <SectionLabel>BREAKDOWN</SectionLabel>
      <div style={{ padding:'0 16px', fontSize: 12 }}>
        {[['Labor (≈60 min)', '$40'], ['Tools brought', '$5'], ['Platform fee', '$3']].map(([l, v], i) => (
          <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'8px 0', borderBottom:`1px dashed ${WF.line}` }}>
            <span style={{ color: WF.muted }}>{l}</span><span>{v}</span>
          </div>
        ))}
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 0' }}>
          <span style={{ fontWeight: 700 }}>You pay</span><span style={{ fontWeight: 700 }}>$48.00</span>
        </div>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}`, display:'flex', gap: 8 }}>
        <Btn ghost full={false} style={{ flex: 1 }}>Ask question</Btn>
        <Btn primary style={{ flex: 1.4 }}>Accept · $48</Btn>
      </div>
    </Phone>
  );
}

function B_Schedule() {
  return (
    <Phone>
      <TopBar title="Confirm time" left="‹" sub="with Marcus · $48 fixed" />
      <SectionLabel>PICK A SLOT</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8, overflow:'hidden' }}>
        {['Today', 'Wed', 'Thu', 'Fri', 'Sat'].map((d, i) => (
          <div key={i} style={{
            flex: 1, padding:'8px 0', textAlign:'center', borderRadius: 10,
            border: `1px solid ${i===0 ? WF.ink : WF.line}`, background: i===0 ? WF.ink : WF.paper, color: i===0 ? '#fff' : WF.ink,
          }}>
            <div style={{ fontSize: 10, fontFamily: WF.mono, opacity: 0.7 }}>{['MAY 19','20','21','22','23'][i]}</div>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{d}</div>
          </div>
        ))}
      </div>
      <SectionLabel>AVAILABLE</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8 }}>
        {['6:00 PM','6:30','7:00','7:30','8:00','8:30'].map((t, i) => (
          <div key={i} style={{
            padding:'10px 0', textAlign:'center', borderRadius: 10, fontSize: 12, fontWeight: 600,
            border:`1px solid ${i===2 ? WF.accent : WF.line}`,
            background: i===2 ? WF.accentSoft : WF.paper, color: i===2 ? WF.accent : WF.ink,
          }}>{t}</div>
        ))}
      </div>
      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Book 7:00 PM · $48</Btn>
      </div>
    </Phone>
  );
}

Object.assign(window, { B_Home, B_PostJob, B_Bids, B_BidDetail, B_Schedule });


//===========

// Direction C — Browse Directory (Airbnb-style, map-first)
// You scroll/filter helpers, view profiles, request a specific one.

function C_MapBrowse() {
  return (
    <Phone>
      <div style={{ position:'relative', height:'100%' }}>
        <MapWF h={'100%'} pins={6} you label="" />
        {/* search overlay */}
        <div style={{ position:'absolute', left: 12, right: 12, top: 12 }}>
          <div style={{
            height: 44, borderRadius: 22, background: WF.paper, border:`1px solid ${WF.line}`,
            display:'flex', alignItems:'center', gap: 8, padding:'0 14px',
            boxShadow:'0 2px 10px rgba(0,0,0,0.06)',
          }}>
            <span>⌕</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 600 }}>Furniture assembly</div>
              <div style={{ fontSize: 10, color: WF.muted }}>Within 2 mi · Today</div>
            </div>
            <div style={{ width: 28, height: 28, borderRadius: 14, border:`1px solid ${WF.line}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 12 }}>⚙</div>
          </div>
          <div style={{ display:'flex', gap: 6, marginTop: 8, overflow:'hidden' }}>
            <Pill active>★ 4.8+</Pill>
            <Pill>✓ Verified</Pill>
            <Pill>$ Under $60</Pill>
            <Pill>Available now</Pill>
          </div>
        </div>

        {/* bottom card stack */}
        <Sheet style={{ bottom: 52, padding: 12 }}>
          <div style={{ display:'flex', gap: 10, padding:'0 4px', overflow:'hidden' }}>
            {[
              { n:'Marcus T.', p:'$48', r:'4.9' },
              { n:'Priya S.',  p:'$55', r:'4.8' },
              { n:'Jordan K.', p:'$42', r:'4.7' },
            ].map((h, i) => (
              <div key={i} style={{
                minWidth: 170, border:`1px solid ${WF.line}`, borderRadius: 12, padding: 10,
                background: WF.paper,
              }}>
                <div style={{ display:'flex', alignItems:'center', gap: 8 }}>
                  <Avatar size={32} label={h.n[0]} verified />
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 700 }}>{h.n}</div>
                    <div style={{ fontSize: 10, color: WF.muted }}>★ {h.r} · {0.4 + i*0.5} mi</div>
                  </div>
                </div>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop: 8 }}>
                  <span style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>FROM</span>
                  <span style={{ fontSize: 14, fontWeight: 700 }}>{h.p}</span>
                </div>
              </div>
            ))}
          </div>
        </Sheet>

        {/* map / list toggle */}
        <div style={{
          position:'absolute', left:'50%', bottom: 120, transform:'translateX(-50%)',
          height: 36, padding:'0 14px', background: WF.ink, color:'#fff', borderRadius: 18,
          fontSize: 12, fontWeight: 600, display:'flex', alignItems:'center', gap: 6,
        }}>
          ☰ Show list
        </div>

        <BottomNav active={0} />
      </div>
    </Phone>
  );
}

function C_List() {
  const helpers = [
    { n:'Marcus T.',  s:'IKEA pro · TV mounts',     r:'4.9', j:312, d:'0.4 mi', p:'$48' },
    { n:'Priya S.',   s:'Appliance + plumbing',     r:'4.8', j:188, d:'1.1 mi', p:'$55' },
    { n:'Jordan K.',  s:'Furniture, shelving',      r:'4.7', j:94,  d:'1.6 mi', p:'$42' },
    { n:'Tomás R.',   s:'Cribs, baby gear',         r:'5.0', j:46,  d:'2.2 mi', p:'$65' },
    { n:'Aisha B.',   s:'Curtains, lights, decor',  r:'4.9', j:201, d:'0.9 mi', p:'$50' },
  ];
  return (
    <Phone>
      <TopBar title="Helpers near you" left="‹" right="⊞ map" sub="42 results · sorted by distance" />
      <div style={{ padding:'10px 16px', display:'flex', gap: 6, overflow:'hidden' }}>
        <Pill active>Furniture</Pill><Pill>★ 4.8+</Pill><Pill>Verified</Pill><Pill>≤ 1mi</Pill>
      </div>
      <div style={{ overflow:'hidden', height:'calc(100% - 100px - 60px)' }}>
        {helpers.map((h, i) => (
          <div key={i} style={{
            display:'flex', gap: 10, padding:'12px 16px', borderBottom:`1px solid ${WF.line2}`,
          }}>
            <div style={{ width: 60, height: 60, borderRadius: 10, background: WF.fill1, border:`1px solid ${WF.line}`, display:'flex', alignItems:'center', justifyContent:'center', fontSize: 22, color: WF.muted, position:'relative' }}>
              {h.n[0]}
              <div style={{
                position:'absolute', right: -3, bottom: -3,
                width: 16, height: 16, borderRadius: 8, background: WF.ink, color:'#fff',
                fontSize: 9, fontWeight: 700, display:'flex', alignItems:'center', justifyContent:'center',
                border:'2px solid #fff',
              }}>✓</div>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display:'flex', justifyContent:'space-between' }}>
                <span style={{ fontWeight: 700, fontSize: 13 }}>{h.n}</span>
                <span style={{ fontSize: 14, fontWeight: 700 }}>{h.p}</span>
              </div>
              <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>{h.s}</div>
              <div style={{ fontSize: 10.5, color: WF.ink2, marginTop: 6, fontFamily: WF.mono }}>
                ★ {h.r} · {h.j} jobs · {h.d}
              </div>
            </div>
          </div>
        ))}
      </div>
      <BottomNav active={0} />
    </Phone>
  );
}

function C_HelperFull() {
  return (
    <Phone>
      <Hatch h={150} r={0} label="COVER · helper at work" />
      <div style={{ padding:'14px 16px 6px', display:'flex', alignItems:'center', gap: 10 }}>
        <Avatar size={52} label="M" verified />
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 700 }}>Marcus T.</div>
          <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>Brooklyn · joined Jan 2024</div>
        </div>
        <span style={{ fontSize: 16 }}>♡</span>
      </div>

      <div style={{ padding:'0 16px', display:'flex', gap: 6, flexWrap:'wrap' }}>
        <Pill active>✓ ID verified</Pill><Pill>Background check</Pill><Pill>Tools included</Pill>
      </div>

      <SectionLabel>RATES · STARTING</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', gap: 8 }}>
        <div style={{ flex: 1, padding: 10, border:`1px solid ${WF.line}`, borderRadius: 10 }}>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>FURNITURE</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>$45<span style={{ fontSize: 10, color: WF.muted }}>/hr</span></div>
        </div>
        <div style={{ flex: 1, padding: 10, border:`1px solid ${WF.line}`, borderRadius: 10 }}>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>TV MOUNT</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>$80<span style={{ fontSize: 10, color: WF.muted }}>/job</span></div>
        </div>
        <div style={{ flex: 1, padding: 10, border:`1px solid ${WF.line}`, borderRadius: 10 }}>
          <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>APPLIANCE</div>
          <div style={{ fontSize: 15, fontWeight: 700, marginTop: 2 }}>$65<span style={{ fontSize: 10, color: WF.muted }}>/job</span></div>
        </div>
      </div>

      <SectionLabel>PORTFOLIO · 24 PHOTOS</SectionLabel>
      <div style={{ padding:'0 16px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 6 }}>
        <Hatch h={56} r={6} label="" /><Hatch h={56} r={6} label="" /><Hatch h={56} r={6} label="" />
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}`, display:'flex', gap: 8 }}>
        <Btn ghost full={false} style={{ flex: 1 }}>💬 Message</Btn>
        <Btn primary style={{ flex: 1.5 }}>Request Marcus →</Btn>
      </div>
    </Phone>
  );
}

function C_Filter() {
  return (
    <Phone>
      <TopBar title="Filters" left="✕" right="reset" />
      <SectionLabel>WHAT</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexWrap:'wrap', gap: 6 }}>
        <Pill active>Furniture</Pill><Pill>TV mount</Pill><Pill>Appliance</Pill><Pill>Plumbing</Pill><Pill>Electrical</Pill><Pill>Other</Pill>
      </div>

      <SectionLabel>DISTANCE · 2 MI</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <div style={{ position:'relative', height: 4, background: WF.fill1, borderRadius: 2 }}>
          <div style={{ position:'absolute', left: 0, width:'30%', top: 0, bottom: 0, background: WF.ink, borderRadius: 2 }} />
          <div style={{ position:'absolute', left:'30%', top:'50%', transform:'translate(-50%,-50%)', width: 16, height: 16, borderRadius: 8, background:'#fff', border:`2px solid ${WF.ink}` }} />
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', fontSize: 10, color: WF.muted, marginTop: 4, fontFamily: WF.mono }}>
          <span>0.1 mi</span><span>10 mi</span>
        </div>
      </div>

      <SectionLabel>PRICE · $30 – $80</SectionLabel>
      <div style={{ padding:'0 16px' }}>
        <Bar h={4} color={WF.fill1} />
      </div>

      <SectionLabel>TRUST</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexDirection:'column', gap: 8 }}>
        {[
          ['✓ ID verified', true],
          ['Background check', true],
          ['Insured', false],
          ['Tools included', false],
        ].map(([l, on], i) => (
          <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'10px 0', borderBottom:`1px solid ${WF.line2}`, fontSize: 13 }}>
            <span>{l}</span>
            <div style={{
              width: 36, height: 20, borderRadius: 10, background: on ? WF.ink : WF.fill1,
              border:`1px solid ${on ? WF.ink : WF.line}`, position:'relative',
            }}>
              <div style={{
                position:'absolute', top: 1, left: on ? 17 : 1,
                width: 16, height: 16, borderRadius: 8, background:'#fff', transition:'left 0.15s',
              }} />
            </div>
          </div>
        ))}
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Show 42 helpers</Btn>
      </div>
    </Phone>
  );
}

Object.assign(window, { C_MapBrowse, C_List, C_HelperFull, C_Filter });


//===========

// Direction D — Hybrid Smart-Match
// Describe job → AI suggests top 3 helpers (with reasons) → tap to instant book
// OR open it up to all helpers for bids.

function D_Describe() {
  return (
    <Phone>
      <TopBar title="New request" left="✕" />
      <div style={{ padding:'16px 16px 8px' }}>
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono, marginBottom: 6 }}>JUST TELL US WHAT YOU NEED</div>
        <div style={{
          minHeight: 110, border:`1px solid ${WF.line}`, borderRadius: 12, padding: 12,
          fontSize: 14, lineHeight: 1.5,
        }}>
          “Need help assembling an <b>IKEA Pax wardrobe</b> in my bedroom tonight. Boxes already inside.”
          <span style={{ display:'inline-block', width: 2, height: 16, background: WF.ink, verticalAlign:'middle', marginLeft: 1, animation:'blink 1s steps(2) infinite' }} />
        </div>
        <style>{'@keyframes blink{50%{opacity:0}}'}</style>
        <div style={{ display:'flex', gap: 6, marginTop: 10 }}>
          <Pill>📎 Photo</Pill><Pill>🎤 Voice</Pill><Pill>📍 Location</Pill>
        </div>
      </div>

      <div style={{ padding:'4px 16px', display:'flex', alignItems:'center', gap: 8 }}>
        <div style={{ width: 22, height: 22, borderRadius: 11, background: WF.accentSoft, border:`1px solid ${WF.accent}`, color: WF.accent, fontSize: 11, fontWeight: 700, display:'flex', alignItems:'center', justifyContent:'center' }}>✦</div>
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>auto-detected: <span style={{ color: WF.ink }}>FURNITURE</span> · ~60 min · ≈ $45</div>
      </div>

      <SectionLabel>OPTIONAL</SectionLabel>
      <div style={{ padding:'0 16px', display:'flex', flexDirection:'column', gap: 8 }}>
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 12px', border:`1px solid ${WF.line}`, borderRadius: 10, fontSize: 12 }}>
          <span style={{ color: WF.muted }}>When</span><span>Today, after 6 PM ›</span>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', padding:'10px 12px', border:`1px solid ${WF.line}`, borderRadius: 10, fontSize: 12 }}>
          <span style={{ color: WF.muted }}>Budget cap</span><span>$80 ›</span>
        </div>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>✦ Find me 3 great helpers</Btn>
      </div>
    </Phone>
  );
}

function D_SmartPicks() {
  const picks = [
    { n:'Marcus T.', why:'IKEA Pax pro · 0.4 mi · free tonight', p:'$48', r:'4.9 · 312', best:true },
    { n:'Priya S.',  why:'Available now · slightly farther',      p:'$55', r:'4.8 · 188' },
    { n:'Jordan K.', why:'Cheapest option · 1.6 mi · 90 min wait', p:'$42', r:'4.7 · 94' },
  ];
  return (
    <Phone>
      <TopBar title="Your top 3 picks" left="‹" right="⋯" sub="✦ ranked by fit, distance, history" />
      <div style={{ padding:'10px 16px 0' }}>
        <div style={{ display:'flex', gap: 6 }}>
          <Pill>🛋 Furniture</Pill><Pill>0.4–1.6 mi</Pill><Pill>$42–55</Pill>
        </div>
      </div>

      <div style={{ padding:'12px 16px', display:'flex', flexDirection:'column', gap: 10, height:'calc(100% - 96px - 52px - 70px)', overflow:'hidden' }}>
        {picks.map((p, i) => (
          <div key={i} style={{
            border: `1.5px solid ${p.best ? WF.accent : WF.line}`, borderRadius: 14, padding: 12,
            background: p.best ? WF.accentSoft : WF.paper, position:'relative',
          }}>
            {p.best && (
              <div style={{
                position:'absolute', right: 10, top: -8, background: WF.accent, color:'#fff',
                fontSize: 9, fontWeight: 700, padding:'2px 8px', borderRadius: 4, fontFamily: WF.mono,
              }}>BEST FIT</div>
            )}
            <div style={{ display:'flex', gap: 10, alignItems:'center' }}>
              <Avatar size={44} label={p.n[0]} verified />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{p.n}</div>
                <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>★ {p.r}</div>
              </div>
              <div style={{ textAlign:'right' }}>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{p.p}</div>
                <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>fixed</div>
              </div>
            </div>
            <div style={{
              marginTop: 10, fontSize: 11.5, color: WF.ink2, lineHeight: 1.4,
              padding: 8, background: p.best ? '#fff' : WF.fill2, borderRadius: 8,
              display:'flex', gap: 6, alignItems:'flex-start',
            }}>
              <span style={{ color: WF.accent, fontWeight: 700 }}>✦</span>
              <span>{p.why}</span>
            </div>
          </div>
        ))}
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 52, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}` }}>
        <Btn primary>Book Marcus · $48</Btn>
        <div style={{ textAlign:'center', marginTop: 8, fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>
          or <u>open to all helpers (collect bids)</u>
        </div>
      </div>
      <BottomNav active={1} />
    </Phone>
  );
}

function D_Compare() {
  return (
    <Phone>
      <TopBar title="Compare picks" left="‹" right="⇅" />
      <div style={{ padding: 12, overflow:'hidden' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.1fr 1fr 1fr 1fr', gap: 6, fontSize: 11 }}>
          <div></div>
          <div style={{ textAlign:'center', fontWeight: 700, padding:'6px 0', background: WF.accentSoft, borderRadius: 6, color: WF.accent }}>Marcus</div>
          <div style={{ textAlign:'center', fontWeight: 700, padding:'6px 0' }}>Priya</div>
          <div style={{ textAlign:'center', fontWeight: 700, padding:'6px 0' }}>Jordan</div>

          {[
            ['Price', '$48', '$55', '$42'],
            ['Distance', '0.4 mi', '1.1 mi', '1.6 mi'],
            ['Rating', '★ 4.9', '★ 4.8', '★ 4.7'],
            ['Jobs done', '312', '188', '94'],
            ['Pax pro', '✓', '—', '—'],
            ['Tools', '✓', '✓', '✓'],
            ['Verified', '✓', '✓', '✓'],
            ['ETA', '45m', 'now', '90m'],
          ].map((r, i) => (
            <React.Fragment key={i}>
              <div style={{ color: WF.muted, padding:'8px 6px', borderTop:`1px solid ${WF.line2}` }}>{r[0]}</div>
              <div style={{ textAlign:'center', padding:'8px 0', borderTop:`1px solid ${WF.line2}`, background: WF.accentSoft, fontWeight: i === 0 ? 700 : 500 }}>{r[1]}</div>
              <div style={{ textAlign:'center', padding:'8px 0', borderTop:`1px solid ${WF.line2}` }}>{r[2]}</div>
              <div style={{ textAlign:'center', padding:'8px 0', borderTop:`1px solid ${WF.line2}` }}>{r[3]}</div>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}`, display:'flex', gap: 8 }}>
        <Btn ghost full={false} style={{ flex: 1 }}>Open to all</Btn>
        <Btn primary style={{ flex: 1.4 }}>Book Marcus</Btn>
      </div>
    </Phone>
  );
}

Object.assign(window, { D_Describe, D_SmartPicks, D_Compare });


//===========

// Helper-side flow + Web companion
// Shows the OTHER side of the marketplace (the verified helper) and a web dashboard.

function H_Online() {
  return (
    <Phone>
      <div style={{ position:'relative', height:'100%' }}>
        <MapWF h={'100%'} pins={3} you label="2 jobs near you" />
        <div style={{ position:'absolute', left: 12, right: 12, top: 12 }}>
          <div style={{
            background: WF.paper, borderRadius: 14, padding: 12,
            border:`1px solid ${WF.line}`, boxShadow:'0 2px 10px rgba(0,0,0,0.06)',
            display:'flex', alignItems:'center', gap: 10,
          }}>
            <Avatar size={36} label="M" verified />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 700 }}>You're online</div>
              <div style={{ fontSize: 11, color: WF.muted }}>Today · $186 · 3 jobs</div>
            </div>
            <div style={{
              width: 50, height: 28, borderRadius: 14, background: WF.accent, position:'relative',
            }}>
              <div style={{ position:'absolute', top: 2, right: 2, width: 24, height: 24, borderRadius: 12, background:'#fff' }} />
            </div>
          </div>
        </div>

        <Sheet>
          <div style={{ padding:'2px 16px 0' }}>
            <div style={{ fontSize: 11, fontFamily: WF.mono, color: WF.muted, marginBottom: 8 }}>INCOMING · 2 OPEN</div>

            {[
              { d:'0.3 mi', t:'IKEA Pax wardrobe', a:'Alex R.', p:'$48', urgent:true },
              { d:'1.2 mi', t:'65″ TV wall mount', a:'Sam K.', p:'$80' },
            ].map((j, i) => (
              <div key={i} style={{
                display:'flex', gap: 10, padding:'10px 0', borderTop: i ? `1px solid ${WF.line2}` : 'none', alignItems:'center',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 8,
                  background: j.urgent ? WF.accent : WF.fill1, color: j.urgent ? '#fff' : WF.ink,
                  display:'flex', alignItems:'center', justifyContent:'center', fontSize: 18,
                }}>{i === 0 ? '🛋' : '📺'}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{j.t}</div>
                  <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>{j.a} · {j.d} · ~60 min</div>
                </div>
                <div style={{ textAlign:'right' }}>
                  <div style={{ fontSize: 15, fontWeight: 700 }}>{j.p}</div>
                  <div style={{
                    marginTop: 4, padding:'4px 10px', borderRadius: 12,
                    background: WF.ink, color:'#fff', fontSize: 10.5, fontWeight: 600,
                  }}>Accept</div>
                </div>
              </div>
            ))}
          </div>
        </Sheet>

        <BottomNav active={0} helper />
      </div>
    </Phone>
  );
}

function H_JobDetail() {
  return (
    <Phone>
      <TopBar title="Job from Alex R." left="‹" sub="0.3 mi · auto-decline in 0:42" />
      <Hatch h={140} r={0} label="JOB PHOTO · Pax box pile" />
      <div style={{ padding:'14px 16px' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
          <div>
            <div style={{ fontWeight: 700, fontSize: 15 }}>IKEA Pax wardrobe</div>
            <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>2418 Linden Ave · Apt 4B</div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div style={{ fontSize: 20, fontWeight: 700 }}>$48</div>
            <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>≈ 60 min</div>
          </div>
        </div>

        <div style={{ marginTop: 14, padding: 12, background: WF.fill2, borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}>
          “3-door Pax, boxes already in bedroom. Tonight if possible. Apartment buzzer works.”
        </div>

        <SectionLabel>BREAKDOWN</SectionLabel>
        <div style={{ fontSize: 12 }}>
          {[['Your earnings', '$40.80'], ['Platform fee', '−$7.20']].map(([l, v], i) => (
            <div key={i} style={{ display:'flex', justifyContent:'space-between', padding:'6px 0', borderBottom:`1px dashed ${WF.line}` }}>
              <span style={{ color: WF.muted }}>{l}</span><span>{v}</span>
            </div>
          ))}
        </div>
      </div>

      <div style={{ position:'absolute', left: 0, right: 0, bottom: 0, padding: 14, background: WF.paper, borderTop:`1px solid ${WF.line2}`, display:'flex', gap: 8 }}>
        <Btn ghost full={false} style={{ flex: 1 }}>Decline</Btn>
        <Btn primary style={{ flex: 1.6 }}>Accept · drive 4 min</Btn>
      </div>
    </Phone>
  );
}

function H_Earnings() {
  return (
    <Phone>
      <TopBar title="Earnings" left="‹" right="⇩" />
      <div style={{ padding: 16 }}>
        <div style={{ fontSize: 11, color: WF.muted, fontFamily: WF.mono }}>THIS WEEK</div>
        <div style={{ fontSize: 32, fontWeight: 700, marginTop: 4 }}>$612.40</div>
        <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>14 jobs · 18.5 hrs · avg ★ 4.9</div>

        {/* bar chart */}
        <div style={{ marginTop: 18, display:'flex', alignItems:'flex-end', gap: 8, height: 90 }}>
          {[0.45, 0.6, 0.3, 0.8, 0.5, 0.95, 0.7].map((v, i) => (
            <div key={i} style={{ flex: 1, display:'flex', flexDirection:'column', alignItems:'center', gap: 4 }}>
              <div style={{
                width:'100%', height: `${v*100}%`, borderRadius: 4,
                background: i === 5 ? WF.accent : WF.fill1, border:`1px solid ${i === 5 ? WF.accent : WF.line}`,
              }}/>
              <div style={{ fontSize: 9, color: WF.muted, fontFamily: WF.mono }}>{['M','T','W','T','F','S','S'][i]}</div>
            </div>
          ))}
        </div>
      </div>

      <SectionLabel>RECENT JOBS</SectionLabel>
      <Row left={<div style={{ width: 36, height: 36, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🛋</div>} title="IKEA Pax wardrobe" sub="Alex R. · ★★★★★ · 58 min" right="+$40.80" />
      <Row left={<div style={{ width: 36, height: 36, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>📺</div>} title="TV wall-mount" sub="Sam K. · ★★★★★ · 41 min" right="+$68.00" />
      <Row left={<div style={{ width: 36, height: 36, borderRadius: 8, background: WF.fill1, display:'flex', alignItems:'center', justifyContent:'center' }}>🧺</div>} title="Washer hookup" sub="Priya hand-off · 30 min" right="+$22.00" />

      <BottomNav active={2} helper />
    </Phone>
  );
}

// ─────────── Web companion (helper desktop) ───────────
function Web_HelperDash() {
  return (
    <div style={{
      width: 880, height: 540, borderRadius: 10, overflow:'hidden',
      border:`1.5px solid ${WF.ink}`, background: WF.paper, fontFamily: WF.font, color: WF.ink,
      position:'relative',
    }}>
      {/* fake browser chrome */}
      <div style={{
        height: 28, background: WF.fill2, borderBottom:`1px solid ${WF.line}`,
        display:'flex', alignItems:'center', gap: 6, padding:'0 10px',
      }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background:'#ddd' }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background:'#ddd' }} />
        <span style={{ width: 10, height: 10, borderRadius: 5, background:'#ddd' }} />
        <div style={{ flex: 1, height: 18, background: WF.paper, borderRadius: 4, marginLeft: 10, fontSize: 10, color: WF.muted, display:'flex', alignItems:'center', padding:'0 8px', fontFamily: WF.mono }}>
          home-help.app/helper/dashboard
        </div>
      </div>

      <div style={{ display:'flex', height: 'calc(100% - 28px)' }}>
        {/* sidebar */}
        <div style={{ width: 180, borderRight:`1px solid ${WF.line2}`, padding: 14, background: WF.fill2 }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 14 }}>HomeHelp <span style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono, fontWeight: 400 }}>helper</span></div>
          {['Dashboard','Jobs queue','Schedule','Earnings','Reviews','Profile','Settings'].map((s, i) => (
            <div key={i} style={{
              padding:'6px 8px', borderRadius: 6, marginBottom: 2,
              background: i === 0 ? WF.ink : 'transparent', color: i === 0 ? '#fff' : WF.ink,
              fontSize: 12, fontWeight: i === 0 ? 600 : 400,
            }}>{s}</div>
          ))}
        </div>

        {/* main */}
        <div style={{ flex: 1, padding: 18, overflow:'hidden' }}>
          <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
            <div>
              <div style={{ fontSize: 18, fontWeight: 700 }}>Good evening, Marcus</div>
              <div style={{ fontSize: 11, color: WF.muted, marginTop: 2 }}>2 jobs near you right now</div>
            </div>
            <div style={{
              display:'flex', alignItems:'center', gap: 8, padding:'4px 10px',
              background: WF.accentSoft, color: WF.accent, borderRadius: 14, fontSize: 11, fontWeight: 600,
            }}>● Online</div>
          </div>

          {/* stat cards */}
          <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', gap: 10, marginTop: 14 }}>
            {[
              ['THIS WEEK', '$612.40', '14 jobs'],
              ['AVG RATING', '★ 4.9', '312 reviews'],
              ['ACCEPT RATE', '97%', 'last 30d'],
              ['RESPONSE', '< 2 min', 'avg'],
            ].map(([l, v, s], i) => (
              <div key={i} style={{ padding: 10, border:`1px solid ${WF.line}`, borderRadius: 8 }}>
                <div style={{ fontSize: 9, color: WF.muted, fontFamily: WF.mono, letterSpacing: 0.4 }}>{l}</div>
                <div style={{ fontSize: 18, fontWeight: 700, marginTop: 2 }}>{v}</div>
                <div style={{ fontSize: 10, color: WF.muted }}>{s}</div>
              </div>
            ))}
          </div>

          {/* incoming + map */}
          <div style={{ display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 12, marginTop: 14 }}>
            <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, overflow:'hidden' }}>
              <div style={{ padding:'10px 12px', borderBottom:`1px solid ${WF.line2}`, display:'flex', justifyContent:'space-between' }}>
                <div style={{ fontSize: 12, fontWeight: 700 }}>Incoming jobs</div>
                <div style={{ fontSize: 10, color: WF.muted, fontFamily: WF.mono }}>auto-refresh 5s</div>
              </div>
              {[
                ['🛋','IKEA Pax wardrobe','Alex R. · 0.3 mi · 60 min', '$48', true],
                ['📺','65″ TV wall mount','Sam K. · 1.2 mi · 45 min',  '$80', false],
                ['🧺','Dishwasher install','Maya G. · 1.8 mi · 90 min', '$95', false],
              ].map(([ic, t, s, p, urg], i) => (
                <div key={i} style={{ padding:'10px 12px', display:'flex', gap: 10, alignItems:'center', borderTop: i ? `1px solid ${WF.line2}`:'none' }}>
                  <div style={{ width: 30, height: 30, borderRadius: 6, background: urg ? WF.accent : WF.fill1, color: urg ? '#fff' : WF.ink, display:'flex', alignItems:'center', justifyContent:'center' }}>{ic}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{t}</div>
                    <div style={{ fontSize: 10, color: WF.muted }}>{s}</div>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: 700 }}>{p}</div>
                  <div style={{ padding:'4px 10px', borderRadius: 12, background: WF.ink, color:'#fff', fontSize: 10, fontWeight: 600 }}>Accept</div>
                </div>
              ))}
            </div>

            <div style={{ border:`1px solid ${WF.line}`, borderRadius: 10, overflow:'hidden' }}>
              <div style={{ padding:'10px 12px', borderBottom:`1px solid ${WF.line2}`, fontSize: 12, fontWeight: 700 }}>Your service area</div>
              <MapWF h={170} pins={3} you label="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { H_Online, H_JobDetail, H_Earnings, Web_HelperDash });