// Field tech mobile (iPhone frame), Customer approval, Onboarding, Settings, Capabilities

function FieldTechMobile({ state, setState }) {
  const trade = TRADES[state.tradeId];
  const jobs = JOBS_BY_TRADE[state.tradeId];
  const focus = FOCUS_JOB[state.tradeId];
  const [view, setView] = React.useState('today'); // today | job | capture

  return (
    <div style={{ padding: '28px 22px 60px', display: 'flex', gap: 30, alignItems: 'flex-start', justifyContent: 'center', minHeight: '100%', background: 'var(--surface-2)' }}>
      {/* Annotations */}
      <div style={{ maxWidth: 320, paddingTop: 40 }}>
        <h2 style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, marginBottom: 12, fontFamily: 'var(--display)' }}>Field tech - mobile</h2>
        <p style={{ fontSize: 13, color: 'var(--ink-70)', lineHeight: 1.6, marginBottom: 16 }}>
          The same app from the tradie's phone. Their one job is today's list and capturing photos + notes at each site. No quote-making on-site - that happens back at the office, or the AI drafts it while they drive.
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 24 }}>
          {[{ k: 'today', l: 'Today' }, { k: 'job', l: 'Job brief' }, { k: 'capture', l: 'Capture site visit' }].map(v => (
            <button key={v.k} onClick={() => setView(v.k)} style={{
              padding: '8px 12px', borderRadius: 8, border: '1px solid var(--border)',
              background: view === v.k ? 'var(--ink)' : 'var(--surface)', color: view === v.k ? 'var(--paper)' : 'var(--ink)',
              cursor: 'pointer', fontSize: 13, textAlign: 'left', fontFamily: 'var(--sans)',
            }}>{v.l}</button>
          ))}
        </div>
        <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)', lineHeight: 1.6, padding: 12, border: '1px dashed var(--border-strong)', borderRadius: 8 }}>
          Photos + voice note + typed notes flow straight into the office pipeline. Admin gets a push: <em>"Dan finished Wu Residence site visit - ready for quote."</em>
        </div>
      </div>

      <div data-tour="iphone-frame"><IOSDevice width={352} height={720} title={undefined}>
        {view === 'today' && <TechToday jobs={jobs} trade={trade} onOpen={() => setView('job')} />}
        {view === 'job' && <TechJobBrief job={focus} trade={trade} onCapture={() => setView('capture')} onBack={() => setView('today')} />}
        {view === 'capture' && <TechCapture job={focus} trade={trade} onBack={() => setView('job')} onDone={() => setState(s => ({ ...s, screen: 'ai-quote' }))} />}
      </IOSDevice></div>
    </div>
  );
}

function TechToday({ jobs, trade, onOpen }) {
  const todayJobs = jobs.slice(0, 4);
  return (
    <div style={{ padding: '54px 16px 24px', fontFamily: 'var(--sans)' }}>
      <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: '#888', textTransform: 'uppercase', letterSpacing: 0.6 }}>Thu 18 Apr</div>
      <h1 style={{ fontSize: 26, fontWeight: 600, margin: '6px 0 18px', letterSpacing: -0.5 }}>Today · 4 stops</h1>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {todayJobs.map((j, i) => (
          <button key={j.id} onClick={i === 0 ? onOpen : undefined} style={{
            textAlign: 'left', width: '100%', padding: 14, borderRadius: 14,
            background: '#fff', border: '1px solid #E7E4DC', cursor: 'pointer',
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 36, height: 36, borderRadius: 18, background: i === 0 ? '#1F1D18' : '#EFE9DC', color: i === 0 ? '#fff' : '#5B4E35', display: 'grid', placeItems: 'center', fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 600 }}>{i + 1}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: -0.1 }}>{j.title}</div>
              <div style={{ fontSize: 11, color: '#8A8470', marginTop: 2 }}>{j.customer} · {j.address}</div>
            </div>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: '#8A8470' }}>
              {['9:00', '11:30', '1:45', '3:30'][i]}
            </div>
          </button>
        ))}
      </div>

      <div style={{ marginTop: 18, padding: 14, borderRadius: 14, background: '#F7F3E9', border: '1px solid #E4DBB9', fontSize: 12, color: '#5B4E35' }}>
        <div style={{ fontSize: 10, fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 4 }}>Tip from Ellie</div>
        Wu Residence is pre-1980 - check eaves for asbestos before drilling.
      </div>
    </div>
  );
}

