// Screen 2 — Job In Progress

function JobInProgress() {
  const checklist = [
    { l: 'Confirm arrival w/ customer', d: true },
    { l: 'Check thermostat settings', d: true },
    { l: 'Inspect air filter', d: true },
    { l: 'Test run capacitor', d: true },
    { l: 'Check refrigerant levels', d: false, active: true },
    { l: 'Measure superheat/subcool', d: false },
    { l: 'Clean condenser coils', d: false },
    { l: 'Final system test', d: false },
  ];

  const done = checklist.filter(c => c.d).length;
  const pct = Math.round((done / checklist.length) * 100);

  return (
    <IOSDevice dark={false}>
      <div style={{
        paddingTop: 54, paddingBottom: 110, height: '100%', overflow: 'hidden',
        fontFamily: '-apple-system, system-ui',
        background: '#F2F2F7',
      }}>
        {/* Header */}
        <div style={{ padding: '6px 16px 4px', display: 'flex', alignItems: 'center', gap: 10 }}>
          <button style={{
            background: 'rgba(255,255,255,0.9)', border: '1px solid rgba(0,0,0,0.08)',
            width: 36, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <I.Chevron size={17} style={{ transform: 'rotate(180deg)' }} />
          </button>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: '#6B7280', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5 }}>Job #1042</div>
            <div style={{ fontSize: 18, fontWeight: 700, color: '#111', letterSpacing: -0.3 }}>AC Not Cooling</div>
          </div>
          <button style={{
            background: 'rgba(255,255,255,0.9)', border: '1px solid rgba(0,0,0,0.08)',
            width: 36, height: 36, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center',
            cursor: 'pointer',
          }}>
            <I.Settings size={16} />
          </button>
        </div>

        {/* Live status banner — pulsing dot */}
        <div style={{ padding: '10px 16px 0' }}>
          <div style={{
            background: '#fff',
            border: '1px solid rgba(0,0,0,0.06)',
            borderLeft: '4px solid #EA580C',
            borderRadius: 12, padding: '12px 14px',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ position: 'relative', width: 12, height: 12 }}>
              <span style={{
                position: 'absolute', inset: 0, borderRadius: '50%',
                background: '#EA580C', opacity: 0.35, animation: 'pulse 1.6s ease-out infinite',
              }} />
              <span style={{
                position: 'absolute', inset: 2, borderRadius: '50%', background: '#EA580C',
              }} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: '#9A3412', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>In progress</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: '#111' }}>
                Started 9:02a · <span style={{ fontVariantNumeric: 'tabular-nums' }}>1h 14m</span> on site
              </div>
            </div>
            <button style={{
              background: '#FEF3C7', color: '#92400E', border: 'none',
              fontSize: 12, fontWeight: 700, padding: '7px 11px', borderRadius: 8,
              cursor: 'pointer', fontFamily: 'inherit',
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              <I.Clock size={11} /> Pause
            </button>
          </div>
        </div>

        {/* Customer compact */}
        <div style={{ padding: '10px 16px 0' }}>
          <div style={{
            background: '#fff', borderRadius: 14, border: '1px solid rgba(0,0,0,0.06)',
            padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <Avatar name="Sarah Johnson" size={40} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 15, fontWeight: 600, color: '#111' }}>Sarah Johnson</span>
                <span style={{
                  fontSize: 10, fontWeight: 700, color: '#B45309',
                  background: '#FEF3C7', padding: '1px 6px', borderRadius: 4,
                  display: 'inline-flex', alignItems: 'center', gap: 2,
                }}>
                  <I.Star size={9} /> Gold
                </span>
              </div>
              <div style={{ fontSize: 12, color: '#6B7280', marginTop: 1 }}>742 Oak St · Carrier 24ACC636</div>
            </div>
            <button style={iconBtn()}><I.Phone size={15} /></button>
            <button style={iconBtn()}><I.Message size={15} /></button>
          </div>
        </div>

        {/* AC repair checklist (moved up — replaces diagnosis findings) */}
        <div style={{ padding: '12px 16px 0' }}>
          <div style={{
            background: '#fff', borderRadius: 14, border: '1px solid rgba(0,0,0,0.06)',
            padding: '14px',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#111' }}>AC repair checklist</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontSize: 17, fontWeight: 700, color: '#0F766E', fontVariantNumeric: 'tabular-nums', letterSpacing: -0.3 }}>{done}</span>
                <span style={{ fontSize: 12, color: '#6B7280' }}>of {checklist.length}</span>
              </div>
            </div>
            {/* progress bar */}
            <div style={{ height: 6, background: '#F3F4F6', borderRadius: 3, overflow: 'hidden', marginBottom: 12 }}>
              <div style={{ width: `${pct}%`, height: '100%', background: 'linear-gradient(90deg, #0F766E, #14B8A6)', borderRadius: 3 }} />
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              {checklist.map((c, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '9px 0',
                  borderTop: i > 0 ? '1px solid #F3F4F6' : 'none',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 6,
                    border: `2px solid ${c.d ? '#0F766E' : c.active ? '#EA580C' : '#D1D5DB'}`,
                    background: c.d ? '#0F766E' : c.active ? '#FFF7ED' : '#fff',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0, color: '#fff',
                    boxShadow: c.active ? '0 0 0 4px rgba(234,88,12,0.12)' : 'none',
                  }}>
                    {c.d && <I.Check size={14} stroke={3} />}
                  </span>
                  <span style={{
                    flex: 1, fontSize: 14,
                    color: c.d ? '#9CA3AF' : c.active ? '#9A3412' : '#111',
                    textDecoration: c.d ? 'line-through' : 'none',
                    fontWeight: c.active ? 600 : 400,
                  }}>{c.l}</span>
                  {c.active && (
                    <span style={{
                      fontSize: 10, fontWeight: 700, color: '#EA580C',
                      textTransform: 'uppercase', letterSpacing: 0.4,
                    }}>Now</span>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ padding: '12px 16px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          <QuickAction icon={<I.Camera size={18} />} label="Add photo" sub="3 attached" />
          <QuickAction icon={<I.Plus size={18} />} label="Add part" sub="from pricebook" />
          <QuickAction icon={<I.FileText size={18} />} label="Note" sub="2 saved" />
          <QuickAction icon={<I.Droplet size={18} />} label="Refrigerant log" sub="EPA 608" />
        </div>

        {/* Build estimate CTA — sticky-ish */}
        <div style={{ padding: '16px 16px 0' }}>
          <button style={{
            width: '100%', background: '#111', color: '#fff', border: 'none',
            borderRadius: 14, padding: '15px 0', fontSize: 16, fontWeight: 700,
            cursor: 'pointer', fontFamily: 'inherit',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            letterSpacing: -0.2,
          }}>
            <I.Sparkles size={16} /> Build estimate for Sarah
            <I.ArrowRight size={15} />
          </button>
        </div>

        <style>{`
          @keyframes pulse {
            0% { transform: scale(1); opacity: 0.5; }
            70% { transform: scale(2.4); opacity: 0; }
            100% { transform: scale(2.4); opacity: 0; }
          }
        `}</style>

        <BottomBar />
      </div>
    </IOSDevice>
  );
}

function iconBtn() {
  return {
    width: 36, height: 36, borderRadius: 10,
    background: '#F3F4F6', border: 'none',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer', color: '#0F766E',
  };
}

function QuickAction({ icon, label, sub }) {
  return (
    <button style={{
      background: '#fff', border: '1px solid rgba(0,0,0,0.06)',
      borderRadius: 12, padding: '12px 12px',
      display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4,
      cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: '#F0FDFA', color: '#0F766E',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        marginBottom: 4,
      }}>{icon}</div>
      <div style={{ fontSize: 14, fontWeight: 600, color: '#111' }}>{label}</div>
      <div style={{ fontSize: 11, color: '#6B7280' }}>{sub}</div>
    </button>
  );
}

function BottomBar() {
  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 30,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'blur(20px) saturate(180%)',
      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
      borderTop: '0.5px solid rgba(0,0,0,0.1)',
      borderBottomLeftRadius: 48, borderBottomRightRadius: 48,
      padding: '8px 16px 26px',
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <button style={{
        flex: 1, background: '#0F766E', color: '#fff', border: 'none',
        borderRadius: 12, padding: '13px 0', fontSize: 15, fontWeight: 700,
        cursor: 'pointer', fontFamily: 'inherit',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
        boxShadow: '0 4px 12px rgba(15,118,110,0.25)',
      }}>
        <I.Check size={15} stroke={2.5} /> Mark complete
      </button>
    </div>
  );
}

Object.assign(window, { JobInProgress });