// direction-a-fieldmode.jsx — "On the job" / Field Mode section.
// Synced to CURRENT project_blackdevil source (July 2026):
//   Screen 1 (Arrival)    ← src/components/arrived-flow/ArrivalScreen.tsx
//   Screen 2 (In Progress)← src/components/arrived-flow/InProgressScreen.tsx
//     NOTE: this screen has NO voice/mic hero — it's a plain timer + photo
//     tags + notes textarea + materials checklist. The old mockup showed a
//     "Live Job" voice cockpit that TodaySurface.tsx's own comments mark as
//     the legacy "v1 Open Live Job" — a separate, still-reachable but
//     unconverted door, not what starting a job from Arrival leads to. This
//     rebuild matches the screen the primary Start-Job path actually shows.
//   Screens 3/4 (Wrap-up/Complete) ← src/components/JobCompletionSheet.tsx
//     (confirmed real: hours/materials review, "While you were there"
//     cross-sell, send/cash/draft payment chooser — exact copy for the
//     completion-tag chips wasn't verifiable in source, so that part is
//     generalized rather than invented).
// None of these three files use Shift Board tokens yet — they're still on
// the older dark palette (ArrivalScreen/InProgressScreen: pre-Rams "Refined
// Industrial" tokens; JobCompletionSheet: Rams). All now repaint with the
// July 2 brand-color unification (--brand / --brand-rams → new orange).

// Field-mode palette — resolved 1:1 from arrived-flow's REAL tokens
// (arrived-flow/types.ts → globals.css :root, the pre-Rams "Refined
// Industrial" block that ArrivalScreen/InProgressScreen still use).
const FM = {
  bg: '#0a0a0b',                 // --app-bg
  raised: '#121110',             // --surface-raised (darker/plainer than the warm Rams #22201c)
  raised2: '#1a1a1a',            // --surface-overlay
  border: '#272727',             // --border-default
  borderSubtle: 'rgba(255,255,255,0.1)', // --border-subtle
  brand: '#ff5c00',              // --brand (July 2 unification)
  brandDark: '#d35400',
  brandMuted: 'rgba(255,92,0,0.12)',
  brandBorder: 'rgba(255,92,0,0.3)',
  success: '#10b981',            // --success
  successDark: '#059669',
  successMuted: 'rgba(16,185,129,0.12)',
  successBorder: 'rgba(16,185,129,0.2)',
  danger: '#ef4444',
  warn: '#fbbf24',
  blue: '#06B6D4',                // On My Way / Send ETA — hardcoded in ArrivalScreen
  blueMuted: 'rgba(6,182,212,0.10)',
  blueBorder: 'rgba(6,182,212,0.25)',
  text: '#ffffff',                // --text-primary
  text2: '#c2c8d1',               // --text-secondary
  text3: '#9ca3af',               // --text-tertiary
  font: "'Inter', -apple-system, system-ui, sans-serif",
};

function FMStatusBar() {
  return (
    <div style={{
      height: 44, flexShrink: 0, display: 'flex', alignItems: 'flex-end',
      justifyContent: 'space-between', padding: '0 22px 5px',
      fontSize: 13, fontWeight: 600, color: FM.text,
    }}>
      <span>9:41</span>
      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <Icon name="signal" size={14} color={FM.text}/>
        <Icon name="wifi" size={14} color={FM.text}/>
        <Icon name="battery-full" size={16} color={FM.text}/>
      </div>
    </div>
  );
}