function TechJobBrief({ job, trade, onCapture, onBack }) {
  return (
    <div style={{ padding: '54px 16px 24px', fontFamily: 'var(--sans)' }}>
      <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 5, border: 'none', background: 'transparent', color: '#555', fontSize: 14, cursor: 'pointer', marginBottom: 8, padding: 0 }}>
        <Icon name="arrow-left" size={14}/> Today
      </button>
      <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: '#888', letterSpacing: 0.5 }}>{job.id} · {trade.label.toUpperCase()}</div>
      <h1 style={{ fontSize: 22, fontWeight: 600, margin: '4px 0 10px', letterSpacing: -0.4, textWrap: 'balance' }}>{job.title}</h1>

      <div style={{ padding: 12, borderRadius: 12, background: '#fff', border: '1px solid #E7E4DC', marginBottom: 10, fontSize: 13 }}>
        <div style={{ fontWeight: 600 }}>{job.customer}</div>
        <div style={{ color: '#6B6555', marginTop: 2 }}>{job.address}</div>
        <div style={{ display: 'flex', gap: 8, marginTop: 10 }}>
          <button style={pillBtn}><Icon name="phone" size={12}/> Call</button>
          <button style={pillBtn}><Icon name="map" size={12}/> Directions</button>
        </div>
      </div>

      <div style={{ padding: 12, borderRadius: 12, background: '#fff', border: '1px solid #E7E4DC', marginBottom: 14, fontSize: 12.5, lineHeight: 1.55, color: '#3F3A2A' }}>
        <div style={{ fontSize: 10, fontFamily: 'var(--mono)', color: '#888', letterSpacing: 0.5, marginBottom: 6, textTransform: 'uppercase' }}>Brief</div>
        {job.description}
      </div>

      <button onClick={onCapture} style={{
        width: '100%', padding: '14px 16px', borderRadius: 14,
        background: '#1F1D18', color: '#fff', border: 'none',
        fontSize: 15, fontWeight: 600, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
      }}><Icon name="camera" size={15}/> Start site visit</button>
      <div style={{ fontSize: 11, fontFamily: 'var(--mono)', textAlign: 'center', color: '#888', marginTop: 10 }}>
        Photos + voice note → AI drafts quote
      </div>
    </div>
  );
}

