// Home screen + Active Job + Available Jobs + Job Detail
// ─────────────────────────────────────────────────────────────

const fmtINR = (n) => '₹' + Math.round(n).toLocaleString('en-IN');
const mono = { fontFamily: Z.mono, fontVariantNumeric: 'tabular-nums' };

// ──── HOME ────────────────────────────────────────────────────
const HomeScreen = ({ online, setOnline, nav, reimagined }) => {
  const pulseRef = React.useRef(null);

  return (
    <div style={{ padding: '0 18px 120px', position: 'relative' }}>
      {/* Ambient backdrop */}
      <div style={{
        position: 'absolute', top: -80, left: -40, right: -40, height: 360,
        background: reimagined
          ? 'radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.35), transparent 65%)'
          : 'radial-gradient(ellipse at 50% 0%, rgba(124,58,237,0.18), transparent 70%)',
        pointerEvents: 'none', zIndex: 0,
      }} />

      <div style={{ position: 'relative', zIndex: 1 }}>
        {/* Greeting */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
          <div>
            <div style={{ fontSize: 12, color: Z.text3, fontWeight: 500, marginBottom: 2 }}>Good evening</div>
            <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.6 }}>Arjun K.</div>
          </div>
          <div style={{ position: 'relative' }}>
            <div style={{
              width: 46, height: 46, borderRadius: '50%',
              background: `linear-gradient(135deg, ${Z.brand}, ${Z.pink})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, color: '#fff', fontSize: 17, letterSpacing: -0.3,
              boxShadow: `0 0 0 2px ${Z.bg}, 0 0 0 3.5px ${Z.brand}`,
            }}>AK</div>
            <div style={{
              position: 'absolute', bottom: -2, right: -2, width: 16, height: 16,
              borderRadius: '50%', background: Z.success, border: `2px solid ${Z.bg}`,
            }} />
          </div>
        </div>

        {/* Location pill */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 12px', background: 'rgba(26,11,59,0.6)',
          border: `0.5px solid ${Z.border}`, borderRadius: 999,
          width: 'fit-content', marginBottom: 18,
        }}>
          <div style={{
            width: 6, height: 6, borderRadius: '50%',
            background: online ? Z.success : Z.text4,
            boxShadow: online ? `0 0 8px ${Z.success}` : 'none',
          }} />
          <span style={{ fontSize: 12, color: Z.text2, fontWeight: 500 }}>Indiranagar, Bengaluru</span>
          <span style={{ fontSize: 11, color: Z.brandLite, fontWeight: 600 }}>Change</span>
        </div>

        {/* ── ONLINE / OFFLINE HERO (radar moment) ──────────────── */}
        <div style={{ position: 'relative', marginBottom: 18 }}>
          {/* radar rings (visible when online) */}
          {online && (
            <div ref={pulseRef} style={{
              position: 'absolute', inset: -20, pointerEvents: 'none',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {[0, 1, 2].map(i => (
                <div key={i} style={{
                  position: 'absolute', width: 260, height: 260, borderRadius: '50%',
                  border: `1.5px solid ${Z.brand}`,
                  animation: `radarExpand 3s ${i * 1}s infinite cubic-bezier(.16,.84,.44,1)`,
                  opacity: 0,
                }} />
              ))}
            </div>
          )}

          <div onClick={() => setOnline(!online)} style={{
            position: 'relative', cursor: 'pointer',
            padding: 22, borderRadius: 24, overflow: 'hidden',
            background: online
              ? 'linear-gradient(160deg, rgba(124,58,237,0.22), rgba(236,72,153,0.12))'
              : 'rgba(20,8,40,0.6)',
            border: `1px solid ${online ? Z.brand : Z.border}`,
            boxShadow: online ? `0 0 40px rgba(124,58,237,0.3), inset 0 1px 0 rgba(255,255,255,0.06)` : 'inset 0 1px 0 rgba(255,255,255,0.04)',
            transition: 'all .3s',
          }}>
            {/* reimagined: grid overlay */}
            {online && reimagined && (
              <div style={{
                position: 'absolute', inset: 0, opacity: 0.18,
                backgroundImage: `linear-gradient(${Z.brandLite} 1px, transparent 1px), linear-gradient(90deg, ${Z.brandLite} 1px, transparent 1px)`,
                backgroundSize: '24px 24px',
                maskImage: 'radial-gradient(ellipse at 80% 50%, black, transparent 70%)',
                WebkitMaskImage: 'radial-gradient(ellipse at 80% 50%, black, transparent 70%)',
              }} />
            )}

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', position: 'relative' }}>
              <div style={{ flex: 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <span style={{
                    fontSize: 10, fontWeight: 700, letterSpacing: 1.8,
                    color: online ? Z.brandLite : Z.text3, textTransform: 'uppercase',
                  }}>{online ? 'Live · scanning' : 'Offline'}</span>
                  {online && <div style={{ width: 6, height: 6, borderRadius: '50%', background: Z.success, boxShadow: `0 0 6px ${Z.success}`, animation: 'blink 1.4s infinite' }}/>}
                </div>
                <div style={{ fontSize: 22, fontWeight: 700, color: Z.text, letterSpacing: -0.4, marginBottom: 4 }}>
                  {online ? "You're online" : "You're offline"}
                </div>
                <div style={{ fontSize: 12, color: Z.text3, lineHeight: 1.5, maxWidth: 200 }}>
                  {online ? 'Scanning a 12 km zone for verified jobs.' : 'Tap to start receiving job requests.'}
                </div>
              </div>
              <div style={{
                width: 56, height: 56, borderRadius: '50%',
                background: online ? Z.gradient : 'rgba(255,255,255,0.05)',
                border: online ? 'none' : `1px solid ${Z.border}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: online ? '#fff' : Z.text3,
                boxShadow: online ? `0 8px 28px ${Z.brand}66` : 'none',
                transition: 'all .3s',
              }}>
                <I.power size={22} stroke={2.2} />
              </div>
            </div>
          </div>
        </div>

        {/* ── PERFORMANCE WIDGETS ─────────────────────────────── */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 8, marginBottom: 22 }}>
          <Glass style={{ padding: 14, borderColor: 'rgba(124,58,237,0.4)' }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.4, color: Z.brandLite, textTransform: 'uppercase', marginBottom: 8 }}>Today</div>
            <div style={{ ...mono, fontSize: 24, fontWeight: 600, color: Z.text, letterSpacing: -0.5, lineHeight: 1 }}>₹2,840</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 6 }}>
              <span style={{ fontSize: 10, color: Z.success, fontWeight: 600 }}>↑ 18%</span>
              <span style={{ fontSize: 10, color: Z.text3 }}>vs yesterday</span>
            </div>
          </Glass>
          <Glass style={{ padding: 14 }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.4, color: Z.text3, textTransform: 'uppercase', marginBottom: 8 }}>Jobs</div>
            <div style={{ ...mono, fontSize: 24, fontWeight: 600, color: Z.text, letterSpacing: -0.5, lineHeight: 1 }}>4</div>
            <div style={{ fontSize: 10, color: Z.text3, marginTop: 6 }}>17 this week</div>
          </Glass>
          <Glass style={{ padding: 14 }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: 1.4, color: Z.text3, textTransform: 'uppercase', marginBottom: 8 }}>Rating</div>
            <div style={{ ...mono, fontSize: 24, fontWeight: 600, color: Z.text, letterSpacing: -0.5, lineHeight: 1, display: 'flex', alignItems: 'center', gap: 4 }}>
              4.92
            </div>
            <div style={{ fontSize: 10, color: Z.gold, marginTop: 6 }}>★ Top 8%</div>
          </Glass>
        </div>

        {/* Active job teaser if there is one */}
        <SectionH action="View all">Incoming requests</SectionH>
        <div onClick={() => nav.go('jobs')} style={{
          padding: 14, borderRadius: 18, marginBottom: 12,
          background: 'rgba(20,8,40,0.6)', border: `1px solid ${Z.border}`,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: Z.gradient,
          }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
            <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
              <Pill tone="brand">★ Top match</Pill>
              <Pill tone="neutral">Plumbing</Pill>
            </div>
            <div style={{ ...mono, fontSize: 10, color: Z.text4 }}>#J-48217</div>
          </div>
          <div style={{ fontSize: 13, color: Z.text, lineHeight: 1.5, marginBottom: 10 }}>
            Kitchen sink leak under counter, needs new washer + pipe joint…
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 10, borderTop: `0.5px solid ${Z.border}` }}>
            <div style={{ display: 'flex', gap: 12, fontSize: 11, color: Z.text3 }}>
              <span>📍 1.8 km</span><span>⏱ ~45m</span>
            </div>
            <div style={{ ...mono, fontSize: 18, fontWeight: 600, color: Z.text, letterSpacing: -0.4 }}>₹680</div>
          </div>
        </div>

        {/* Trust strip */}
        <Glass strong style={{ padding: 14, marginTop: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 36, height: 36, borderRadius: 10,
              background: 'rgba(16,185,129,0.15)', border: `0.5px solid rgba(16,185,129,0.34)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: Z.success,
            }}><I.shield size={18} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 600, color: Z.text, marginBottom: 2 }}>Trust shield active</div>
              <div style={{ fontSize: 10.5, color: Z.text3, lineHeight: 1.4 }}>OTP, server billing, escrow — all enabled.</div>
            </div>
            <I.chevR size={18} color={Z.text3} />
          </div>
        </Glass>
      </div>
    </div>
  );
};

// ──── AVAILABLE JOBS ─────────────────────────────────────────
const JOB_FEED = [
  { id: 48217, cat: 'Plumbing', match: true, desc: 'Kitchen sink leak under counter, needs new washer + pipe joint.', dist: 1.8, mins: 45, pay: 680, ago: '2m', addr: 'HSR Layout, 100ft Rd' },
  { id: 48214, cat: 'Electrical', match: false, desc: 'Two ceiling fans not spinning, suspect capacitor failure.', dist: 3.2, mins: 60, pay: 920, ago: '8m', addr: 'Koramangala 5th block' },
  { id: 48209, cat: 'Cleaning', match: true, desc: 'Deep cleaning 2BHK — sofa, kitchen, bathrooms.', dist: 4.7, mins: 180, pay: 1850, ago: '12m', addr: 'Sarjapur Rd' },
  { id: 48198, cat: 'Carpentry', match: false, desc: 'Wardrobe door hinge replacement, 3 doors.', dist: 5.4, mins: 75, pay: 540, ago: '24m', addr: 'BTM 2nd Stage' },
  { id: 48191, cat: 'Painting', match: false, desc: 'Touch-up + 2 wall accent paint, kid\'s room.', dist: 6.1, mins: 240, pay: 2400, ago: '38m', urgent: true, addr: 'Indiranagar 6th main' },
];

const AvailableJobs = ({ nav, online, reimagined }) => {
  const [tab, setTab] = React.useState('standard');
  const [filter, setFilter] = React.useState('All');
  const [sort, setSort] = React.useState('Nearest');

  if (!online) return (
    <div style={{ padding: '60px 24px', textAlign: 'center' }}>
      <div style={{ margin: '0 auto 24px' }}>
        <Loader variant="gridscan" size={140} />
      </div>
      <div style={{ fontSize: 18, fontWeight: 700, color: Z.text, marginBottom: 8 }}>You're offline</div>
      <div style={{ fontSize: 13, color: Z.text3, lineHeight: 1.5, maxWidth: 260, margin: '0 auto 18px' }}>
        Switch to online from Home to start receiving verified job requests in your zone.
      </div>
      <button onClick={() => nav.go('home')} style={btnPrimaryStyle}>Go to Home</button>
    </div>
  );

  return (
    <div style={{ padding: '0 18px 120px' }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, color: Z.text3, fontWeight: 500, marginBottom: 2 }}>Marketplace</div>
          <div style={{ fontSize: 26, fontWeight: 700, color: Z.text, letterSpacing: -0.6 }}>Find work</div>
        </div>
        <Pill tone="success" style={{ marginTop: 8 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: Z.success, boxShadow: `0 0 6px ${Z.success}` }} /> Online
        </Pill>
      </div>

      {/* Stats row */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8, marginBottom: 14 }}>
        {[
          { v: '5', l: 'Standard' }, { v: '2', l: 'Custom' }, { v: '3.4 km', l: 'Avg dist' }
        ].map((s, i) => (
          <div key={i} style={{
            padding: 12, borderRadius: 14, background: 'rgba(20,8,40,0.55)',
            border: `0.5px solid ${Z.border}`, textAlign: 'center',
          }}>
            <div style={{ ...mono, fontSize: 18, fontWeight: 600, color: Z.text }}>{s.v}</div>
            <div style={{ fontSize: 10, color: Z.text3, marginTop: 2 }}>{s.l}</div>
          </div>
        ))}
      </div>

      {/* Segmented */}
      <div style={{
        display: 'flex', gap: 4, padding: 4, background: 'rgba(20,8,40,0.6)',
        borderRadius: 12, marginBottom: 12, border: `0.5px solid ${Z.border}`,
      }}>
        {['standard', 'custom'].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 === 'standard' ? 'Standard' : 'Custom'}</div>
        ))}
      </div>

      {/* Filter chips */}
      <div style={{ display: 'flex', gap: 6, overflowX: 'auto', marginBottom: 10, paddingBottom: 4 }} className="scroll-x">
        {['All', 'Plumbing', 'Electrical', 'Cleaning', 'Carpentry', 'Painting'].map(c => (
          <div key={c} onClick={() => setFilter(c)} style={{
            padding: '7px 14px', borderRadius: 999, fontSize: 11.5, fontWeight: 600,
            whiteSpace: 'nowrap', cursor: 'pointer',
            background: filter === c ? Z.text : 'transparent',
            color: filter === c ? Z.bg : Z.text2,
            border: `0.5px solid ${filter === c ? Z.text : Z.border}`,
            transition: 'all .15s',
          }}>{c}</div>
        ))}
      </div>

      {/* Sort */}
      <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
        {[['Nearest', '📍'], ['Latest', '🕐'], ['Reward', '💎']].map(([opt, ic]) => (
          <div key={opt} onClick={() => setSort(opt)} style={{
            padding: '6px 12px', borderRadius: 999, fontSize: 11, fontWeight: 600,
            background: sort === opt ? 'rgba(124,58,237,0.16)' : 'transparent',
            color: sort === opt ? Z.brandLite : Z.text3,
            border: `0.5px solid ${sort === opt ? 'rgba(124,58,237,0.4)' : Z.border}`,
            cursor: 'pointer',
          }}>{ic} {opt}</div>
        ))}
      </div>

      {/* Job list */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {JOB_FEED.map((j, i) => (
          <div key={j.id} onClick={() => nav.go('jobDetail', { job: j })} style={{
            position: 'relative', borderRadius: 16, overflow: 'hidden',
            background: 'rgba(20,8,40,0.55)',
            border: `0.5px solid ${j.match ? 'rgba(124,58,237,0.5)' : j.urgent ? 'rgba(239,68,68,0.4)' : Z.border}`,
            cursor: 'pointer',
            animation: `slideUp .4s ${i * 0.06}s both`,
          }}>
            {(j.match || j.urgent) && (
              <div style={{
                height: 2, background: j.match ? Z.gradient : Z.danger,
              }} />
            )}
            <div style={{ padding: 14 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 10 }}>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                  <Pill tone="neutral">{j.cat}</Pill>
                  {j.match && <Pill tone="brand">★ Top match</Pill>}
                  {j.urgent && <Pill tone="danger">Re-opened</Pill>}
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 10, color: Z.text3 }}>{j.ago} ago</div>
                  <div style={{ ...mono, fontSize: 9.5, color: Z.text4, marginTop: 1 }}>#{j.id}</div>
                </div>
              </div>
              <div style={{ fontSize: 13.5, color: Z.text2, lineHeight: 1.5, marginBottom: 12 }}>{j.desc}</div>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                paddingTop: 10, borderTop: `0.5px solid ${Z.border}`,
              }}>
                <div style={{ display: 'flex', gap: 12 }}>
                  <span style={{ fontSize: 11, color: Z.text3 }}>📍 {j.dist} km</span>
                  <span style={{ fontSize: 11, color: Z.text3 }}>⏱ ~{j.mins}m</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ fontSize: 9, color: Z.text3, letterSpacing: 0.3 }}>Payout</div>
                    <div style={{ ...mono, fontSize: 18, fontWeight: 600, color: Z.text, letterSpacing: -0.4, lineHeight: 1 }}>{fmtINR(j.pay)}</div>
                  </div>
                  <div style={{
                    padding: '7px 12px', borderRadius: 10, background: Z.text, color: Z.bg,
                    fontSize: 11, fontWeight: 700,
                  }}>View →</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ──── JOB DETAIL ─────────────────────────────────────────────
const JobDetail = ({ nav, job, reimagined }) => {
  const j = job || JOB_FEED[0];
  const [accepting, setAccepting] = React.useState(false);

  const accept = () => {
    setAccepting(true);
    setTimeout(() => nav.go('active', { job: j, stage: 'enroute' }), 1400);
  };

  return (
    <div style={{ padding: '0 0 120px', position: 'relative' }}>
      {/* Map header placeholder */}
      <div style={{
        height: 220, position: 'relative', overflow: 'hidden',
        background: `radial-gradient(circle at 60% 60%, rgba(124,58,237,0.4), transparent 60%), ${Z.surface}`,
      }}>
        {/* grid */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `linear-gradient(${Z.border} 1px, transparent 1px), linear-gradient(90deg, ${Z.border} 1px, transparent 1px)`,
          backgroundSize: '32px 32px', opacity: 0.6,
        }} />
        {/* route line (svg) */}
        <svg viewBox="0 0 400 220" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          <path d="M 60 180 C 120 160, 160 100, 240 90 S 340 60, 360 50" stroke={Z.brand} strokeWidth="2.5" strokeDasharray="6 4" fill="none" strokeLinecap="round" />
        </svg>
        {/* worker pin */}
        <div style={{ position: 'absolute', left: 50, top: 165, width: 18, height: 18, borderRadius: '50%', background: Z.cyan, border: `2px solid ${Z.bg}`, boxShadow: `0 0 16px ${Z.cyan}` }} />
        {/* job pin */}
        <div style={{ position: 'absolute', right: 36, top: 38, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{
            padding: '4px 8px', borderRadius: 8, background: Z.gradient, color: '#fff',
            fontSize: 10, fontWeight: 700, marginBottom: 4,
          }}>{fmtINR(j.pay)}</div>
          <div style={{ width: 14, height: 14, borderRadius: '50%', background: Z.pink, border: `2px solid ${Z.bg}`, boxShadow: `0 0 16px ${Z.pink}` }} />
        </div>
        {/* back */}
        <div onClick={() => nav.back()} style={{
          position: 'absolute', top: 16, left: 16, width: 38, height: 38, borderRadius: '50%',
          background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: Z.text, cursor: 'pointer', border: `0.5px solid ${Z.border}`,
        }}><I.chevL size={20} /></div>
        {/* dist badge */}
        <div style={{
          position: 'absolute', bottom: 14, left: 16, padding: '6px 12px', borderRadius: 999,
          background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(12px)',
          border: `0.5px solid ${Z.border}`, color: Z.text, fontSize: 11, fontWeight: 600,
        }}>{j.dist} km · ~{Math.round(j.dist * 3)} min drive</div>
      </div>

      <div style={{ padding: '18px 18px 0' }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 12 }}>
          <Pill tone="neutral">{j.cat}</Pill>
          {j.match && <Pill tone="brand">★ Top match</Pill>}
        </div>
        <div style={{ fontSize: 22, fontWeight: 700, color: Z.text, letterSpacing: -0.5, marginBottom: 6 }}>
          {j.cat} request
        </div>
        <div style={{ ...mono, fontSize: 11, color: Z.text3, marginBottom: 14 }}>#J-{j.id} · {j.ago} ago</div>

        {/* description */}
        <div style={{
          padding: 14, borderRadius: 14, background: 'rgba(20,8,40,0.55)',
          border: `0.5px solid ${Z.border}`, marginBottom: 14,
        }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.4, color: Z.text3, textTransform: 'uppercase', marginBottom: 8 }}>Problem</div>
          <div style={{ fontSize: 13.5, color: Z.text2, lineHeight: 1.55 }}>{j.desc}</div>
        </div>

        {/* breakdown */}
        <div style={{
          padding: 14, borderRadius: 14, background: 'rgba(20,8,40,0.55)',
          border: `0.5px solid ${Z.border}`, marginBottom: 14,
        }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.4, color: Z.text3, textTransform: 'uppercase', marginBottom: 12 }}>Payout breakdown</div>
          {[
            ['Base service', '₹400'], ['Distance (1.8 km)', '₹80'], ['Time est. (45m)', '₹200'], ['Platform fee', '−₹0'],
          ].map(([l, v], i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '6px 0', fontSize: 12.5, color: Z.text2 }}>
              <span>{l}</span><span style={mono}>{v}</span>
            </div>
          ))}
          <div style={{ height: 1, background: Z.border, margin: '8px 0' }} />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: Z.text }}>Guaranteed payout</span>
            <span style={{ ...mono, fontSize: 22, fontWeight: 700 }}>
              <GradientText>{fmtINR(j.pay)}</GradientText>
            </span>
          </div>
        </div>

        {/* customer + trust */}
        <div style={{
          padding: 14, borderRadius: 14, background: 'rgba(20,8,40,0.55)',
          border: `0.5px solid ${Z.border}`, marginBottom: 14,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              width: 40, height: 40, borderRadius: '50%',
              background: `linear-gradient(135deg, ${Z.cyan}, ${Z.brand})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontWeight: 700, fontSize: 14,
            }}>P</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: Z.text }}>Priya M.</div>
              <div style={{ fontSize: 11, color: Z.text3 }}>⭐ 4.8 · 23 jobs as customer</div>
            </div>
            <Pill tone="success"><I.shield size={11}/> Verified</Pill>
          </div>
          <div style={{ marginTop: 12, paddingTop: 12, borderTop: `0.5px solid ${Z.border}`, display: 'flex', alignItems: 'center', gap: 8 }}>
            <I.pin size={14} color={Z.text3}/>
            <span style={{ fontSize: 12, color: Z.text2 }}>{j.addr}</span>
            <span style={{ ...mono, fontSize: 11, color: Z.brandLite, marginLeft: 'auto' }}>Reveal on accept</span>
          </div>
        </div>

        {/* trust callouts */}
        <div style={{
          display: 'flex', gap: 8, padding: 12, borderRadius: 12,
          background: 'rgba(16,185,129,0.06)', border: `0.5px solid rgba(16,185,129,0.2)`, marginBottom: 18,
        }}>
          <I.shield size={16} color={Z.success}/>
          <div style={{ fontSize: 11, color: Z.text2, lineHeight: 1.5 }}>
            <strong style={{ color: Z.text }}>Protected payout.</strong> Locked in escrow when you accept. Released on OTP completion.
          </div>
        </div>
      </div>

      {/* Sticky accept */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '14px 18px 90px',
        background: 'linear-gradient(180deg, transparent, rgba(10,1,24,0.92) 30%)',
        display: 'flex', gap: 10,
      }}>
        <button style={btnGhostStyle}>Decline</button>
        <button onClick={accept} disabled={accepting} style={{ ...btnPrimaryStyle, flex: 2, position: 'relative', overflow: 'hidden' }}>
          {accepting ? <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 0.8s linear infinite' }} />
            Locking escrow…
          </span> : `Accept · ${fmtINR(j.pay)}`}
        </button>
      </div>
    </div>
  );
};

// Buttons (shared)
const btnPrimaryStyle = {
  flex: 1, padding: '14px 16px', borderRadius: 14, border: 'none',
  background: Z.gradient, color: '#fff', fontSize: 14, fontWeight: 700,
  letterSpacing: -0.2, cursor: 'pointer',
  boxShadow: `0 8px 24px ${Z.brand}55`,
  fontFamily: Z.font,
};
const btnGhostStyle = {
  padding: '14px 16px', borderRadius: 14, fontSize: 14, fontWeight: 600,
  background: 'rgba(20,8,40,0.7)', color: Z.text2, border: `0.5px solid ${Z.border}`,
  cursor: 'pointer', fontFamily: Z.font,
};

Object.assign(window, { HomeScreen, AvailableJobs, JobDetail, JOB_FEED, btnPrimaryStyle, btnGhostStyle, fmtINR, mono });