// ─── Screen 1: Arrival (ArrivalScreen.tsx) ───
function FMArrival() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: FM.bg, color: FM.text, fontFamily: FM.font }}>
      <FMStatusBar/>

      {/* Arrival banner (arrived = green) */}
      <div style={{
        padding: 18, textAlign: 'center',
        borderBottom: `1px solid ${FM.successBorder}`,
        background: 'linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04))',
      }}>
        <div style={{
          width: 50, height: 50, borderRadius: '50%', margin: '0 auto 9px',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: `linear-gradient(135deg, ${FM.success}, ${FM.successDark})`,
          boxShadow: `0 0 30px rgba(16,185,129,0.3)`,
        }}>
          <Icon name="map-pin" size={23} color="#fff"/>
        </div>
        <h2 style={{ fontSize: 20, fontWeight: 800, margin: '0 0 2px' }}>You've arrived</h2>
        <p style={{ fontSize: 15, color: FM.text3, margin: 0 }}>2847 Birch Ln</p>
      </div>

      <div style={{ flex: 1, overflow: 'hidden', padding: '14px 16px' }}>
        {/* Customer card */}
        <div style={{
          background: FM.raised, border: `1px solid ${FM.border}`,
          borderRadius: 16, padding: '13px 15px', marginBottom: 11,
        }}>
          <h3 style={{ fontSize: 18, fontWeight: 800, margin: '0 0 2px' }}>Aria Russell</h3>
          <p style={{ fontSize: 14, color: FM.text3, margin: '0 0 10px' }}>4 previous jobs · $4,820 lifetime</p>
          <div style={{ height: 1, background: FM.border, marginBottom: 10 }}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
            {[
              ['wrench', 'AC condenser — not cooling'],
              ['clock', 'Scheduled 9:00 AM · est. 2 hrs'],
              ['dollar-sign', '$420 quoted'],
            ].map(([ic, tx], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name={ic} size={13} color={FM.text3}/>
                <span style={{ fontSize: 14, color: FM.text2 }}>{tx}</span>
              </div>
            ))}
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
              <Icon name="file-text" size={13} color={FM.brand} style={{ marginTop: 2 }}/>
              <span style={{ fontSize: 14, color: FM.brand, fontStyle: 'italic', lineHeight: 1.4 }}>
                Gate code 4417 · dog in yard
              </span>
            </div>
          </div>
        </div>

        {/* Quick actions */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 8 }}>
          {[['message-square', 'Text Aria'], ['phone', 'Call Aria']].map(([ic, tx], i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              padding: 13, borderRadius: 12, border: `1px solid ${FM.border}`,
              background: FM.raised, color: FM.text2, fontSize: 14, fontWeight: 600,
            }}>
              <Icon name={ic} size={14} color={FM.text2}/>{tx}
            </div>
          ))}
        </div>

        {/* Send ETA & Navigate — cyan choreographed text-then-map action,
            distinct from the quick actions above (confirmed real, was
            missing from earlier mockups). */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          padding: 13, borderRadius: 12, border: `1px solid ${FM.blueBorder}`,
          background: FM.blueMuted, color: FM.blue, fontSize: 14, fontWeight: 600, marginBottom: 11,
        }}>
          <Icon name="send" size={13} color={FM.blue}/>Send ETA (12 min) &amp; Navigate
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{ padding: '12px 16px 18px', borderTop: `1px solid ${FM.borderSubtle}`, flexShrink: 0 }}>
        <div style={{
          padding: 14, borderRadius: 10, background: FM.brand, color: '#fff',
          fontSize: 17, fontWeight: 600, display: 'flex', alignItems: 'center',
          justifyContent: 'center', gap: 8,
        }}>
          <Icon name="clock" size={16} color="#fff"/>Start Job Timer
        </div>
      </div>
    </div>
  );
}