function TechCapture({ job, trade, onBack, onDone }) {
  const [photos, setPhotos] = React.useState(job.photos.slice(0, 2));
  const [recording, setRecording] = React.useState(false);
  const [recordingDone, setRecordingDone] = React.useState(false);
  const [typed, setTyped] = React.useState('');
  React.useEffect(() => { if (!recording) return; const t = setTimeout(() => { setRecording(false); setRecordingDone(true); }, 3500); return () => clearTimeout(t); }, [recording]);

  return (
    <div style={{ padding: '54px 16px 16px', fontFamily: 'var(--sans)' }}>
      <button onClick={onBack} style={{ display: 'flex', alignItems: 'center', gap: 5, border: 'none', background: 'transparent', color: '#555', fontSize: 14, cursor: 'pointer', marginBottom: 8, padding: 0 }}>
        <Icon name="arrow-left" size={14}/> Back
      </button>
      <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: '#888', letterSpacing: 0.5 }}>{job.id}</div>
      <h1 style={{ fontSize: 19, fontWeight: 600, margin: '4px 0 14px', letterSpacing: -0.3 }}>Site visit capture</h1>

      <div style={{ fontSize: 10, fontFamily: 'var(--mono)', color: '#888', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 6 }}>Photos · {photos.length}/4</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 12 }}>
        {photos.map((p, i) => (
          <PlaceholderImage key={i} label={p.label} tone={p.tone} height={86} />
        ))}
        {photos.length < 4 && (
          <button onClick={() => setPhotos([...photos, job.photos[photos.length]])} style={{
            height: 86, border: '2px dashed #C7C1AD', borderRadius: 10, background: '#FAF7EF',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 4, cursor: 'pointer', color: '#5B4E35',
          }}>
            <Icon name="camera" size={18}/>
            <span style={{ fontSize: 11, fontFamily: 'var(--mono)' }}>add photo</span>
          </button>
        )}
      </div>

      <div style={{ fontSize: 10, fontFamily: 'var(--mono)', color: '#888', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 6 }}>Voice note</div>
      <button onClick={() => !recordingDone && setRecording(r => !r)} style={{
        width: '100%', padding: '14px', borderRadius: 12,
        background: recording ? '#B84545' : (recordingDone ? '#E9F0E0' : '#fff'),
        border: `1px solid ${recording ? '#B84545' : '#E7E4DC'}`,
        display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
        marginBottom: 12,
      }}>
        <div style={{
          width: 32, height: 32, borderRadius: 16, background: recording ? '#fff' : (recordingDone ? '#4A6B2E' : '#1F1D18'),
          color: recording ? '#B84545' : '#fff', display: 'grid', placeItems: 'center',
        }}>
          {recordingDone ? <Icon name="check" size={14}/> : <Icon name={recording ? 'stop' : 'mic'} size={13}/>}
        </div>
        <div style={{ flex: 1, textAlign: 'left' }}>
          <div style={{ fontSize: 13, fontWeight: 500, color: recording ? '#fff' : '#1F1D18' }}>
            {recordingDone ? 'Recorded · 02:14' : (recording ? 'Recording…' : 'Hold to record voice note')}
          </div>
          <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: recording ? 'rgba(255,255,255,0.8)' : '#888', marginTop: 2 }}>
            Auto-transcribed · fed to AI
          </div>
        </div>
        {recording && <div style={{ width: 8, height: 8, borderRadius: 4, background: '#fff', animation: 'pulse 1s infinite' }}/>}
      </button>

      <div style={{ fontSize: 10, fontFamily: 'var(--mono)', color: '#888', letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 6 }}>Quick notes</div>
      <textarea value={typed} onChange={e => setTyped(e.target.value)} placeholder="e.g. 7m pipe run, switchboard has space, asbestos eaves?"
        style={{ width: '100%', minHeight: 72, padding: 10, borderRadius: 10, border: '1px solid #E7E4DC', fontSize: 13, background: '#fff', fontFamily: 'var(--sans)', resize: 'none', boxSizing: 'border-box', outline: 'none' }} />

      <button onClick={onDone} disabled={!recordingDone && photos.length < 3}
        style={{ marginTop: 12, width: '100%', padding: '14px', borderRadius: 14, background: '#1F1D18', color: '#fff', border: 'none', fontSize: 15, fontWeight: 600, cursor: 'pointer', opacity: (!recordingDone && photos.length < 3) ? 0.5 : 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
        <Icon name="sparkles" size={14}/> Send to office · queue AI quote
      </button>
    </div>
  );
}
const pillBtn = { padding: '6px 10px', borderRadius: 999, background: '#F3EFE4', border: '1px solid #E4DEC8', fontSize: 12, color: '#5B4E35', display: 'inline-flex', alignItems: 'center', gap: 5, cursor: 'pointer', fontFamily: 'var(--sans)' };

