// Packaging — 25 kg export sack, single-colour stencil
const MM = 3.7795;

function SackStencil() {
  const rows = [
    ['PRODUCT', 'BLACK PEPPER WHOLE'],
    ['GRADE', 'KAMPOT PGI · ORGANIC'],
    ['LOT', 'KP-BLK-2026-014'],
    ['NET', '25.0 KG'],
    ['HARVEST', '2026-02 / 2026-04'],
    ['PACKED', '2026-04-02'],
    ['ORIGIN', 'CHHOUK, KAMPOT, KH'],
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
      <div
        style={{
          width: 300 * MM * 0.62, height: 300 * MM * 0.62, background: 'var(--ff-paper-2)',
          border: '1px solid var(--border-strong)', padding: 34,
          display: 'flex', flexDirection: 'column', gap: 18,
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, paddingBottom: 16, borderBottom: '3px solid var(--ff-ink)' }}>
          <img src="../../assets/logos/fair-farms-seal-ink.svg" alt="" style={{ width: 74, height: 74 }} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <span style={{ font: 'var(--ff-font-mono)', fontSize: 26, fontWeight: 500, letterSpacing: '0.06em', color: 'var(--ff-ink)', whiteSpace: 'nowrap' }}>FAIR FARMS</span>
            <span style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--ff-ink)', whiteSpace: 'nowrap' }}>CO. LTD · PHNOM PENH · KH</span>
          </div>
        </div>
        <dl style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
          {rows.map(([l, v]) => (
            <div key={l} style={{ display: 'flex', gap: 14, alignItems: 'baseline' }}>
              <dt style={{ width: 88, flex: '0 0 auto', font: 'var(--type-mono)', fontSize: 10, letterSpacing: '0.12em', color: 'var(--ff-ink-3)', whiteSpace: 'nowrap' }}>{l}</dt>
              <dd style={{ margin: 0, font: 'var(--ff-font-mono)', fontSize: 14, fontWeight: 500, letterSpacing: '0.03em', color: 'var(--ff-ink)', whiteSpace: 'nowrap' }}>{v}</dd>
            </div>
          ))}
        </dl>
        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 16, paddingTop: 14, borderTop: '1px solid var(--ff-ink)' }}>
          <span style={{ font: 'var(--type-mono)', fontSize: 9, lineHeight: 1.7, letterSpacing: '0.08em', color: 'var(--ff-ink-2)' }}>
            KH-BIO-154 · NOP 7880187533<br />FAIR FOR LIFE · TRACES 2018-848TC<br />KEEP DRY · DO NOT STACK OVER 8
          </span>
          <div style={{ width: 66, height: 66, border: '2px solid var(--ff-ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', background: 'var(--hatch-ink)' }}>
            <span style={{ font: 'var(--type-mono)', fontSize: 7, letterSpacing: '0.08em', color: 'var(--ff-ink-3)' }}>QR<br />LOT</span>
          </div>
        </div>
      </div>
      <span style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)', whiteSpace: 'nowrap' }}>25 kg sack stencil · 300 × 300 mm at 62%</span>
    </div>
  );
}
window.SackStencil = SackStencil;