// F1 — 現場稽核照片系統 (Mobile flow)
// Step 1 (List) → 2 (Add Section) → 3 (Section detail + photo upload) → 4 (PDF preview)

const D = window.NMYTL_DATA;

// ============ MOBILE: Section list ============
const F1MobileList = ({ caseData, sections, onAdd, onOpen, onPreviewPdf, completion }) => {
  const totalPhotos = sections.reduce((sum, s) => sum + s.photos.length, 0);
  const showCount = completion === 'empty' ? 0 : completion === 'half' ? 2 : sections.length;
  const visible = sections.slice(0, showCount);
  return (
    <div className="phone-content">
      <div className="topbar">
        <button className="icon-btn"><Icon name="arrow_left" size={20} /></button>
        <div style={{ flex: 1 }}>
          <div className="title" style={{ fontSize: 14 }}>現場稽核照片</div>
          <div className="sub">{caseData.caseNo}</div>
        </div>
        <button className="icon-btn"><Icon name="cloud_check" size={18} style={{ color: 'var(--ok)' }} /></button>
        <button className="icon-btn"><Icon name="more" size={20} /></button>
      </div>

      <div className="scroll" style={{ paddingBottom: 96 }}>
        {/* Hero summary */}
        <div className="card" style={{ padding: 14, marginBottom: 14, background: 'var(--surface)' }}>
          <div className="row" style={{ justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <div>
              <div className="text-xs text-muted text-mono">{caseData.auditType} · {caseData.auditDate}</div>
              <div className="text-lg font-semibold" style={{ marginTop: 2 }}>{caseData.operatorName}</div>
              <div className="text-sm text-muted">{caseData.farmName} · {caseData.township}</div>
            </div>
            <span className="status" data-status="in_progress"><span className="dot" />進行中</span>
          </div>
          <div className="divider" />
          <div className="row gap-12" style={{ justifyContent: 'space-around' }}>
            <div style={{ textAlign: 'center' }}>
              <div className="text-2xl font-bold text-mono">{visible.length}</div>
              <div className="text-xs text-muted">地號區塊</div>
            </div>
            <div style={{ width: 1, background: 'var(--line)', alignSelf: 'stretch' }} />
            <div style={{ textAlign: 'center' }}>
              <div className="text-2xl font-bold text-mono">{visible.reduce((s, x) => s + x.photos.length, 0)}</div>
              <div className="text-xs text-muted">張照片</div>
            </div>
            <div style={{ width: 1, background: 'var(--line)', alignSelf: 'stretch' }} />
            <div style={{ textAlign: 'center' }}>
              <div className="text-2xl font-bold text-mono">{visible.reduce((s, x) => s + x.areaHa, 0).toFixed(2)}</div>
              <div className="text-xs text-muted">公頃</div>
            </div>
          </div>
        </div>

        {/* Section list */}
        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
          <div className="text-sm font-semibold">區塊</div>
          <div className="text-xs text-muted">長按可重新排序</div>
        </div>

        {visible.length === 0 ? (
          <div style={{ padding: '40px 16px', textAlign: 'center', border: '1px dashed var(--line)', borderRadius: 'var(--radius-lg)' }}>
            <div style={{ width: 56, height: 56, margin: '0 auto 12px', borderRadius: '50%',
                          background: 'var(--surface-2)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                          color: 'var(--ink-3)' }}>
              <Icon name="camera" size={26} />
            </div>
            <div className="text-sm font-medium">尚未上傳任何地號</div>
            <div className="text-xs text-muted" style={{ marginTop: 4 }}>
              點右下角 + 開始第一個區塊
            </div>
          </div>
        ) : visible.map((s) => (
          <div key={s.id} className="section-card" onClick={() => onOpen(s.id)} style={{ cursor: 'pointer' }}>
            <div className="cover">
              <SatelliteSVG seed={s.orderIndex * 7} label={`${s.sectionName} ${s.parcelNo}`} area={`${s.areaHa.toFixed(4)} ha`} />
              <div style={{ position: 'absolute', top: 8, right: 8, display: 'flex', gap: 4 }}>
                <span className="status" style={{ background: 'rgba(255,255,255,.92)', borderColor: 'transparent' }}>
                  <Icon name="image" size={11} />{s.photos.length}
                </span>
              </div>
              <div style={{ position: 'absolute', top: 8, left: 8 }}>
                <span className="text-mono" style={{
                  background: 'rgba(0,0,0,.6)', color: 'white',
                  padding: '2px 8px', borderRadius: 4, fontSize: 11,
                }}>#{String(s.orderIndex).padStart(2, '0')}</span>
              </div>
            </div>
            <div className="meta">
              <div className="ti">
                {s.sectionName} {s.parcelNo}
              </div>
              <div className="sub">
                <span><Icon name="location" size={11} style={{ marginRight: 2, verticalAlign: -2 }} />{s.township}</span>
                <span>{s.areaHa.toFixed(4)} ha</span>
              </div>
              <div className="row" style={{ marginTop: 8, gap: 6 }}>
                {s.photos.slice(0, 4).map((p, i) => (
                  <div key={p.id} style={{ width: 32, height: 32, borderRadius: 4, overflow: 'hidden',
                                            border: '1px solid var(--line)' }}>
                    <PhotoSVG seed={p.id.charCodeAt(1) + i} kind={['field', 'crop', 'facility', 'machine'][i % 4]} />
                  </div>
                ))}
                {s.photos.length > 4 && (
                  <div style={{ width: 32, height: 32, borderRadius: 4, background: 'var(--surface-2)',
                               display: 'flex', alignItems: 'center', justifyContent: 'center',
                               fontSize: 11, color: 'var(--ink-2)', fontFamily: 'var(--font-mono)' }}>
                    +{s.photos.length - 4}
                  </div>
                )}
              </div>
            </div>
          </div>
        ))}
      </div>

      <button className="fab" onClick={onAdd}><Icon name="plus" size={26} /></button>

      <div className="stickyfoot">
        <button className="btn"><Icon name="eye" size={14} />預覽</button>
        <button className="btn btn-primary" onClick={onPreviewPdf} disabled={visible.length === 0}>
          <Icon name="pdf" size={14} />匯出 PDF
        </button>
      </div>
    </div>
  );
};

// ============ MOBILE: Add new section ============
const F1MobileAdd = ({ onBack, onNext }) => {
  const [step, setStep] = React.useState(1);
  const [satUploaded, setSatUploaded] = React.useState(false);
  const [satProgress, setSatProgress] = React.useState(0);
  const [township, setTownship] = React.useState('嘉義縣大林鎮');
  const [sectionName, setSectionName] = React.useState('嘉興段');
  const [parcelNo, setParcelNo] = React.useState('0526-0048');
  const [farmer, setFarmer] = React.useState('張朝安');

  const startUpload = () => {
    setSatProgress(0);
    setSatUploaded(false);
    let p = 0;
    const t = setInterval(() => {
      p += 12 + Math.random() * 8;
      if (p >= 100) {
        p = 100;
        clearInterval(t);
        setSatUploaded(true);
      }
      setSatProgress(p);
    }, 120);
  };

  return (
    <div className="phone-content">
      <div className="topbar">
        <button className="icon-btn" onClick={onBack}><Icon name="arrow_left" size={20} /></button>
        <div style={{ flex: 1 }}>
          <div className="title" style={{ fontSize: 14 }}>新增地號區塊</div>
          <div className="sub">步驟 {step} / 3</div>
        </div>
      </div>

      <div className="scroll">
        {/* Stepper */}
        <div className="row gap-6" style={{ marginBottom: 16 }}>
          {[1, 2, 3].map((n) => (
            <div key={n} style={{ flex: 1, height: 4, borderRadius: 2,
                                   background: n <= step ? 'var(--accent)' : 'var(--surface-2)' }} />
          ))}
        </div>

        {step === 1 && (
          <div className="fade-in">
            <div className="text-lg font-semibold mb-4">上傳衛星地號圖</div>
            <div className="text-sm text-muted mb-12">從「農霧一把抓 App」截圖匯入</div>

            <div style={{
              border: satUploaded ? '1px solid var(--line)' : '1.5px dashed var(--line-2)',
              borderRadius: 'var(--radius-lg)',
              overflow: 'hidden',
              background: 'var(--surface)',
              minHeight: 220,
              position: 'relative',
            }}>
              {!satUploaded && satProgress === 0 && (
                <div style={{ padding: '40px 16px', textAlign: 'center' }}>
                  <div style={{ width: 64, height: 64, margin: '0 auto 12px', borderRadius: '50%',
                                background: 'var(--surface-2)', display: 'flex', alignItems: 'center',
                                justifyContent: 'center', color: 'var(--ink-3)' }}>
                    <Icon name="image" size={28} />
                  </div>
                  <div className="text-sm font-medium">點此選擇圖片</div>
                  <div className="text-xs text-muted mt-4">或拖入相簿截圖</div>
                  <div className="row gap-8" style={{ justifyContent: 'center', marginTop: 16 }}>
                    <button className="btn btn-sm" onClick={startUpload}>
                      <Icon name="folder" size={13} />相簿
                    </button>
                    <button className="btn btn-sm btn-primary" onClick={startUpload}>
                      <Icon name="camera" size={13} />拍攝
                    </button>
                  </div>
                </div>
              )}
              {satProgress > 0 && (
                <div>
                  <div style={{ height: 200, position: 'relative', background: 'var(--surface-2)' }}>
                    <SatelliteSVG seed={5} label="嘉興段 0526-0048" area="0.412 ha" />
                    {!satUploaded && (
                      <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,.45)',
                                    display: 'flex', flexDirection: 'column', alignItems: 'center',
                                    justifyContent: 'center', color: 'white', gap: 10 }}>
                        <div className="text-sm">上傳到 Drive · {Math.floor(satProgress)}%</div>
                        <div className="progress-bar" style={{ width: 180 }}>
                          <div className="progress-bar-fill" style={{ width: `${satProgress}%` }} />
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="row gap-8" style={{ padding: 12, justifyContent: 'space-between',
                                                       borderTop: '1px solid var(--line)' }}>
                    <div className="row gap-6">
                      <Icon name={satUploaded ? 'cloud_check' : 'cloud_up'} size={16}
                            style={{ color: satUploaded ? 'var(--ok)' : 'var(--ink-3)' }} />
                      <span className="text-xs text-muted text-mono">satellite-001.jpg · 1.2MB</span>
                    </div>
                    <button className="btn btn-ghost btn-sm" onClick={() => { setSatUploaded(false); setSatProgress(0); }}>
                      <Icon name="refresh" size={12} />更換
                    </button>
                  </div>
                </div>
              )}
            </div>

            {satUploaded && (
              <div className="card fade-in" style={{
                marginTop: 12, padding: 10,
                background: 'color-mix(in srgb, var(--accent) 8%, var(--surface))',
                borderColor: 'color-mix(in srgb, var(--accent) 20%, var(--line))',
              }}>
                <div className="row gap-8">
                  <Icon name="info" size={14} style={{ color: 'var(--accent)' }} />
                  <div className="text-xs text-ink-2">已自動 OCR 抓取地號 — 請至下一步確認</div>
                </div>
              </div>
            )}
          </div>
        )}

        {step === 2 && (
          <div className="fade-in">
            <div className="text-lg font-semibold mb-4">地號資料</div>
            <div className="text-sm text-muted mb-16">系統已從圖片識別,可手動修正</div>

            <div className="col gap-12">
              <div>
                <label className="label">縣市鄉鎮</label>
                <input className="input" value={township} onChange={(e) => setTownship(e.target.value)} />
              </div>
              <div className="row gap-8">
                <div style={{ flex: 1 }}>
                  <label className="label">地段名</label>
                  <input className="input" value={sectionName} onChange={(e) => setSectionName(e.target.value)} />
                </div>
                <div style={{ flex: 1 }}>
                  <label className="label">地號</label>
                  <input className="input" value={parcelNo} onChange={(e) => setParcelNo(e.target.value)}
                         style={{ fontFamily: 'var(--font-mono)' }} />
                </div>
              </div>
              <div>
                <label className="label">農戶姓名</label>
                <input className="input" value={farmer} onChange={(e) => setFarmer(e.target.value)} />
              </div>
            </div>

            {/* Plot registry hit */}
            <div className="card fade-in" style={{
              marginTop: 14, padding: 12,
              background: 'color-mix(in srgb, var(--accent) 6%, var(--surface))',
              borderColor: 'color-mix(in srgb, var(--accent) 25%, var(--line))',
            }}>
              <div className="row gap-8" style={{ justifyContent: 'space-between' }}>
                <div className="text-xs font-semibold" style={{ color: 'var(--accent)' }}>
                  ✓ 已連結農地清冊
                </div>
                <span className="text-xs text-muted text-mono">PLT-2026-0023</span>
              </div>
              <div style={{ marginTop: 8, fontSize: 12 }}>
                <div className="kv"><span className="k">申請面積</span><span className="v text-mono">0.4188 ha</span></div>
                <div className="kv"><span className="k">驗證面積</span><span className="v text-mono">0.4188 ha</span></div>
                <div className="kv"><span className="k">所有權人</span><span className="v">張朝安</span></div>
                <div className="kv"><span className="k">作物</span><span className="v">水稻 · 香米</span></div>
              </div>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="fade-in">
            <div className="text-lg font-semibold mb-4">確認並建立區塊</div>
            <div className="text-sm text-muted mb-16">下一步可開始拍攝現場照片</div>

            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ height: 140 }}>
                <SatelliteSVG seed={5} label={`${sectionName} ${parcelNo}`} area="0.4188 ha" />
              </div>
              <div style={{ padding: 14 }}>
                <div className="text-md font-semibold">{sectionName} {parcelNo}</div>
                <div className="text-xs text-muted">{township} · {farmer}</div>
                <div className="divider" style={{ margin: '10px 0' }} />
                <div className="kv"><span className="k">面積</span><span className="v text-mono">0.4188 ha</span></div>
                <div className="kv"><span className="k">所有權人</span><span className="v">張朝安</span></div>
                <div className="kv"><span className="k">儲存路徑</span>
                  <span className="v text-mono text-xs">cases/CASE-2026-0042/photos/section-04/</span></div>
              </div>
            </div>
          </div>
        )}
      </div>

      <div className="stickyfoot">
        {step > 1 && (
          <button className="btn" onClick={() => setStep(step - 1)}>上一步</button>
        )}
        {step === 1 && (
          <button className="btn btn-ghost" onClick={onBack}>取消</button>
        )}
        <button className="btn btn-primary"
                disabled={step === 1 && !satUploaded}
                onClick={() => step < 3 ? setStep(step + 1) : onNext()}>
          {step < 3 ? '下一步' : '建立並上傳照片'}
          <Icon name="chevron_right" size={14} />
        </button>
      </div>
    </div>
  );
};

// ============ MOBILE: Section detail + photo upload ============
const F1MobileSection = ({ section, onBack, onPreview, completion }) => {
  const [photos, setPhotos] = React.useState(() => {
    if (completion === 'empty') return [];
    if (completion === 'half') return section.photos.slice(0, Math.ceil(section.photos.length / 2));
    return section.photos;
  });
  const [uploading, setUploading] = React.useState(null);

  const addPhoto = () => {
    const newId = `np${Date.now()}`;
    const newP = { id: newId, orderIndex: photos.length + 1, note: '', uploaded: false, progress: 0 };
    setPhotos([...photos, newP]);
    setUploading(newId);
    let prog = 0;
    const t = setInterval(() => {
      prog += 8 + Math.random() * 12;
      if (prog >= 100) {
        clearInterval(t);
        setPhotos((cur) => cur.map((p) => p.id === newId ? { ...p, uploaded: true, progress: 100 } : p));
        setUploading(null);
      } else {
        setPhotos((cur) => cur.map((p) => p.id === newId ? { ...p, progress: prog } : p));
      }
    }, 130);
  };

  const removePhoto = (id) => {
    setPhotos(photos.filter((p) => p.id !== id));
  };

  return (
    <div className="phone-content">
      <div className="topbar">
        <button className="icon-btn" onClick={onBack}><Icon name="arrow_left" size={20} /></button>
        <div style={{ flex: 1 }}>
          <div className="title" style={{ fontSize: 14 }}>{section.sectionName} {section.parcelNo}</div>
          <div className="sub">{photos.length} 張照片 · 自動同步 Drive</div>
        </div>
        <button className="icon-btn"><Icon name="more" size={20} /></button>
      </div>

      <div className="scroll" style={{ paddingBottom: 96 }}>
        {/* Hero satellite */}
        <div style={{ height: 180, borderRadius: 'var(--radius-lg)', overflow: 'hidden',
                      border: '1px solid var(--line)', marginBottom: 12 }}>
          <SatelliteSVG seed={section.orderIndex * 7}
                        label={`${section.sectionName} ${section.parcelNo}`}
                        area={`${section.areaHa.toFixed(4)} ha`} />
        </div>

        {/* Metadata strip */}
        <div className="card" style={{ padding: 12, marginBottom: 16 }}>
          <div className="kv"><span className="k">鄉鎮</span><span className="v">{section.township}</span></div>
          <div className="kv"><span className="k">農戶</span><span className="v">{section.farmerName}</span></div>
          <div className="kv"><span className="k">面積</span><span className="v text-mono">{section.areaHa.toFixed(4)} ha</span></div>
          <div className="kv"><span className="k">所有權人</span><span className="v">{section.ownerName}</span></div>
        </div>

        <div className="row" style={{ justifyContent: 'space-between', marginBottom: 8 }}>
          <div className="text-sm font-semibold">現場照片 · {photos.length} 張</div>
          <div className="row gap-4">
            <button className="btn btn-sm btn-ghost"><Icon name="grid" size={12} /></button>
            <button className="btn btn-sm btn-ghost"><Icon name="list" size={12} /></button>
          </div>
        </div>

        {photos.length === 0 ? (
          <div style={{ padding: '32px 16px', textAlign: 'center', border: '1px dashed var(--line)',
                        borderRadius: 'var(--radius-lg)' }}>
            <Icon name="camera" size={28} style={{ color: 'var(--ink-3)', marginBottom: 8 }} />
            <div className="text-sm">點下方相機按鈕拍第一張</div>
          </div>
        ) : (
          <div className="photo-grid">
            {photos.map((p, i) => (
              <div key={p.id} className="photo-tile">
                <div style={{ width: '100%', height: '100%' }}>
                  <PhotoSVG seed={p.id.charCodeAt(1) + i * 3}
                            kind={['field', 'crop', 'facility', 'machine', 'water'][i % 5]} />
                </div>
                <div className="ph-num">{String(i + 1).padStart(2, '0')}</div>
                {p.note && (
                  <div className="ph-overlay"><div>{p.note}</div></div>
                )}
                {!p.uploaded && (
                  <div className="ph-progress">
                    <Icon name="cloud_up" size={20} />
                    <div className="progress-bar"><div className="progress-bar-fill" style={{ width: `${p.progress || 0}%` }} /></div>
                    <div className="text-mono">{Math.floor(p.progress || 0)}%</div>
                  </div>
                )}
                {p.uploaded && (
                  <div style={{ position: 'absolute', top: 6, right: 6,
                                width: 18, height: 18, borderRadius: 9,
                                background: 'rgba(0,0,0,.55)', color: 'white',
                                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name="check" size={11} />
                  </div>
                )}
              </div>
            ))}
            <button onClick={addPhoto} className="photo-tile" style={{
              border: '1.5px dashed var(--line-2)',
              background: 'var(--surface)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexDirection: 'column', gap: 4, color: 'var(--ink-3)',
            }}>
              <Icon name="plus" size={22} />
              <span className="text-xs">加照片</span>
            </button>
          </div>
        )}
      </div>

      <button className="fab" onClick={addPhoto} disabled={!!uploading}>
        <Icon name="camera" size={24} />
      </button>

      <div className="stickyfoot">
        <button className="btn" onClick={onBack}>完成</button>
        <button className="btn btn-primary" onClick={onPreview}>
          <Icon name="pdf" size={14} />預覽 PDF
        </button>
      </div>
    </div>
  );
};

// ============ MOBILE: PDF preview ============
const F1MobilePdfPreview = ({ caseData, sections, onBack, onExport }) => {
  const [layout, setLayout] = React.useState(2);
  const allPhotos = sections.flatMap((s) => s.photos.map((p, i) => ({ ...p, section: s })));

  return (
    <div className="phone-content">
      <div className="topbar">
        <button className="icon-btn" onClick={onBack}><Icon name="arrow_left" size={20} /></button>
        <div style={{ flex: 1 }}>
          <div className="title" style={{ fontSize: 14 }}>PDF 預覽</div>
          <div className="sub">附件(2) 現場稽核照片紀錄</div>
        </div>
        <button className="icon-btn"><Icon name="download" size={18} /></button>
      </div>

      {/* Layout toggle */}
      <div style={{ padding: '10px 14px', borderBottom: '1px solid var(--line)',
                     background: 'var(--surface)', display: 'flex', gap: 6 }}>
        <span className="text-xs text-muted" style={{ alignSelf: 'center', marginRight: 6 }}>每頁張數</span>
        {[2, 4, 6].map((n) => (
          <button key={n} className="btn btn-sm" data-active={layout === n}
                  onClick={() => setLayout(n)}
                  style={{
                    background: layout === n ? 'var(--ink)' : 'var(--surface)',
                    color: layout === n ? 'var(--surface)' : 'var(--ink-2)',
                    borderColor: layout === n ? 'var(--ink)' : 'var(--line)',
                  }}>
            {n} 張
          </button>
        ))}
        <span style={{ flex: 1 }} />
        <button className="btn btn-sm btn-ghost"><Icon name="edit" size={12} /></button>
      </div>

      <div className="scroll" style={{ background: 'var(--surface-2)', padding: 14, paddingBottom: 96 }}>
        {/* A4 paper preview */}
        <PdfA4Page caseData={caseData} sections={sections} layout={layout} pageNum={1} />
        <div style={{ height: 14 }} />
        <PdfA4Page caseData={caseData} sections={sections} layout={layout} pageNum={2}
                   isContinuation />
      </div>

      <div className="stickyfoot">
        <button className="btn"><Icon name="cloud" size={14} />分享連結</button>
        <button className="btn btn-primary" onClick={onExport}>
          <Icon name="download" size={14} />匯出 PDF
        </button>
      </div>
    </div>
  );
};

// A4 paper component (mobile-fit)
const PdfA4Page = ({ caseData, sections, layout = 2, pageNum = 1, isContinuation = false }) => {
  const cols = layout === 6 ? 2 : 2;
  const rows = layout / cols;
  // pick appropriate slice of photos for the page
  const allPhotos = sections.flatMap((s) => s.photos.map((p, i) => ({ ...p, section: s })));
  const pageStart = (pageNum - 1) * layout;
  const pagePhotos = allPhotos.slice(pageStart, pageStart + layout);
  if (pagePhotos.length === 0) return null;

  return (
    <div className="paper" style={{ width: '100%', aspectRatio: '210 / 297', padding: '6%',
                                     position: 'relative', display: 'flex', flexDirection: 'column' }}>
      <div style={{ textAlign: 'center', marginBottom: 12 }}>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#1a1814' }}>
          {pageNum === 1 && !isContinuation ? '附件(2) 現場稽核照片紀錄' : '附頁  現場稽核圖片'}
        </div>
        <div style={{ fontSize: 9, color: '#5a574a', marginTop: 2 }}>
          現場稽核{caseData.farmName}
        </div>
      </div>

      <div style={{ flex: 1, display: 'grid',
                    gridTemplateColumns: `repeat(${cols}, 1fr)`,
                    gridTemplateRows: `repeat(${rows}, 1fr)`,
                    gap: 6, border: '0.6px solid #5a574a' }}>
        {pagePhotos.map((p, i) => (
          <div key={i} style={{
            border: '0.5px solid #5a574a', display: 'flex', flexDirection: 'column',
            background: 'white', overflow: 'hidden',
          }}>
            <div style={{ flex: 1, position: 'relative', minHeight: 0 }}>
              <PhotoSVG seed={p.id.charCodeAt(1) + i * 3}
                        kind={['field', 'crop', 'facility', 'machine', 'water'][i % 5]} />
            </div>
            <div style={{ padding: '4px 6px', borderTop: '0.5px solid #5a574a',
                          fontSize: 7, lineHeight: 1.4, color: '#1a1814',
                          textAlign: 'center', minHeight: 36 }}>
              <div>{p.section.township}</div>
              <div>{p.section.sectionName} {p.section.parcelNo}</div>
              <div>{p.section.farmerName}</div>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 8, textAlign: 'right', fontSize: 8, color: '#5a574a',
                    fontFamily: 'ui-monospace, Menlo, monospace' }}>
        P.{pageNum} / 4
      </div>
    </div>
  );
};

Object.assign(window, { F1MobileList, F1MobileAdd, F1MobileSection, F1MobilePdfPreview, PdfA4Page });