// Customer approval view (what the customer sees in their browser after the SMS)
function CustomerApproval({ state, setState }) {
  const job = FOCUS_JOB[state.tradeId];
  const trade = TRADES[state.tradeId];
  const summary = QUOTE_STREAMS[state.tradeId].summary;
  const items = QUOTE_STREAMS[state.tradeId].items;
  const [step, setStep] = React.useState('review'); // review | approved
  return (
    <div style={{ padding: '28px 22px 60px', background: 'var(--surface-2)', minHeight: '100%' }}>
      <div style={{ maxWidth: 620, margin: '0 auto' }}>
        <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)', textAlign: 'center', marginBottom: 10, letterSpacing: 0.4 }}>
          tradesflow.app/q/abc8f2 - shared with {job.customer}
        </div>

        <div data-tour="approval-card" style={{
          border: '1px solid var(--border)', borderRadius: 14, background: 'var(--surface)',
          overflow: 'hidden', boxShadow: '0 20px 60px -30px rgba(20,18,12,0.25)',
        }}>
          <div style={{ padding: '20px 24px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 34, height: 34, background: 'var(--ink)', borderRadius: 8, display: 'grid', placeItems: 'center' }}>
              <div style={{ width: 11, height: 11, border: '2px solid var(--paper)', borderRadius: 2, transform: 'rotate(45deg)' }} />
            </div>
            <div>
              <div style={{ fontWeight: 600, fontSize: 14 }}>{BUSINESS.name}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-60)' }}>Quote for {job.customer}</div>
            </div>
            <div style={{ flex: 1 }} />
            {step === 'review' ? <Chip tone="accent">Awaiting response</Chip> : <Chip tone="sage" icon="check">Approved</Chip>}
          </div>

          <div style={{ padding: '20px 24px' }}>
            <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)', letterSpacing: 0.4, marginBottom: 4 }}>JOB {job.id}</div>
            <h1 style={{ fontSize: 26, fontWeight: 500, letterSpacing: -0.4, margin: '0 0 6px', fontFamily: 'var(--display)', textWrap: 'balance' }}>{job.title}</h1>
            <div style={{ fontSize: 13, color: 'var(--ink-70)', marginBottom: 14 }}>{job.address}</div>
            <p style={{ fontSize: 13, color: 'var(--ink-80)', lineHeight: 1.6, margin: 0, textWrap: 'pretty' }}>{job.description}</p>
          </div>

          <div style={{ padding: '0 24px 20px' }}>
            <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)', letterSpacing: 0.4, marginBottom: 8, textTransform: 'uppercase' }}>What's included</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              {items.slice(0, 6).map((it, i) => (
                <div key={i} style={{ padding: '10px 14px', borderBottom: i < 5 ? '1px solid var(--border)' : 'none', display: 'flex', justifyContent: 'space-between', gap: 10, alignItems: 'center', fontSize: 12.5 }}>
                  <div style={{ color: 'var(--ink-80)', flex: 1 }}>{it.text}</div>
                  <div style={{ fontFamily: 'var(--mono)', color: 'var(--ink-70)', whiteSpace: 'nowrap' }}>{fmtAUDcents(it.total)}</div>
                </div>
              ))}
              {items.length > 6 && <div style={{ padding: '8px 14px', fontSize: 11, color: 'var(--ink-60)', fontFamily: 'var(--mono)', background: 'var(--surface-2)' }}>+ {items.length - 6} more line items · see PDF</div>}
            </div>

            <div style={{ marginTop: 14, padding: 14, borderRadius: 10, background: 'var(--surface-2)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)' }}>TOTAL INC-GST</div>
                <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: -0.4, fontFamily: 'var(--display)' }}>{fmtAUDcents(summary.total)}</div>
                <div style={{ fontSize: 11, color: 'var(--ink-60)' }}>Subtotal {fmtAUDcents(summary.subtotal)} · GST {fmtAUDcents(summary.gst)}</div>
              </div>
              <div style={{ fontSize: 11, color: 'var(--ink-60)', textAlign: 'right', fontFamily: 'var(--mono)', lineHeight: 1.6 }}>
                Valid 14 days<br/>Offer expires 1 May<br/>{trade.licence}
              </div>
            </div>
          </div>

          {step === 'review' ? (
            <div style={{ padding: '0 24px 24px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <div data-tour="approve-btn"><Btn variant="primary" size="lg" icon="check" onClick={() => setStep('approved')}>Approve & book in</Btn></div>
              <Btn variant="secondary" size="lg" icon="pencil">Ask a question</Btn>
            </div>
          ) : (
            <div style={{ padding: '0 24px 24px' }}>
              <div style={{ padding: 16, borderRadius: 10, background: 'var(--sage-tint)', border: '1px solid var(--sage-border)', textAlign: 'center' }}>
                <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--sage-ink)' }}>Approved. {BUSINESS.admin || 'The admin'} will be in touch within the hour to schedule.</div>
                <div data-tour="see-invoice-btn" style={{ display: 'inline-block', marginTop: 12 }}>
                  <Btn variant="secondary" size="md" onClick={() => setState(s => ({ ...s, screen: 'invoice' }))}>See the invoice (demo)</Btn>
                </div>
              </div>
            </div>
          )}
        </div>

        <div style={{ textAlign: 'center', fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-50)', marginTop: 14 }}>
          No account needed · SMS-first · Signed on approval
        </div>
      </div>
    </div>
  );
}

