{/* Status + address hero */}

{JOB_ICONS[job.type]||JOB_ICONS.default}

{job.type} · {job.time}, {job.date}

{/* Primary action button */} {flow.next ? ( : jobStatus === 'in progress' ? Icons.check : null } /> ) : (

{Icons.check} {flow.label}

)}

{/* Quick actions row */}

{}}/> onNav('belle', {prompt:`Text ${job.client} I'm on my way`})}/> {}}/> setPaymentOpen(true)}/>

{/* Belle contextual */} { if(a!=='Dismiss') onNav('belle', {context: job}); }} /> {/* Map preview */}

{}} style={{borderRadius:14,overflow:'hidden',border:'1px solid rgba(0,0,0,0.07)',cursor:'pointer', height:120,background:'linear-gradient(135deg, #e8f2fd 0%, #dde8f5 100%)', display:'flex',alignItems:'center',justifyContent:'center',position:'relative'}}> {/* Simulated map */}

Get Directions →

{/* Details card */} {[ { label:'Client', value: job.client }, { label:'Address', value: job.address }, { label:'Phone', value: job.phone }, { label:'Technician', value: job.tech }, { label:'Amount', value: job.amount }, ].map((r, i, arr) => (

{r.label} {r.value}

))} {/* Job Checklist (Jobber-inspired) */} {(() => { const [checks, setChecks] = React.useState([ { id:1, label:'Inspect existing setup', done:true }, { id:2, label:'Shut off water supply', done:true }, { id:3, label:'Remove old unit', done:false }, { id:4, label:'Install new components', done:false }, { id:5, label:'Test for leaks', done:false }, { id:6, label:'Clean up work area', done:false }, ]); const toggle = id => setChecks(checks.map(c => c.id===id ? {...c,done:!c.done} : c)); const done = checks.filter(c=>c.done).length; return ( <> {checks.map((c,i) => (

toggle(c.id)} style={{padding:'12px 16px',display:'flex',alignItems:'center',gap:12, borderBottom: i

{c.done && }

{c.label}

))} ); })()} {/* Notes */} setNotesOpen(true)}/> {notes.map((n, i) => (

{n.author} {n.time}

{n.text}

))} onNav('estimates')}/> } iconBg="#f5f0ff" title="Diagnose with Belle" subtitle="AI-guided diagnosis → auto-generate estimate" onTap={() => onNav('belle', {prompt:'Diagnose ' + job.name + ' for ' + job.client})} isLast/> setPhotosOpen(true)}/>

{photos.map(p => (

{Icons.camera}

{p.label}

))}

setPhotosOpen(true)} style={{width:100,height:100,borderRadius:12,background:'white',flexShrink:0, border:'1.5px dashed rgba(0,0,0,0.15)',display:'flex',flexDirection:'column', alignItems:'center',justifyContent:'center',gap:4,cursor:'pointer'}}>

{Icons.plus}

Add

{/* Add Note sheet */} setNotesOpen(false)} title="Add Note">

setNoteText(e.target.value)}
            placeholder="Type your note…"
            style={{width:'100%',minHeight:120,borderRadius:12,border:'1.5px solid rgba(0,0,0,0.12)',
              padding:'12px',fontSize:15,fontFamily:'inherit',resize:'none',outline:'none',
              color:'#111',letterSpacing:'-0.005em',boxSizing:'border-box'}}/>
          <PrimaryButton label="Save Note" style={{marginTop:12}}
            onTap={() => {
              if(noteText.trim()) {
                setNotes([{author:'Marcus L.',time:'Just now',text:noteText}, ...notes]);
                setNoteText('');
                setNotesOpen(false);
              }
            }}/>
        </div>
      </BottomSheet>

{/* Payment sheet */}
      <BottomSheet open={paymentOpen} onClose={() => setPaymentOpen(false)} title="Record Payment">
        <div style={{padding:'16px'}}>
          <div style={{fontSize:36,fontWeight:700,color:'#111',textAlign:'center',
            letterSpacing:'-0.03em',marginBottom:4,fontVariantNumeric:'tabular-nums'}}>{job.amount}</div>
          <div style={{fontSize:13,color:'rgba(0,0,0,0.4)',textAlign:'center',marginBottom:20}}>Outstanding balance</div>
          {[['Cash','#1a9e5c'],['Tap to Pay','#0071e3'],['Credit Card','#0071e3'],['Check','#7c3aed'],['Financing','#d97706']].map(([method, color]) => (
            <div key={method} onClick={() => { setPaymentOpen(false); }}
              style={{height:52,borderRadius:12,background:'#f7f7f8',display:'flex',alignItems:'center',
                justifyContent:'space-between',padding:'0 16px',marginBottom:8,cursor:'pointer',
                border:'1px solid rgba(0,0,0,0.07)'}}>
              <span style={{fontSize:16,fontWeight:500,color:'#111'}}>{method}</span>
              <div style={{width:28,height:28,borderRadius:'50%',background:color,display:'flex',
                alignItems:'center',justifyContent:'center',color:'white',fontSize:12}}>{Icons.chevronR}</div>
            </div>
          ))}
        </div>
      </BottomSheet>