// ─── Screen 2: In Progress (InProgressScreen.tsx) ───
// The REAL screen: timer header w/ progress bar, tagged photo grid, a plain
// notes textarea, and a materials checklist — no voice assistant.
function FMInProgress() {
  const photos = [
    { label: 'Before', has: true },
    { label: 'During', has: false },
  ];
  const materials = [
    { name: 'Smart thermostat (Ecobee)', cost: '$185.00', preloaded: true, used: true },
    { name: '18-gauge thermostat wire, 25ft', cost: '$12.50', preloaded: false },
  ];
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: FM.bg, color: FM.text, fontFamily: FM.font }}>
      <FMStatusBar/>

      {/* Timer header */}
      <div style={{
        background: 'linear-gradient(180deg, rgba(255,92,0,0.10), transparent)',
        padding: '14px 18px', borderBottom: `1px solid ${FM.borderSubtle}`, flexShrink: 0,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
          <div style={{ minWidth: 0 }}>
            <p style={{ fontSize: 12.5, fontWeight: 700, color: FM.brand, margin: '0 0 2px', textTransform: 'uppercase', letterSpacing: '0.08em' }}>In Progress</p>
            <h3 style={{ fontSize: 16, fontWeight: 800, margin: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>AC condenser — not cooling</h3>
          </div>
          <div style={{
            background: FM.raised, border: `1px solid ${FM.brandBorder}`, borderRadius: 12,
            padding: '6px 12px', display: 'flex', alignItems: 'center', gap: 7, flexShrink: 0,
          }}>
            <span style={{ width: 7, height: 7, borderRadius: '50%', background: FM.success }}/>
            <span style={{ fontSize: 16, fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>34:12</span>
            <Icon name="pause" size={12} color={FM.text3}/>
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ flex: 1, height: 4, borderRadius: 4, background: FM.border, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: '28%', borderRadius: 4, background: FM.brand }}/>
          </div>
          <span style={{ fontSize: 11, color: FM.text3, fontWeight: 600, flexShrink: 0 }}>Est. 2 hrs</span>
        </div>
      </div>

      {/* Scrollable content */}
      <div style={{ flex: 1, overflow: 'hidden', padding: '14px 18px' }}>
        {/* Job Photos */}
        <div style={{ marginBottom: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 9 }}>
            <h4 style={{ fontSize: 14.5, fontWeight: 700, margin: 0 }}>Job Photos</h4>
            <span style={{ fontSize: 12.5, color: FM.text3, fontWeight: 600 }}>1 captured</span>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <div style={{
              width: 58, height: 58, borderRadius: 10, border: `1px solid ${FM.border}`, flexShrink: 0,
              position: 'relative', overflow: 'hidden',
              background: 'linear-gradient(135deg, #1e1e1e, #121110)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="camera" size={16} color={FM.text3}/>
              <span style={{
                position: 'absolute', bottom: 3, left: 3, right: 3, fontSize: 9, color: '#fff', fontWeight: 600,
                textAlign: 'center', background: 'rgba(0,0,0,0.55)', borderRadius: 4, padding: '1px 2px',
              }}>Before</span>
            </div>
            <div style={{
              width: 58, height: 58, borderRadius: 10, border: `2px dashed ${FM.border}`, flexShrink: 0,
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 3, color: FM.text3,
            }}>
              <Icon name="camera" size={15} color={FM.text3}/>
              <span style={{ fontSize: 9.5, fontWeight: 700 }}>Add</span>
            </div>
          </div>
        </div>

        {/* Job Notes */}
        <div style={{ marginBottom: 16 }}>
          <h4 style={{ fontSize: 14.5, fontWeight: 700, margin: '0 0 8px' }}>Job Notes</h4>
          <div style={{
            width: '100%', minHeight: 52, background: FM.raised, border: `1px solid ${FM.border}`,
            borderRadius: 12, padding: 11, color: FM.text3, fontSize: 13, lineHeight: 1.5,
          }}>
            Capacitor read low on arrival — replacing 45/5 MFD dual-run. Customer mentioned a burning smell last week.
          </div>
        </div>

        {/* Materials Used */}
        <div>
          <h4 style={{ fontSize: 14.5, fontWeight: 700, margin: '0 0 8px' }}>Materials Used</h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            {materials.map((m, i) => (
              <div key={i} style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '9px 11px',
                background: m.used ? FM.successMuted : FM.raised,
                border: `1px solid ${m.used ? FM.successBorder : FM.border}`, borderRadius: 8,
              }}>
                <span style={{ fontSize: 13, color: m.used ? FM.success : FM.text2, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon name="check-circle" size={13} color={m.used ? FM.success : FM.text3}/>
                  {m.name}
                </span>
                <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ fontSize: 13, color: FM.text3, fontWeight: 600 }}>{m.cost}</span>
                  {m.preloaded && (
                    <span style={{ fontSize: 9.5, fontWeight: 700, color: FM.brand, background: FM.brandMuted, padding: '2px 6px', borderRadius: 4, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Pre-loaded</span>
                  )}
                </span>
              </div>
            ))}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: 9,
              border: `1px dashed ${FM.border}`, borderRadius: 8, color: FM.text3, fontSize: 13, fontWeight: 600,
            }}>
              <Icon name="plus" size={12} color={FM.text3}/>Add material
            </div>
          </div>
        </div>
      </div>

      {/* Bottom CTA */}
      <div style={{ padding: '12px 18px', paddingBottom: 18, borderTop: `1px solid ${FM.borderSubtle}`, flexShrink: 0 }}>
        <div style={{
          width: '100%', padding: '12px 16px', borderRadius: 14,
          border: `1px solid ${FM.brandBorder}`, background: FM.brandMuted, color: FM.brand,
          fontSize: 14.5, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          marginBottom: 9,
        }}>
          <Icon name="alert-triangle" size={14} color={FM.brand}/>Found Additional Work
        </div>
        <div style={{
          width: '100%', padding: 13, borderRadius: 12,
          background: `linear-gradient(135deg, ${FM.success}, ${FM.successDark})`, color: '#fff',
          fontSize: 15.5, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
        }}>
          <Icon name="check-circle" size={14} color="#fff"/>Complete Job
        </div>
      </div>
    </div>
  );
}

// Shared dimmed backdrop + bottom-sheet shell for the completion screens.
function FMSheetBackdrop() {
  return (
    <React.Fragment>
      <div style={{ position: 'absolute', inset: 0, background: FM.bg }}>
        <FMStatusBar/>
        <div style={{ padding: '8px 18px', opacity: 0.4 }}>
          <div style={{ height: 28, width: 90, borderRadius: 8, background: FM.raised2, marginBottom: 14 }}/>
          <div style={{ height: 64, borderRadius: 16, background: FM.raised }}/>
        </div>
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(2px)' }}/>
    </React.Fragment>
  );
}

// ─── Screen 3: Wrap-up (JobCompletionSheet.tsx, review step) ───
// Confirmed real: hours + materials review, and the "While you were there"
// cross-sell upsell (verbatim casing/heading from source). The exact
// completion-tag UI wasn't verifiable in source, so this leads with what is.
function FMWrapup() {
  const upsells = [
    ['Hard-start kit', 'Extends compressor life on older units'],
    ['Replace the contactor', 'Common next failure — cheap to do while it’s open'],
  ];
  return (
    <div style={{ height: '100%', position: 'relative', background: FM.bg, fontFamily: FM.font, overflow: 'hidden' }}>
      <FMSheetBackdrop/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, top: 28,
        background: FM.raised, borderTopLeftRadius: 24, borderTopRightRadius: 24,
        display: 'flex', flexDirection: 'column', boxShadow: '0 -12px 40px rgba(0,0,0,0.55)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 9, paddingBottom: 4, flexShrink: 0 }}>
          <div style={{ width: 40, height: 4, borderRadius: 2, background: FM.raised2 }}/>
        </div>

        <div style={{ flex: 1, overflow: 'hidden', padding: '6px 16px 0' }}>
          <div style={{ textAlign: 'center', marginBottom: 14 }}>
            <h2 style={{ fontSize: 19, fontWeight: 800, color: FM.text, margin: '0 0 2px' }}>Review before you go</h2>
            <p style={{ fontSize: 13.5, color: FM.text3, margin: 0 }}>Aria Russell · 34 min on site</p>
          </div>

          {/* Hours + materials summary — JobWorksurface.tsx: "hours/materials adjustment" */}
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <div style={{ flex: 1, border: `1px solid ${FM.border}`, borderRadius: 12, padding: '10px 12px' }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: FM.text3, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Hours</div>
              <div style={{ fontSize: 17, fontWeight: 800, marginTop: 3 }}>0.75 <span style={{ fontSize: 12, fontWeight: 600, color: FM.text3 }}>edit</span></div>
            </div>
            <div style={{ flex: 1, border: `1px solid ${FM.border}`, borderRadius: 12, padding: '10px 12px' }}>
              <div style={{ fontSize: 10.5, fontWeight: 700, color: FM.text3, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Materials</div>
              <div style={{ fontSize: 17, fontWeight: 800, marginTop: 3 }}>$197.50</div>
            </div>
          </div>

          {/* WHILE YOU WERE THERE — confirmed real cross-sell section */}
          <div style={{
            border: `1px solid ${FM.brandBorder}`, borderRadius: 14, padding: 12, marginBottom: 14,
            background: 'rgba(255,92,0,0.05)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10, fontSize: 11.5, fontWeight: 800, letterSpacing: '0.06em', color: FM.brand }}>
              <Icon name="trending-up" size={13} color={FM.brand}/>While you were there
            </div>
            {upsells.map(([t, d], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: i === 0 ? 10 : 0 }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: FM.text }}>{t}</div>
                  <div style={{ fontSize: 12, color: FM.text3, lineHeight: 1.35 }}>{d}</div>
                </div>
                <div style={{ padding: '7px 16px', borderRadius: 8, background: FM.brand, color: '#fff', fontSize: 13, fontWeight: 700, flexShrink: 0 }}>Add</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8, padding: '12px 16px 18px', flexShrink: 0 }}>
          <div style={{ padding: '13px 18px', borderRadius: 10, border: `1px solid ${FM.border}`, background: 'transparent', color: FM.text2, fontSize: 15, fontWeight: 700 }}>Back</div>
          <div style={{
            flex: 1, padding: '13px 0', borderRadius: 10, background: FM.brand, color: '#fff',
            fontSize: 15, fontWeight: 800, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          }}>
            <Icon name="check-circle" size={16} color="#fff"/>Complete &amp; Invoice
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Screen 4: success step — the invoice + send/cash/draft payment chooser
// (JobWorksurface.tsx: "send/cash/draft chooser"). ───
function FMComplete() {
  return (
    <div style={{ height: '100%', position: 'relative', background: FM.bg, fontFamily: FM.font, overflow: 'hidden' }}>
      <FMSheetBackdrop/>
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        background: FM.raised, borderTopLeftRadius: 24, borderTopRightRadius: 24,
        paddingBottom: 18, display: 'flex', flexDirection: 'column',
        boxShadow: '0 -12px 40px rgba(0,0,0,0.55)',
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 10, paddingBottom: 6 }}>
          <div style={{ width: 40, height: 4, borderRadius: 2, background: FM.raised2 }}/>
        </div>

        <div style={{ padding: '6px 18px 0' }}>
          <div style={{ textAlign: 'center', marginBottom: 16 }}>
            <div style={{
              width: 56, height: 56, borderRadius: 14, margin: '0 auto 12px',
              background: FM.successMuted, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name="sparkles" size={28} color={FM.success}/>
            </div>
            <h2 style={{ fontSize: 24, fontWeight: 800, color: FM.text, margin: '0 0 3px', letterSpacing: '-0.02em' }}>Job Complete!</h2>
            <p style={{ fontSize: 14, color: FM.text3, margin: 0 }}>Great work on Aria Russell</p>
          </div>

          <div style={{
            background: FM.successMuted, border: `1px solid ${FM.successBorder}`, borderRadius: 14,
            padding: '14px 16px', marginBottom: 16,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Icon name="check-circle" size={16} color={FM.success}/>
                <span style={{ fontSize: 15, fontWeight: 800, color: FM.success }}>Invoice INV-1042 Ready</span>
              </div>
              <Icon name="chevron-down" size={16} color={FM.text3}/>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
              <span style={{ fontSize: 13.5, color: FM.text3 }}>Review before sending</span>
              <span style={{ fontSize: 26, fontWeight: 800, color: FM.text, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>$617.50</span>
            </div>
          </div>

          <div style={{
            minHeight: 52, padding: 14, borderRadius: 12, background: FM.brand, color: '#fff',
            fontSize: 16, fontWeight: 700, display: 'flex', alignItems: 'center',
            justifyContent: 'center', gap: 8, marginBottom: 8,
          }}>
            <Icon name="send" size={18} color="#fff"/>Send to customer
          </div>
          {[['message-square', 'Text payment link', false], ['check-circle', 'Mark paid (cash)', true], ['file-text', 'Save as draft', false]].map(([ic, label, ok], i) => (
            <div key={i} style={{
              minHeight: 52, padding: 14, borderRadius: 12, border: `1px solid ${FM.border}`,
              background: FM.raised2, color: FM.text, fontSize: 15, fontWeight: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, marginBottom: 8,
            }}>
              <Icon name={ic} size={18} color={ok ? FM.success : FM.text2}/>{label}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const FM_STEPS = [
  { key: 'arrival', label: 'Arrive', title: 'You pull up. Werkd already knows the job.',
    body: 'GPS flips the screen to this job the second you arrive — customer history, the quote, and gate codes, all there. One tap starts the timer.',
    render: () => <FMArrival/> },
  { key: 'inprogress', label: 'Work', title: 'Photos, notes, materials — as you go.',
    body: 'The timer runs while you work. Tag before/after photos, jot a note, check off materials as you use them — everything lands on the invoice automatically.',
    render: () => <FMInProgress/> },
  { key: 'wrapup', label: 'Wrap up', title: 'Werkd spots the work you’d have driven past.',
    body: 'Review the hours and materials it tracked, then "While you were there" surfaces the easy add-ons for THIS job — found money most apps never mention.',
    render: () => <FMWrapup/> },
  { key: 'complete', label: 'Get paid', title: 'Job done. Invoice already built.',
    body: 'Tap complete and the invoice is ready to review. Email it, text a payment link, or mark it paid in cash — before you leave the driveway.',
    render: () => <FMComplete/> },
];

function AFieldMode() {
  const DA = window.DA;
  const m = window.useIsMobile();
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const [typed, setTyped] = React.useState('');

  // Type the body out (~18ms/char) — reads like Werkd's AI narrating the job —
  // then dwell ~2.6s and advance. Paused shows the full text and halts advance.
  React.useEffect(() => {
    const full = FM_STEPS[i].body;
    if (paused) { setTyped(full); return; }
    setTyped('');
    let idx = 0;
    const SPEED = 18;
    const typeId = setInterval(() => {
      idx += 1;
      setTyped(full.slice(0, idx));
      if (idx >= full.length) clearInterval(typeId);
    }, SPEED);
    const advanceId = setTimeout(() => setI((p) => (p + 1) % FM_STEPS.length), full.length * SPEED + 6200);
    return () => { clearInterval(typeId); clearTimeout(advanceId); };
  }, [i, paused]);

  const step = FM_STEPS[i];
  // Derive the active index from `step` itself (which provably tracks the
  // phone + caption) so the rail/progress can't desync from them.
  const fmActive = FM_STEPS.indexOf(step);

  return (
    <section id="fieldmode" style={{
      background: DA.ink, color: '#fff', padding: m ? '64px 20px' : '140px 40px',
      fontFamily: DA.font, position: 'relative', overflow: 'hidden', scrollMarginTop: 64,
    }}>
      <style>{`
@keyframes fmStepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.fm-anim { animation: fmStepIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.08s; }
@keyframes fmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.fm-fade { animation: fmFadeIn 0.6s ease both; }
@keyframes fmCaretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.12; } }
.fm-caret { animation: fmCaretBlink 1.15s ease-in-out infinite; }
`}</style>
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'radial-gradient(70% 50% at 30% 30%, rgba(249,115,22,0.10), transparent 60%)',
      }}/>
      <div style={{ maxWidth: 1120, margin: '0 auto', position: 'relative' }}>
        <div style={{ marginBottom: m ? 36 : 64, maxWidth: 820 }}>
          <div style={{ fontSize: 13, fontWeight: 700, color: DA.brandLight, letterSpacing: '0.16em', marginBottom: 22 }}>
            FIELD MODE
          </div>
          <h2 style={{
            fontSize: m ? 44 : 96, fontWeight: 800, letterSpacing: '-0.045em',
            margin: 0, paddingBottom: '0.1em', lineHeight: 0.96, textWrap: 'balance',
          }}>
            The whole job,<br/>
            <span style={{ color: DA.brandLight }}>on site<ADot dark/></span>
          </h2>
          <p style={{
            fontSize: m ? 16 : 20, lineHeight: 1.5, color: 'rgba(255,255,255,0.65)',
            margin: '24px 0 0', fontWeight: 400, textWrap: 'pretty',
          }}>
            GPS knows the moment you pull up, and werkd takes over the whole visit — one full-screen flow from the driveway to paid. No hunting through menus with dirty hands.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: m ? '1fr' : '380px 1fr', gap: m ? 36 : 72, alignItems: 'center' }}>
          {/* phone */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <PhoneFrame width={330} theme="dark" glow>
              <div key={'fm-phone-' + i} className="fm-fade" style={{ height: '100%' }}>
                {step.render()}
              </div>
            </PhoneFrame>
          </div>

          {/* caption + rail */}
          <div>
            {/* step rail */}
            <div style={{ display: 'flex', gap: 0, marginBottom: 32 }}>
              {FM_STEPS.map((s, idx) => (
                <button key={s.key} onClick={() => { setI(idx); setPaused(true); }} style={{
                  display: 'flex', alignItems: 'center', gap: 0, background: 'none', border: 'none',
                  cursor: 'pointer', padding: 0, flex: idx < FM_STEPS.length - 1 ? 1 : 'none',
                }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
                    <div style={{
                      width: 34, height: 34, borderRadius: '50%',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 14, fontWeight: 800,
                      background: idx === fmActive ? DA.brand : idx < fmActive ? 'rgba(249,115,22,0.2)' : 'rgba(255,255,255,0.08)',
                      color: idx === fmActive ? '#fff' : idx < fmActive ? DA.brandLight : 'rgba(255,255,255,0.5)',
                      border: idx === fmActive ? 'none' : `1px solid rgba(255,255,255,0.14)`,
                      boxShadow: idx === fmActive ? `0 0 0 6px ${DA.brand}22` : 'none',
                      transition: 'all 0.3s',
                    }}>{idx + 1}</div>
                    <span style={{
                      fontSize: 13, fontWeight: idx === fmActive ? 800 : 600, whiteSpace: 'nowrap',
                      color: idx === fmActive ? '#fff' : 'rgba(255,255,255,0.5)',
                    }}>{s.label}</span>
                  </div>
                  {idx < FM_STEPS.length - 1 && (
                    <div style={{ flex: 1, height: 2, margin: '0 8px', marginBottom: 22, background: idx < fmActive ? DA.brand : 'rgba(255,255,255,0.14)', transition: 'all 0.3s' }}/>
                  )}
                </button>
              ))}
            </div>

            <div key={'fm-cap-' + i} className="fm-fade">
              <h3 style={{
                fontSize: m ? 26 : 36, fontWeight: 800, letterSpacing: '-0.025em',
                margin: '0 0 16px', lineHeight: 1.1, textWrap: 'balance',
                minHeight: '2.2em', display: 'flex', alignItems: 'flex-end',
              }}>{step.title}</h3>
              {/* Body types out; a hidden full-text sizer reserves the height so
                  nothing below jumps as lines fill in. minHeight reserves the
                  tallest stage's body so the centered column never re-centers. */}
              <div style={{ position: 'relative', maxWidth: 440, minHeight: m ? 104 : 124 }}>
                <p aria-hidden="true" style={{
                  fontSize: m ? 16 : 19, lineHeight: 1.55, margin: 0,
                  textWrap: 'pretty', visibility: 'hidden',
                }}>{step.body}</p>
                <p style={{
                  position: 'absolute', inset: 0, margin: 0,
                  fontSize: m ? 16 : 19, lineHeight: 1.55, color: 'rgba(255,255,255,0.65)',
                  textWrap: 'pretty',
                }}>{typed}<span className="fm-caret" style={{
                  display: 'inline-block',
                  width: 2, height: '1.05em', background: DA.brandLight,
                  marginLeft: 3, verticalAlign: '-0.18em', borderRadius: 1,
                }}/></p>
              </div>
            </div>

            {/* play / pause the walkthrough */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 28 }}>
              <button onClick={() => setPaused((p) => !p)} style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '9px 16px', borderRadius: 999, cursor: 'pointer',
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.16)',
                color: '#fff', fontSize: 13, fontWeight: 600,
              }}>
                <Icon name={paused ? 'play' : 'pause'} size={13} color="#fff" strokeWidth={2.5}/>
                {paused ? 'Play walkthrough' : 'Pause'}
              </button>
              {!paused && (
                <span style={{ fontSize: 12.5, color: 'rgba(255,255,255,0.4)' }}>Auto-advancing…</span>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AFieldMode = AFieldMode;
window.FMInProgress = FMInProgress;