// Onboarding - 3 step setup
function Onboarding({ state, setState }) {
  const [step, setStep] = React.useState(0);
  const steps = [
    { title: 'What trade are you?', sub: 'We\'ll seed line-item rates and compliance fields to match.' },
    { title: 'Who\'s on the team?', sub: 'Just invite the admin + 1-2 techs to start.' },
    { title: 'Connect your tools', sub: 'Xero, SMS, payment - optional. Can do later.' },
  ];
  return (
    <div style={{ padding: '40px 22px 60px', maxWidth: 760, margin: '0 auto' }}>
      <div style={{ display: 'flex', gap: 4, marginBottom: 26 }}>
        {steps.map((_, i) => <div key={i} style={{ flex: 1, height: 4, borderRadius: 2, background: i <= step ? 'var(--ink)' : 'var(--surface-3)' }}/>)}
      </div>
      <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)', letterSpacing: 0.4, textTransform: 'uppercase' }}>Step {step + 1} of {steps.length}</div>
      <h1 style={{ fontSize: 34, fontWeight: 500, letterSpacing: -0.7, margin: '8px 0 8px', fontFamily: 'var(--display)', textWrap: 'balance' }}>{steps[step].title}</h1>
      <p style={{ fontSize: 15, color: 'var(--ink-70)', margin: '0 0 26px' }}>{steps[step].sub}</p>

      {step === 0 && (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {Object.values(TRADES).map(t => (
            <button key={t.id} onClick={() => setState(s => ({ ...s, tradeId: t.id }))} style={{
              padding: 16, borderRadius: 12, border: `1px solid ${state.tradeId === t.id ? 'var(--ink)' : 'var(--border)'}`,
              background: state.tradeId === t.id ? 'var(--ink)' : 'var(--surface)', color: state.tradeId === t.id ? 'var(--paper)' : 'var(--ink)',
              cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--sans)',
            }}>
              <Icon name={t.icon} size={20}/>
              <div style={{ fontSize: 14, fontWeight: 500, marginTop: 10 }}>{t.longLabel}</div>
              <div style={{ fontSize: 11, color: state.tradeId === t.id ? 'rgba(255,255,255,0.7)' : 'var(--ink-60)', marginTop: 2, fontFamily: 'var(--mono)' }}>{t.licence}</div>
            </button>
          ))}
        </div>
      )}
      {step === 1 && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[{ n: 'Ellie Hartley', r: 'Admin (you)', e: 'ellie@hartleytrades.com.au' }, { n: 'Dan Hartley', r: 'Owner + field tech', e: 'dan@hartleytrades.com.au' }, { n: 'Dinesh Nair', r: 'Field tech · L2 electrician', e: 'dinesh@hartleytrades.com.au' }].map((m, i) => (
            <div key={i} style={{ padding: 14, borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface)', display: 'flex', alignItems: 'center', gap: 12 }}>
              <Avatar initials={m.n.split(' ').map(x => x[0]).join('')} size={34}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{m.n}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-60)' }}>{m.r} · {m.e}</div>
              </div>
              <Chip tone="sage" icon="check">Invited</Chip>
            </div>
          ))}
          <button style={{ padding: '12px 14px', borderRadius: 10, border: '1px dashed var(--border-strong)', background: 'transparent', color: 'var(--ink-60)', cursor: 'pointer', fontSize: 13, fontFamily: 'var(--sans)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
            <Icon name="plus" size={13}/> Invite another teammate
          </button>
        </div>
      )}
      {step === 2 && (
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { n: 'Xero', d: 'Push invoices, auto-reconcile BAS', c: true },
            { n: 'Twilio SMS', d: 'Quote approvals via text', c: true },
            { n: 'Stripe', d: 'Card payments (1.4% surcharge)', c: false },
            { n: 'Google Calendar', d: '2-way sync for schedule', c: false },
          ].map(i => (
            <div key={i.n} style={{ padding: 16, borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{i.n}</div>
                {i.c ? <Chip tone="sage" icon="check">Connected</Chip> : <Btn size="sm" variant="secondary">Connect</Btn>}
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-60)' }}>{i.d}</div>
            </div>
          ))}
        </div>
      )}

      <div style={{ marginTop: 28, display: 'flex', gap: 8 }}>
        {step > 0 && <Btn variant="secondary" onClick={() => setStep(step - 1)} icon="arrow-left">Back</Btn>}
        <div style={{ flex: 1 }}/>
        {step < 2 ? <Btn variant="primary" iconRight="arrow-right" onClick={() => setStep(step + 1)}>Continue</Btn>
          : <Btn variant="primary" icon="check" onClick={() => setState(s => ({ ...s, screen: 'pipeline' }))}>Open my pipeline →</Btn>}
      </div>
    </div>
  );
}