{/* Complete confirmation */}
      <BottomSheet open={confirmAction==='complete'} onClose={() => setConfirmAction(null)} title="Complete Job?" halfHeight>
        <div style={{padding:'16px'}}>
          <div style={{fontSize:14,color:'rgba(0,0,0,0.55)',marginBottom:20,lineHeight:1.5}}>
            Mark this job as complete? This will send a completion notification to {job.client}.
          </div>
          <PrimaryButton label="Yes, Complete Job" color="#1a9e5c"
            onTap={() => { setJobStatus('completed'); setConfirmAction(null); }}/>
          <SecondaryButton label="Cancel" style={{marginTop:10}}
            onTap={() => setConfirmAction(null)}/>
        </div>
      </BottomSheet>

{/* Photos sheet */}
      <BottomSheet open={photosOpen} onClose={() => setPhotosOpen(false)} title="Add Photo">
        <div style={{padding:'16px',display:'flex',flexDirection:'column',gap:10}}>
          {['Take Photo — Before','Take Photo — After','Choose from Library'].map(label => (
            <div key={label} onClick={() => {
              const colors = ['#e8f2fd','#fef3e2','#e6f7ef','#f5f0ff'];
              setPhotos([...photos, {id:Date.now(), label: label.includes('Before')?'Before':'After', color: colors[photos.length%colors.length]}]);
              setPhotosOpen(false);
            }}
            style={{height:52,borderRadius:12,background:'#f7f7f8',display:'flex',alignItems:'center',
              padding:'0 16px',fontSize:15,fontWeight:500,color:'#111',cursor:'pointer',
              border:'1px solid rgba(0,0,0,0.07)'}}>
              {label}
            </div>
          ))}
        </div>
      </BottomSheet>
    </div>
  );
}

// ── NEW JOB SCREEN ────────────────────────────────────────────
function NewJobScreen({ onNav }) {
  const [form, setForm] = useState({ client:'', type:'', date:'', time:'', description:'' });
  const update = (k, v) => setForm({...form, [k]:v});
  return (
    <div style={{background:'#f7f7f8', minHeight:'100%', paddingBottom:120}}>
      <NavHeader title="New Job" onBack="__back"
        action={<span onClick={() => onNav('jobs')} style={{fontSize:15,color:'#0071e3',cursor:'pointer',fontWeight:500}}>Save</span>}
      />
      <BelleSuggestion
        text="I can prefill this job from your last visit to a client. Who is this job for?"
        actions={['Use Belle', 'Skip']}
        onAction={(a) => { if(a==='Use Belle') onNav('belle', {prompt:'Create a new job'}); }}
      />
      <SectionHeader title="Job Info"/>
      <Card>
        {[
          { label:'Client', placeholder:'Search clients…', key:'client' },
          { label:'Service type', placeholder:'e.g. Drain Cleaning', key:'type' },
          { label:'Date', placeholder:'Select date', key:'date' },
          { label:'Time', placeholder:'Select time', key:'time' },
        ].map((f, i, arr) => (
          <div key={f.key} style={{padding:'13px 16px',borderBottom: i<arr.length-1 ? '0.5px solid rgba(0,0,0,0.07)':'none',
            display:'flex',justifyContent:'space-between',alignItems:'center'}}>
            <span style={{fontSize:14,color:'rgba(0,0,0,0.45)',fontWeight:500,flexShrink:0,marginRight:12}}>{f.label}</span>
            <input value={form[f.key]} onChange={e => update(f.key, e.target.value)}
              placeholder={f.placeholder}
              style={{border:'none',background:'transparent',fontSize:14,color:'#111',outline:'none',
                fontFamily:'inherit',textAlign:'right',flex:1,minWidth:0}}/>
          </div>
        ))}
      </Card>
      <SectionHeader title="Description"/>
      <div style={{margin:'0 16px'}}>
        <textarea value={form.description} onChange={e => update('description', e.target.value)}
          placeholder="Describe the job…"
          style={{width:'100%',minHeight:96,borderRadius:12,border:'1px solid rgba(0,0,0,0.1)',
            background:'white',padding:'13px 16px',fontSize:14,fontFamily:'inherit',
            resize:'none',outline:'none',color:'#111',boxSizing:'border-box'}}/>
      </div>
      <div style={{padding:'16px'}}>
        <PrimaryButton label="Create Job" onTap={() => onNav('jobs')}/>
      </div>
    </div>
  );
}

Object.assign(window, { JobsScreen, JobDetailScreen, NewJobScreen, JOBS_DATA });