// Field app — the signature voice-first field capture (mobile).
function FieldApp() {
  const globeRef = React.useRef(null);
  React.useEffect(() => {
    if (globeRef.current && window.OpsGlobe) window.OpsGlobe.init(globeRef.current);
  }, []);
  return (
    <div className="view"><div className="field-stage">
      <canvas ref={globeRef} className="globe" data-ops-globe data-points="280" data-active="5"></canvas>

      <div className="field-copy">
        <div className="eyebrow">Field app · Building managers & trades</div>
        <h1>Log it by voice. <em>On a ladder.</em></h1>
        <p>Competitors built portals nobody opens on site. Opsmera captures the job by voice in 20 seconds, with photo evidence, and the paper trail writes itself.</p>
        <div className="steps">
          <div className="st"><span className="n">01</span><span>Tap, speak the fault. AI fills the work order as you talk.</span></div>
          <div className="st"><span className="n">02</span><span>Snap photos. They attach to the job and the logbook.</span></div>
          <div className="st"><span className="n">03</span><span>Sign-off triggers the compliant hardcopy pack automatically.</span></div>
        </div>
      </div>

      <div className="phone">
        <div className="notch"></div>
        <div className="screen">
          <div className="fa-top">
            <div className="b"><img src="../assets/mark-white.svg" alt="" />OPSMERA</div>
            <div className="loc">Harbourview · Block B</div>
          </div>
          <div className="fa-body">
            <div className="lab">New work order · by voice</div>
            <h2>Fire panel <em style={{ fontStyle: 'italic' }}>fault</em></h2>
            <div className="fa-transcript">
              <div className="live"><span className="d" />Listening</div>
              "Basement Block B, the fire panel's showing an earth fault on loop two, isolation alarm went off about 2am. Need a fire tech out today, AFSS is due in a couple of weeks."
            </div>
            <div className="fa-tags">
              <Tag prio="p1" />
              <Tag stage="triaged">Fire safety</Tag>
              <Tag stage="triaged">AS 1851</Tag>
              <Tag stage="triaged">Loop 2</Tag>
            </div>
            <div className="fa-photo">
              <div className="ph"><Icon name="image" /></div>
              <div className="ph add" onClick={() => act('Camera', { kind: 'info', icon: 'camera', sub: 'Attach photo evidence to the job' })}><Icon name="plus" /></div>
            </div>
          </div>
          <div className="fa-foot">
            <div className="mic" onClick={() => act('Listening…', { kind: 'auto', icon: 'mic', sub: 'Speak the fault — AI fills the work order' })}><Icon name="mic" /></div>
            <div className="save"><button className="btn btn-primary" onClick={() => act('Work order logged', { kind: 'resolved', sub: 'P1 · Fire panel fault · Harbourview Block B' })}>Log work order</button></div>
          </div>
        </div>
      </div>
    </div></div>
  );
}
Object.assign(window, { FieldApp });