// Settings
function Settings({ state, setState }) {
  const trade = TRADES[state.tradeId];
  const [tab, setTab] = React.useState('business');
  const tabs = [
    { id: 'business', label: 'Business details' },
    { id: 'trades', label: 'Trade & line-item rates' },
    { id: 'ai', label: 'AI quote settings' },
    { id: 'templates', label: 'Templates · SMS, email' },
    { id: 'integrations', label: 'Integrations' },
    { id: 'team', label: 'Team & permissions' },
  ];
  return (
    <div style={{ padding: '22px 28px 60px', display: 'grid', gridTemplateColumns: '220px 1fr', gap: 28, maxWidth: 1040, margin: '0 auto' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} style={{
            padding: '9px 10px', borderRadius: 7, border: 'none',
            background: tab === t.id ? 'var(--surface-2)' : 'transparent',
            color: tab === t.id ? 'var(--ink)' : 'var(--ink-70)', fontWeight: tab === t.id ? 500 : 400,
            cursor: 'pointer', fontSize: 13, textAlign: 'left', fontFamily: 'var(--sans)',
          }}>{t.label}</button>
        ))}
      </div>

      <div>
        {tab === 'business' && (
          <div>
            <h2 style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, margin: '0 0 16px', fontFamily: 'var(--display)' }}>Business details</h2>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {[['Business name', BUSINESS.name], ['ABN', BUSINESS.abn], ['Primary trade', trade.longLabel], ['Licence', trade.licence], ['City', BUSINESS.city], ['Admin contact', BUSINESS.email]].map(([l, v]) => (
                <div key={l}>
                  <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)', textTransform: 'uppercase', letterSpacing: 0.4, marginBottom: 4 }}>{l}</div>
                  <input defaultValue={v} style={inp}/>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 14, padding: 14, borderRadius: 10, background: 'var(--accent-tint)', border: '1px solid var(--accent-border)', fontSize: 12, color: 'var(--accent-ink)', lineHeight: 1.6 }}>
              GST is itemized on all quotes and invoices automatically. Set PayID/BPAY details under <em>Templates</em>.
            </div>
          </div>
        )}
        {tab === 'ai' && (
          <div>
            <h2 style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, margin: '0 0 16px', fontFamily: 'var(--display)' }}>AI quote settings</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { t: 'Use photos as vision input', d: 'Claude reads the photos alongside your notes.', on: true },
                { t: 'Ask clarifying questions', d: 'e.g. asbestos, heritage, neighbour access.', on: true },
                { t: 'Default margin', d: `Applied to labour lines - currently 28%`, on: true },
                { t: 'Auto-add {trade} compliance line', d: 'ARCtick, CoES, CEC - per trade.', on: true },
                { t: 'Regenerate confirms before replacing', d: 'Prevents losing your edits.', on: true },
              ].map(r => <Toggle key={r.t} {...r} />)}
            </div>
          </div>
        )}
        {tab === 'integrations' && (
          <div>
            <h2 style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, margin: '0 0 16px', fontFamily: 'var(--display)' }}>Integrations</h2>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              {[
                { n: 'Xero', d: 'Accounting + BAS', c: true },
                { n: 'Twilio SMS', d: 'Quote + invoice reminders', c: true },
                { n: 'Stripe', d: 'Card payments', c: false },
                { n: 'Google Calendar', d: '2-way schedule sync', c: false },
                { n: 'SharpSpring', d: 'Lead capture from web', c: false },
                { n: 'ARCtick', d: 'Refrigerant logging (HVAC)', c: trade.id === 'hvac' },
              ].map(i => (
                <div key={i.n} style={{ padding: 14, borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface)' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div style={{ fontSize: 14, fontWeight: 500 }}>{i.n}</div>
                    {i.c ? <Chip tone="sage" icon="check">Connected</Chip> : <Btn size="sm" variant="secondary">Connect</Btn>}
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 4 }}>{i.d}</div>
                </div>
              ))}
            </div>
          </div>
        )}
        {(tab === 'trades' || tab === 'templates' || tab === 'team') && (
          <div>
            <h2 style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.4, margin: '0 0 16px', fontFamily: 'var(--display)' }}>{tabs.find(t => t.id === tab).label}</h2>
            <div style={{ padding: 24, border: '1px dashed var(--border-strong)', borderRadius: 12, textAlign: 'center', color: 'var(--ink-60)', fontSize: 13 }}>
              This section works in the demo - data seeded per trade. {tab === 'trades' && `Labour rates, materials, markup, per ${trade.unit}.`} {tab === 'templates' && 'Quote SMS, approval link text, invoice reminders.'} {tab === 'team' && 'Admin, field tech, read-only roles with field-level permissions.'}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
