// My Work (active + history), Earnings + Withdraw, Profile, Onboarding

// ──────────────────────────────────────────────────────────────
// MY WORK
// ──────────────────────────────────────────────────────────────
const HISTORY = [
  { id: 48201, cat: 'Plumbing',   addr: 'HSR 27th Main',    pay: 720,  date: 'Today · 4:20 PM',   rating: 5 },
  { id: 48196, cat: 'Electrical', addr: 'Koramangala 5th',  pay: 540,  date: 'Today · 1:08 PM',   rating: 5 },
  { id: 48188, cat: 'Plumbing',   addr: 'Indiranagar 2nd',  pay: 880,  date: 'Yesterday · 7:42 PM', rating: 4 },
  { id: 48181, cat: 'Cleaning',   addr: 'Bellandur · ETV',  pay: 1450, date: 'Yesterday · 11:30', rating: 5 },
  { id: 48174, cat: 'Carpentry',  addr: 'BTM 1st Stage',    pay: 620,  date: '2 days ago',         rating: 5, dispute: false },
];

const MyWork = ({ nav }) => {
  const [tab, setTab] = React.useState('active');
  return (
    <div style={{ padding: '0 18px 120px' }}>
      <div style={{ marginBottom: 14 }}>
        <div style={{ fontSize: 11, color: Z.text3, fontWeight: 500, marginBottom: 2 }}>Your jobs</div>
        <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.6 }}>My work</div>
      </div>

      <div style={{
        display: 'flex', gap: 4, padding: 4, background: 'rgba(20,8,40,0.6)',
        borderRadius: 12, marginBottom: 18, border: `0.5px solid ${Z.border}`,
      }}>
        {['active', 'history'].map(m => (
          <div key={m} onClick={() => setTab(m)} style={{
            flex: 1, padding: '8px 0', borderRadius: 9, textAlign: 'center',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
            background: tab === m ? Z.raised2 : 'transparent',
            color: tab === m ? Z.text : Z.text3, transition: 'all .2s',
          }}>{m === 'active' ? 'Active (1)' : 'History (47)'}</div>
        ))}
      </div>

      {tab === 'active' ? (
        <div onClick={() => nav.go('active', { job: JOB_FEED[0], stage: 'working' })} style={{
          padding: 16, borderRadius: 18, cursor: 'pointer',
          background: 'linear-gradient(160deg, rgba(124,58,237,0.16), rgba(236,72,153,0.05))',
          border: `1px solid ${Z.brand}`, marginBottom: 12, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              <Pill tone="brand">⚡ Live work</Pill>
              <Pill tone="neutral">Plumbing</Pill>
            </div>
            <div style={{ ...mono, fontSize: 10, color: Z.text4 }}>#J-48217</div>
          </div>
          <div style={{ fontSize: 13.5, color: Z.text2, marginBottom: 12, lineHeight: 1.5 }}>Kitchen sink leak — Priya M., HSR Layout</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
            <div style={{ ...mono, fontSize: 28, fontWeight: 600, color: Z.text, letterSpacing: -0.6, lineHeight: 1 }}>12:48</div>
            <div style={{ fontSize: 11, color: Z.text3 }}>elapsed · ₹12/min</div>
            <div style={{ marginLeft: 'auto' }}>
              <div style={{ ...mono, fontSize: 18, fontWeight: 600 }}><GradientText>₹154</GradientText></div>
            </div>
          </div>
          <div style={{ height: 6, borderRadius: 999, background: 'rgba(0,0,0,0.3)', overflow: 'hidden', marginBottom: 12 }}>
            <div style={{ width: '15%', height: '100%', background: Z.gradient, boxShadow: `0 0 8px ${Z.brand}` }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 11, color: Z.text3 }}>15% of ₹980 cap</span>
            <span style={{ fontSize: 11, color: Z.brandLite, fontWeight: 600 }}>Open →</span>
          </div>
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {HISTORY.map(h => (
            <div key={h.id} style={{
              padding: 14, borderRadius: 14, background: 'rgba(20,8,40,0.55)',
              border: `0.5px solid ${Z.border}`,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                <div>
                  <div style={{ display: 'flex', gap: 6, marginBottom: 4 }}>
                    <Pill tone="success">✓ Completed</Pill>
                    <Pill tone="neutral">{h.cat}</Pill>
                  </div>
                  <div style={{ fontSize: 12, color: Z.text2, marginTop: 4 }}>{h.addr}</div>
                  <div style={{ fontSize: 10.5, color: Z.text4, marginTop: 2 }}>{h.date} · #J-{h.id}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ ...mono, fontSize: 18, fontWeight: 600, color: Z.text, letterSpacing: -0.4 }}>{fmtINR(h.pay)}</div>
                  <div style={{ fontSize: 10, color: Z.gold, marginTop: 2 }}>{'★'.repeat(h.rating)}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// EARNINGS
// ──────────────────────────────────────────────────────────────
const Earnings = ({ nav }) => {
  const [range, setRange] = React.useState('Week');
  const bars = [62, 88, 45, 95, 78, 100, 56];
  const days = ['M','T','W','T','F','S','S'];
  return (
    <div style={{ padding: '0 18px 120px' }}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 11, color: Z.text3, fontWeight: 500, marginBottom: 2 }}>Wallet</div>
        <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.6 }}>Earnings</div>
      </div>

      {/* Hero wallet card */}
      <div style={{
        position: 'relative', overflow: 'hidden', borderRadius: 22,
        padding: 22, marginBottom: 16,
        background: 'linear-gradient(160deg, rgba(124,58,237,0.32), rgba(236,72,153,0.18))',
        border: `1px solid ${Z.brand}`,
        boxShadow: `0 12px 40px ${Z.brand}33`,
      }}>
        <div style={{
          position: 'absolute', inset: 0, opacity: 0.12,
          backgroundImage: `radial-gradient(circle at 90% 10%, ${Z.cyan}, transparent 40%)`,
        }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.8, color: Z.brandLite, textTransform: 'uppercase', marginBottom: 8 }}>Available balance</div>
          <div style={{ ...mono, fontSize: 44, fontWeight: 700, color: Z.text, letterSpacing: -1.5, lineHeight: 1, marginBottom: 4 }}>₹18,420</div>
          <div style={{ fontSize: 11, color: Z.text3 }}>+ ₹2,840 today · Next payout: <span style={{ color: Z.text2 }}>Instant</span></div>
          <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
            <button onClick={() => nav.go('withdraw')} style={{ ...btnPrimaryStyle, flex: 1, background: Z.text, color: Z.bg, boxShadow: 'none' }}>
              Withdraw
            </button>
            <button style={{ ...btnGhostStyle, flex: 1, background: 'rgba(0,0,0,0.3)' }}>Auto-pay</button>
          </div>
        </div>
      </div>

      {/* Range */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {['Day', 'Week', 'Month', 'Year'].map(r => (
          <div key={r} onClick={() => setRange(r)} style={{
            flex: 1, padding: '8px 0', borderRadius: 10, textAlign: 'center',
            fontSize: 12, fontWeight: 600, cursor: 'pointer',
            background: range === r ? 'rgba(124,58,237,0.16)' : 'rgba(20,8,40,0.5)',
            color: range === r ? Z.brandLite : Z.text3,
            border: `0.5px solid ${range === r ? 'rgba(124,58,237,0.4)' : Z.border}`,
          }}>{r}</div>
        ))}
      </div>

      {/* Chart */}
      <div style={{
        padding: 16, borderRadius: 18, background: 'rgba(20,8,40,0.55)',
        border: `0.5px solid ${Z.border}`, marginBottom: 16,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 16 }}>
          <div>
            <div style={{ fontSize: 10, color: Z.text3, marginBottom: 4 }}>This week</div>
            <div style={{ ...mono, fontSize: 24, fontWeight: 600, color: Z.text }}>₹14,280</div>
            <div style={{ fontSize: 11, color: Z.success, marginTop: 2, fontWeight: 600 }}>↑ 22% vs last week</div>
          </div>
          <div style={{ fontSize: 10, color: Z.text3 }}>17 jobs · Avg ₹840</div>
        </div>
        <div style={{ display: 'flex', gap: 6, height: 110, alignItems: 'flex-end' }}>
          {bars.map((h, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{
                width: '100%', height: `${h}%`, borderRadius: 6,
                background: i === 5 ? Z.gradient : 'rgba(124,58,237,0.35)',
                boxShadow: i === 5 ? `0 0 14px ${Z.brand}88` : 'none',
                transition: 'all .3s',
              }} />
              <div style={{ fontSize: 9.5, color: i === 5 ? Z.brandLite : Z.text4, fontWeight: 600 }}>{days[i]}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Breakdown */}
      <SectionH>Breakdown</SectionH>
      <div style={{ padding: 14, borderRadius: 14, background: 'rgba(20,8,40,0.55)', border: `0.5px solid ${Z.border}`, marginBottom: 14 }}>
        {[
          ['Job earnings', '₹13,820', Z.text],
          ['Tips received', '₹460', Z.gold],
          ['Surge bonus', '₹0', Z.text3],
          ['Platform fee', '−₹0', Z.success],
        ].map(([l,v,c], i) => (
          <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 0', fontSize: 13, color: Z.text2, borderBottom: i < 3 ? `0.5px solid ${Z.border}` : 'none' }}>
            <span>{l}</span><span style={{ ...mono, color: c, fontWeight: 600 }}>{v}</span>
          </div>
        ))}
      </div>

      {/* Recent transactions */}
      <SectionH>Recent</SectionH>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[
          { l: 'Plumbing · J-48201', t: '4:20 PM', v: '+₹720', kind: 'in' },
          { l: 'Withdraw to HDFC ****4521', t: '11:30 AM', v: '−₹5,000', kind: 'out' },
          { l: 'Electrical · J-48196', t: '1:08 PM', v: '+₹540', kind: 'in' },
          { l: 'Tip from Priya M.', t: 'Yesterday', v: '+₹100', kind: 'tip' },
        ].map((t, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: 12,
            borderRadius: 12, background: 'rgba(20,8,40,0.4)', border: `0.5px solid ${Z.border}`,
          }}>
            <div style={{
              width: 32, height: 32, borderRadius: 10,
              background: t.kind === 'out' ? 'rgba(239,68,68,0.15)' : t.kind === 'tip' ? 'rgba(245,158,11,0.15)' : 'rgba(16,185,129,0.15)',
              color: t.kind === 'out' ? Z.danger : t.kind === 'tip' ? Z.gold : Z.success,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700,
            }}>{t.kind === 'out' ? '↑' : t.kind === 'tip' ? '★' : '↓'}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12.5, color: Z.text, fontWeight: 500 }}>{t.l}</div>
              <div style={{ fontSize: 10, color: Z.text4 }}>{t.t}</div>
            </div>
            <div style={{ ...mono, fontSize: 14, fontWeight: 600, color: t.kind === 'out' ? Z.danger : Z.text }}>{t.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// WITHDRAW (modal-style page)
// ──────────────────────────────────────────────────────────────
const Withdraw = ({ nav }) => {
  const [amt, setAmt] = React.useState('5000');
  const [method, setMethod] = React.useState('upi');
  const [sending, setSending] = React.useState(false);
  const [done, setDone] = React.useState(false);

  const submit = () => {
    setSending(true);
    setTimeout(() => { setSending(false); setDone(true); }, 1600);
  };

  if (done) return (
    <div style={{ padding: '60px 24px', textAlign: 'center' }}>
      <div style={{
        width: 80, height: 80, borderRadius: 24, margin: '0 auto 20px',
        background: 'rgba(16,185,129,0.16)', border: `1px solid rgba(16,185,129,0.4)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: Z.success,
        boxShadow: `0 0 40px rgba(16,185,129,0.4)`,
      }}><I.check size={40} stroke={3}/></div>
      <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: 2, color: Z.success, textTransform: 'uppercase', marginBottom: 8 }}>Instant transfer</div>
      <div style={{ ...mono, fontSize: 36, fontWeight: 700, color: Z.text, letterSpacing: -1, marginBottom: 6 }}>₹{Number(amt).toLocaleString('en-IN')}</div>
      <div style={{ fontSize: 12, color: Z.text3, marginBottom: 24 }}>Sent to HDFC ****4521 · TXN-9242</div>
      <button onClick={() => nav.go('earnings')} style={btnPrimaryStyle}>Back to earnings</button>
    </div>
  );

  return (
    <div style={{ padding: '0 18px 120px' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
        <div onClick={() => nav.back()} style={{
          width: 36, height: 36, borderRadius: '50%', background: 'rgba(20,8,40,0.7)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: Z.text, cursor: 'pointer', border: `0.5px solid ${Z.border}`,
        }}><I.chevL size={20}/></div>
        <div style={{ fontSize: 18, fontWeight: 700, color: Z.text }}>Withdraw</div>
      </div>

      <div style={{ fontSize: 11, color: Z.text3, marginBottom: 8 }}>Available</div>
      <div style={{ ...mono, fontSize: 14, fontWeight: 600, color: Z.text2, marginBottom: 20 }}>₹18,420</div>

      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.4, color: Z.text3, textTransform: 'uppercase', marginBottom: 10 }}>Amount</div>
      <div style={{
        padding: '18px 16px', borderRadius: 16, marginBottom: 12,
        background: 'rgba(20,8,40,0.6)', border: `1px solid ${Z.borderStrong}`,
        display: 'flex', alignItems: 'baseline', gap: 8,
      }}>
        <span style={{ ...mono, fontSize: 28, color: Z.text3 }}>₹</span>
        <input value={amt} onChange={e => setAmt(e.target.value.replace(/[^0-9]/g,''))}
          style={{
            flex: 1, background: 'transparent', border: 'none', outline: 'none',
            color: Z.text, fontFamily: Z.mono, fontSize: 36, fontWeight: 600, letterSpacing: -1,
            padding: 0,
          }} />
      </div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 24 }}>
        {[500, 1000, 5000, 18420].map(a => (
          <div key={a} onClick={() => setAmt(String(a))} style={{
            flex: 1, padding: '8px 0', textAlign: 'center', borderRadius: 999,
            background: Number(amt) === a ? 'rgba(124,58,237,0.18)' : 'rgba(20,8,40,0.5)',
            color: Number(amt) === a ? Z.brandLite : Z.text3,
            border: `0.5px solid ${Number(amt) === a ? 'rgba(124,58,237,0.4)' : Z.border}`,
            fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: Z.mono,
          }}>{a === 18420 ? 'All' : `₹${a >= 1000 ? a/1000+'k' : a}`}</div>
        ))}
      </div>

      <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.4, color: Z.text3, textTransform: 'uppercase', marginBottom: 10 }}>Method</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 22 }}>
        {[
          { id: 'upi', icon: '⚡', l: 'Instant UPI', s: 'arjun@oksbi · Free · <60s', fee: 'Free' },
          { id: 'bank', icon: '🏦', l: 'HDFC Bank', s: '****4521 · 2–4 hours', fee: 'Free' },
          { id: 'card', icon: '💳', l: 'Add new method', s: 'UPI, bank or card', fee: null },
        ].map(m => (
          <div key={m.id} onClick={() => setMethod(m.id)} style={{
            padding: 14, borderRadius: 14, cursor: 'pointer',
            background: method === m.id ? 'rgba(124,58,237,0.12)' : 'rgba(20,8,40,0.45)',
            border: `1px solid ${method === m.id ? Z.brand : Z.border}`,
            display: 'flex', alignItems: 'center', gap: 12,
            transition: 'all .15s',
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 11, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>{m.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, color: Z.text, fontWeight: 600 }}>{m.l}</div>
              <div style={{ fontSize: 11, color: Z.text3, marginTop: 2 }}>{m.s}</div>
            </div>
            {m.fee && <Pill tone="success">{m.fee}</Pill>}
            <div style={{
              width: 20, height: 20, borderRadius: '50%',
              border: `2px solid ${method === m.id ? Z.brand : Z.border}`,
              background: method === m.id ? Z.brand : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{method === m.id && <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#fff' }}/>}</div>
          </div>
        ))}
      </div>

      <button onClick={submit} disabled={sending} style={{ ...btnPrimaryStyle, width: '100%' }}>
        {sending ? <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <span style={{ width: 14, height: 14, border: `2px solid rgba(255,255,255,0.3)`, borderTopColor: '#fff', borderRadius: '50%', animation: 'spin .8s linear infinite' }}/>
          Processing…
        </span> : `Withdraw ₹${Number(amt).toLocaleString('en-IN')}`}
      </button>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 14, fontSize: 11, color: Z.text4 }}>
        <I.shield size={12} color={Z.text4}/> Settled via RBI-licensed escrow partner
      </div>
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// PROFILE
// ──────────────────────────────────────────────────────────────
const Profile = ({ nav }) => {
  return (
    <div style={{ padding: '0 18px 120px' }}>
      <div style={{ marginBottom: 18 }}>
        <div style={{ fontSize: 11, color: Z.text3, fontWeight: 500, marginBottom: 2 }}>You</div>
        <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.6 }}>Profile</div>
      </div>

      {/* hero card */}
      <div style={{
        padding: 20, borderRadius: 22, marginBottom: 16, position: 'relative', overflow: 'hidden',
        background: 'linear-gradient(160deg, rgba(124,58,237,0.22), rgba(6,182,212,0.1))',
        border: `1px solid ${Z.borderStrong}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
          <div style={{
            width: 64, height: 64, borderRadius: 20,
            background: `linear-gradient(135deg, ${Z.brand}, ${Z.pink})`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontWeight: 700, color: '#fff', fontSize: 24, letterSpacing: -0.5,
            boxShadow: `0 6px 24px ${Z.brand}55`,
          }}>AK</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 18, fontWeight: 700, color: Z.text, letterSpacing: -0.3 }}>Arjun Kumar</div>
            <div style={{ fontSize: 12, color: Z.text3, marginTop: 2 }}>Plumbing · Electrical · 3+ yrs</div>
            <div style={{ display: 'flex', gap: 4, marginTop: 6 }}>
              <Pill tone="success"><I.shield size={10}/> Aadhaar OK</Pill>
              <Pill tone="brand">★ Top 8%</Pill>
            </div>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: Z.border, borderRadius: 12, overflow: 'hidden' }}>
          {[
            ['4.92','Rating'], ['247','Jobs'], ['98%','Acceptance']
          ].map(([v,l]) => (
            <div key={l} style={{ padding: 12, textAlign: 'center', background: 'rgba(10,1,24,0.5)' }}>
              <div style={{ ...mono, fontSize: 18, fontWeight: 600, color: Z.text }}>{v}</div>
              <div style={{ fontSize: 9.5, color: Z.text3, marginTop: 2, letterSpacing: 0.4 }}>{l}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Trust score */}
      <div style={{
        padding: 16, borderRadius: 16, marginBottom: 16,
        background: 'rgba(20,8,40,0.55)', border: `0.5px solid ${Z.border}`,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.4, color: Z.text3, textTransform: 'uppercase', marginBottom: 4 }}>Trust score</div>
            <div style={{ ...mono, fontSize: 28, fontWeight: 600 }}><GradientText>94/100</GradientText></div>
          </div>
          <div style={{
            width: 64, height: 64, position: 'relative',
          }}>
            <svg viewBox="0 0 64 64" style={{ position: 'absolute', inset: 0 }}>
              <circle cx="32" cy="32" r="26" stroke={Z.border} strokeWidth="6" fill="none"/>
              <circle cx="32" cy="32" r="26" stroke="url(#trustG)" strokeWidth="6" fill="none"
                strokeDasharray={`${94 * 163 / 100} 163`} strokeLinecap="round"
                transform="rotate(-90 32 32)"/>
              <defs>
                <linearGradient id="trustG" x1="0" y1="0" x2="1" y2="1">
                  <stop offset="0%" stopColor={Z.brand}/>
                  <stop offset="100%" stopColor={Z.pink}/>
                </linearGradient>
              </defs>
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', ...mono, fontSize: 14, fontWeight: 600, color: Z.text }}>94</div>
          </div>
        </div>
        <div style={{ fontSize: 11.5, color: Z.text3, lineHeight: 1.5 }}>
          High trust unlocks bigger jobs, faster payouts and lower platform fees.
        </div>
      </div>

      {/* Verified items */}
      <SectionH action="Edit">Verification</SectionH>
      <div style={{ padding: 4, borderRadius: 14, background: 'rgba(20,8,40,0.55)', border: `0.5px solid ${Z.border}`, marginBottom: 16 }}>
        {[
          ['Aadhaar', '****-****-2418', true],
          ['PAN', 'BPK****X', true],
          ['Background check', 'Cleared · 12 May', true],
          ['Skill cert (Plumbing)', 'L2 · ITI verified', true],
          ['Bank account', 'HDFC ****4521', true],
          ['References', '0 / 2 added', false],
        ].map(([l, s, ok], i, arr) => (
          <div key={l} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: 12,
            borderBottom: i < arr.length - 1 ? `0.5px solid ${Z.border}` : 'none',
          }}>
            <div style={{
              width: 26, height: 26, borderRadius: 8,
              background: ok ? 'rgba(16,185,129,0.16)' : 'rgba(245,158,11,0.16)',
              color: ok ? Z.success : Z.gold,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>{ok ? <I.check size={14} stroke={3}/> : '!'}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, color: Z.text, fontWeight: 500 }}>{l}</div>
              <div style={{ fontSize: 10.5, color: Z.text3, marginTop: 1, ...mono }}>{s}</div>
            </div>
            {!ok && <span style={{ fontSize: 11, color: Z.brandLite, fontWeight: 600 }}>Add</span>}
          </div>
        ))}
      </div>

      {/* Settings list */}
      <SectionH>Settings</SectionH>
      <div style={{ padding: 4, borderRadius: 14, background: 'rgba(20,8,40,0.55)', border: `0.5px solid ${Z.border}`, marginBottom: 16 }}>
        {[
          ['Service zones', '3 areas', '🗺️'],
          ['Working hours', 'Mon–Sat · 8am–9pm', '⏰'],
          ['Notifications', 'Push + SMS', '🔔'],
          ['Payment methods', '2 added', '💳'],
          ['Language', 'English', '🌐'],
          ['Help & support', 'Chat available 24/7', '💬'],
        ].map(([l,s,ic], i, arr) => (
          <div key={l} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: 12,
            borderBottom: i < arr.length - 1 ? `0.5px solid ${Z.border}` : 'none',
            cursor: 'pointer',
          }}>
            <div style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(0,0,0,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>{ic}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, color: Z.text, fontWeight: 500 }}>{l}</div>
              <div style={{ fontSize: 10.5, color: Z.text3, marginTop: 1 }}>{s}</div>
            </div>
            <I.chevR size={16} color={Z.text3}/>
          </div>
        ))}
      </div>

      <div onClick={() => nav.go('onboarding')} style={{
        textAlign: 'center', padding: 12, fontSize: 12, color: Z.brandLite, fontWeight: 600, cursor: 'pointer',
      }}>Replay onboarding</div>

      <div style={{ textAlign: 'center', fontSize: 10, color: Z.text4, marginTop: 8 }}>
        ZARVA Worker · v2.4.1
      </div>
    </div>
  );
};

// ──────────────────────────────────────────────────────────────
// ONBOARDING (cinematic AI splash → 4 steps)
// ──────────────────────────────────────────────────────────────
const ONBOARD_STEPS = [
  {
    badge: 'Step 01',
    title: 'A new\nkind of work.',
    body: 'ZARVA is built for skilled hands. Verified jobs, fair pricing, instant payouts — designed for the worker, not the platform.',
    visual: 'orbit',
  },
  {
    badge: 'Step 02',
    title: 'Server-billed.\nNot guessed.',
    body: 'A central clock runs every job. No back-and-forth, no haggling. The customer sees the same timer you do.',
    visual: 'timer',
  },
  {
    badge: 'Step 03',
    title: 'Two OTPs.\nZero disputes.',
    body: 'Customers verify start and completion with a 4-digit code. Once verified, payout releases to your wallet — instantly.',
    visual: 'otp',
  },
  {
    badge: 'Step 04',
    title: 'Built on trust.',
    body: 'Aadhaar, PAN, skill certs, background. Verified once — unlocks every job. Higher trust, bigger work.',
    visual: 'shield',
  },
];

const OnbVisual = ({ kind }) => {
  if (kind === 'orbit') return (
    <div style={{ position: 'relative', width: 220, height: 220 }}>
      {[80, 120, 160].map((s, i) => (
        <div key={s} style={{
          position: 'absolute', inset: '50%', width: s, height: s,
          marginLeft: -s/2, marginTop: -s/2, borderRadius: '50%',
          border: `1px solid ${Z.brand}`, opacity: 0.3 - i * 0.06,
          animation: `spin ${20 + i * 8}s linear infinite ${i % 2 ? 'reverse' : ''}`,
        }}>
          <div style={{
            position: 'absolute', top: -4, left: '50%', marginLeft: -4,
            width: 8, height: 8, borderRadius: '50%', background: i === 0 ? Z.pink : i === 1 ? Z.cyan : Z.gold,
            boxShadow: `0 0 12px currentColor`,
            color: i === 0 ? Z.pink : i === 1 ? Z.cyan : Z.gold,
          }}/>
        </div>
      ))}
      <div style={{
        position: 'absolute', inset: '50%', width: 50, height: 50, marginLeft: -25, marginTop: -25,
        borderRadius: '50%', background: Z.gradient,
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff',
        fontSize: 20, fontWeight: 700, boxShadow: `0 0 40px ${Z.brand}`,
      }}>Z</div>
    </div>
  );
  if (kind === 'timer') return (
    <div style={{ position: 'relative', width: 220, height: 220, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <svg viewBox="0 0 200 200" style={{ width: 200, height: 200 }}>
        <circle cx="100" cy="100" r="84" stroke={Z.border} strokeWidth="3" fill="none"/>
        <circle cx="100" cy="100" r="84" stroke="url(#tg)" strokeWidth="3" fill="none"
          strokeDasharray="528" strokeDashoffset="160" strokeLinecap="round"
          transform="rotate(-90 100 100)" style={{ filter: `drop-shadow(0 0 8px ${Z.brand})` }}/>
        <defs>
          <linearGradient id="tg"><stop offset="0%" stopColor={Z.brand}/><stop offset="100%" stopColor={Z.pink}/></linearGradient>
        </defs>
      </svg>
      <div style={{ position: 'absolute', textAlign: 'center' }}>
        <div style={{ ...mono, fontSize: 36, fontWeight: 600, color: Z.text, letterSpacing: -1 }}>12:48</div>
        <div style={{ fontSize: 10, color: Z.brandLite, marginTop: 2, letterSpacing: 1.4, fontWeight: 700 }}>LIVE</div>
      </div>
    </div>
  );
  if (kind === 'otp') return (
    <div style={{ display: 'flex', gap: 10 }}>
      {['4','7','2','9'].map((d, i) => (
        <div key={i} style={{
          width: 44, height: 60, borderRadius: 12,
          background: 'rgba(124,58,237,0.18)',
          border: `1.5px solid ${Z.brand}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          ...mono, fontSize: 28, fontWeight: 600, color: Z.text,
          boxShadow: `0 0 18px ${Z.brand}66`,
          animation: `pop .5s ${i * 0.1}s backwards`,
        }}>{d}</div>
      ))}
    </div>
  );
  return (
    <div style={{
      position: 'relative', width: 200, height: 200,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div style={{
        position: 'absolute', inset: 20, borderRadius: '50%',
        background: `radial-gradient(circle, ${Z.brand}33, transparent)`,
        animation: 'pulse 2s ease-out infinite',
      }}/>
      <svg width="120" height="140" viewBox="0 0 120 140" style={{ filter: `drop-shadow(0 0 24px ${Z.brand})` }}>
        <path d="M60 5 L110 25 V70 C110 100 60 130 60 130 S10 100 10 70 V25 L60 5 Z"
          fill="url(#sg)" stroke={Z.brand} strokeWidth="1.5"/>
        <path d="M40 70 L55 85 L82 55" stroke="#fff" strokeWidth="3.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        <defs><linearGradient id="sg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={`${Z.brand}44`}/><stop offset="100%" stopColor={`${Z.pink}22`}/></linearGradient></defs>
      </svg>
    </div>
  );
};

const Onboarding = ({ nav }) => {
  const [step, setStep] = React.useState(-1); // -1 = splash
  const [splashOut, setSplashOut] = React.useState(false);

  React.useEffect(() => {
    if (step === -1) {
      const t1 = setTimeout(() => setSplashOut(true), 1900);
      const t2 = setTimeout(() => setStep(0), 2400);
      return () => { clearTimeout(t1); clearTimeout(t2); };
    }
  }, [step]);

  const s = ONBOARD_STEPS[step] || ONBOARD_STEPS[0];

  // Splash
  if (step === -1) return (
    <div style={{
      position: 'absolute', inset: 0, background: Z.bg,
      display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
      opacity: splashOut ? 0 : 1, transition: 'opacity .4s', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at center, rgba(124,58,237,0.4), transparent 60%)`,
      }}/>
      {/* scan grid */}
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.25,
        backgroundImage: `linear-gradient(${Z.brandLite} 1px, transparent 1px), linear-gradient(90deg, ${Z.brandLite} 1px, transparent 1px)`,
        backgroundSize: '40px 40px',
        maskImage: 'radial-gradient(circle, black, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(circle, black, transparent 70%)',
      }}/>
      <div style={{
        position: 'relative', width: 100, height: 100, borderRadius: 28,
        background: Z.gradient, display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontSize: 48, fontWeight: 800, letterSpacing: -2,
        boxShadow: `0 0 80px ${Z.brand}, 0 24px 60px rgba(0,0,0,0.6)`,
        animation: 'splashPop 1.2s',
      }}>Z</div>
      <div style={{ ...mono, fontSize: 11, fontWeight: 700, letterSpacing: 4, color: Z.brandLite, marginTop: 24, textTransform: 'uppercase' }}>
        ZARVA · For workers
      </div>
      <div style={{ position: 'absolute', bottom: 80, fontSize: 10, color: Z.text4, letterSpacing: 1 }}>
        <Loader variant="dots" size={40}/>
      </div>
    </div>
  );

  return (
    <div style={{ padding: '20px 24px 120px', position: 'relative', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* progress */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 40 }}>
        {ONBOARD_STEPS.map((_, i) => (
          <div key={i} style={{
            flex: 1, height: 3, borderRadius: 999,
            background: i <= step ? Z.gradient : 'rgba(255,255,255,0.08)',
            transition: 'all .3s',
          }}/>
        ))}
      </div>

      {/* skip */}
      {step < ONBOARD_STEPS.length - 1 && (
        <div onClick={() => nav.go('home')} style={{
          position: 'absolute', top: 16, right: 18, fontSize: 12, color: Z.text3, fontWeight: 600, cursor: 'pointer',
        }}>Skip</div>
      )}

      {/* visual */}
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 260,
        marginBottom: 30,
      }} key={step}>
        <div style={{ animation: 'visIn .5s' }}>
          <OnbVisual kind={s.visual} />
        </div>
      </div>

      {/* copy */}
      <div style={{ animation: 'fadeUp .5s .15s backwards' }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2, color: Z.brandLite, textTransform: 'uppercase', marginBottom: 12 }}>{s.badge}</div>
        <div style={{ fontSize: 32, fontWeight: 700, color: Z.text, letterSpacing: -0.8, lineHeight: 1.1, marginBottom: 14, whiteSpace: 'pre-line' }}>{s.title}</div>
        <div style={{ fontSize: 14, color: Z.text3, lineHeight: 1.55, marginBottom: 28 }}>{s.body}</div>
      </div>

      <button onClick={() => {
        if (step < ONBOARD_STEPS.length - 1) setStep(step + 1);
        else nav.go('home');
      }} style={{ ...btnPrimaryStyle, width: '100%' }}>
        {step < ONBOARD_STEPS.length - 1 ? 'Continue' : 'Start earning →'}
      </button>
    </div>
  );
};

Object.assign(window, { MyWork, Earnings, Withdraw, Profile, Onboarding, HISTORY });