// 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 });