const inp = { width: '100%', padding: '8px 10px', borderRadius: 7, border: '1px solid var(--border)', background: 'var(--surface)', fontSize: 13, fontFamily: 'var(--sans)', outline: 'none', boxSizing: 'border-box' };
function Toggle({ t, d, on }) {
  const [v, setV] = React.useState(on);
  return (
    <div style={{ padding: '12px 14px', borderRadius: 10, border: '1px solid var(--border)', background: 'var(--surface)', display: 'flex', alignItems: 'center', gap: 12 }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 13, fontWeight: 500 }}>{t}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 2 }}>{d}</div>
      </div>
      <button onClick={() => setV(!v)} style={{
        width: 36, height: 20, borderRadius: 20, border: 'none',
        background: v ? 'var(--ink)' : 'var(--surface-3)', cursor: 'pointer',
        position: 'relative', padding: 2,
      }}>
        <div style={{ width: 16, height: 16, borderRadius: 8, background: 'var(--paper)', position: 'absolute', top: 2, left: v ? 18 : 2, transition: 'left 120ms ease' }}/>
      </button>
    </div>
  );
}

// Capabilities page
function Capabilities({ state, setState }) {
  return (
    <div style={{ padding: '40px 22px 80px', maxWidth: 840, margin: '0 auto' }}>
      <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-60)', letterSpacing: 0.4, textTransform: 'uppercase' }}>From Ankith · freelance developer · Hyderabad</div>
      <h1 style={{ fontSize: 44, fontWeight: 500, letterSpacing: -1, margin: '12px 0 16px', fontFamily: 'var(--display)', textWrap: 'balance' }}>What I can actually build for your {TRADES[state.tradeId].label.toLowerCase()} business.</h1>
      <p style={{ fontSize: 16, color: 'var(--ink-70)', lineHeight: 1.6, margin: '0 0 10px', maxWidth: 640 }}>
        This demo is one working slice. If we decide to work together, I build the specific version <em>your</em> business needs, you own the code, and I charge you once - not per-seat-per-month forever.
      </p>
      <p style={{ fontSize: 14, color: 'var(--ink-60)', lineHeight: 1.6, margin: '0 0 32px', maxWidth: 640, padding: '12px 16px', background: 'var(--accent-tint)', border: '1px solid var(--accent-border)', borderRadius: 10 }}>
        <strong style={{ color: 'var(--ink)' }}>Honesty clause:</strong> if you have 1–3 people and simple workflows, I'll tell you to go buy ServiceM8. Custom software only makes sense once generic tools become friction.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 40 }}>
        {[
          { t: 'AI quote generation from photos', d: 'The feature you just saw. Tuned to your trade\'s pricing and vocabulary.', k: ['Claude vision', 'per-trade rate sheets', 'clarifying Qs'] },
          { t: 'Xero sync', d: 'Push invoices, pull payments, reconcile BAS. One-click quarterly report.', k: ['two-way sync', 'BAS export', 'GST itemized'] },
          { t: 'SMS approvals', d: 'Customer gets a text with a link. They click approve. Done. No sign-in.', k: ['Twilio', 'signed link', 'audit trail'] },
          { t: 'Compliance per trade', d: 'ARCtick for HVAC, CoES for sparkies, CEC for solar - auto-generated per job.', k: ['ARCtick', 'CoES', 'CEC', 'MPL'] },
          { t: 'Customer portal', d: 'Past jobs, warranty docs, maintenance schedule. Post-approval only.', k: ['magic link', 'no account', 'per-customer'] },
          { t: 'Dispatch board', d: 'Drag jobs onto techs/days. SMS confirmations. Proximity routing.', k: ['map-aware', 'drag+drop', 'route order'] },
          { t: 'Subcontractor coordination', d: 'Invite an L2 sparkie to a job with scoped-only visibility.', k: ['scoped view', 'partial invoicing'] },
          { t: 'Custom reporting / KPIs', d: 'Whatever number you actually track. Won jobs, avg margin, tech utilization.', k: ['CSV + PDF', 'per-tech', 'per-customer'] },
        ].map(c => (
          <div key={c.t} style={{ padding: 18, borderRadius: 12, border: '1px solid var(--border)', background: 'var(--surface)' }}>
            <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 6, letterSpacing: -0.1 }}>{c.t}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-70)', lineHeight: 1.55, marginBottom: 10, textWrap: 'pretty' }}>{c.d}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {c.k.map(k => <span key={k} style={{ fontSize: 10.5, fontFamily: 'var(--mono)', color: 'var(--ink-60)', padding: '1px 6px', background: 'var(--surface-2)', borderRadius: 4, border: '1px solid var(--border)' }}>{k}</span>)}
            </div>
          </div>
        ))}
      </div>

      <div style={{ padding: 24, borderRadius: 12, background: 'var(--ink)', color: 'var(--paper)' }}>
        <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'rgba(255,245,225,0.6)', letterSpacing: 0.4, marginBottom: 8 }}>THE PITCH</div>
        <div style={{ fontSize: 22, fontWeight: 400, letterSpacing: -0.3, lineHeight: 1.4, fontFamily: 'var(--display)', marginBottom: 16, textWrap: 'balance' }}>
          Most custom builds run $3–8k. Delivered in 3–5 weeks. You own the code.
        </div>
        <div style={{ fontSize: 14, color: 'rgba(255,245,225,0.75)', lineHeight: 1.6, marginBottom: 20, maxWidth: 560 }}>
          I do the discovery call. We spec what actually matters. I build it. You run it forever without paying a SaaS tax. If something breaks in year two, I'm an email away and you decide if you want me to fix it or hand it to anyone else.
        </div>
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <a href={`mailto:ankithc3@gmail.com?subject=Saw%20the%20demo%20-%20let%27s%20talk`} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 18px', borderRadius: 9, background: 'var(--accent)', color: '#2A1A04', textDecoration: 'none', fontSize: 14, fontWeight: 500 }}>
            <Icon name="mail" size={14}/> ankithc3@gmail.com
          </a>
          <Btn variant="secondary" size="lg" onClick={() => setState(s => ({ ...s, screen: 'pipeline' }))} style={{ background: 'transparent', color: 'var(--paper)', borderColor: 'rgba(255,245,225,0.25)' }}>← Back to the demo</Btn>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FieldTechMobile, CustomerApproval, Onboarding, Settings, Capabilities });