// Packaging — 100 g jar front panel, 60 × 90 mm
const { Seal, LotCode } = window.FF;
const MM = 3.7795;

function JarLabel({ grade = 'Black pepper', kh = 'ម្រេចខ្មៅ', fr = 'Poivre noir' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
      <div
        style={{
          width: 60 * MM, height: 90 * MM, background: 'var(--ff-paper)',
          border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-xs)',
          padding: 14, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
        }}
      >
        <Seal size={34} assetBase="../../" style={{ padding: 0, position: 'relative' }} />
        <div style={{ position: 'relative', marginTop: 14 }}>
          <span style={{ display: 'block', font: 'var(--type-label)', fontSize: 8, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--ff-pepper)' }}>Kampot PGI · organic</span>
          <h1 style={{ margin: '6px 0 0', font: 'var(--type-display-3)', fontSize: 23, lineHeight: 1.05, color: 'var(--text-strong)' }}>{grade}</h1>
          <p style={{ margin: '4px 0 0', font: 'var(--type-body-sm)', fontSize: 10, color: 'var(--text-muted)' }}>{fr}</p>
          <p style={{ margin: '1px 0 0', fontFamily: 'var(--ff-font-khmer)', fontSize: 10, lineHeight: 1.7, color: 'var(--text-muted)' }}>{kh}</p>
        </div>
        <p style={{ position: 'relative', margin: '12px 0 0', font: 'var(--type-body-sm)', fontSize: 9, lineHeight: 1.5, color: 'var(--text-muted)' }}>
          Whole peppercorns, picked green and sun-dried nine days in Chhouk, Kampot.
        </p>
        <div style={{ position: 'relative', marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 7 }}>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 8, paddingBottom: 6, borderBottom: '1px solid var(--border-strong)' }}>
            <span style={{ font: 'var(--type-mono)', fontSize: 17, fontWeight: 500, color: 'var(--text-strong)' }}>100 g</span>
            <LotCode code="KP-BLK-2026-014" size="sm" style={{ fontSize: 7, padding: '2px 5px' }} />
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <img src="../../assets/certifications/fair-for-life-mark.png" alt="Fair for Life" style={{ height: 17 }} />
            {['USDA organic', 'EU organic', 'PGI'].map((t) => (
              <span key={t} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 17, padding: '0 4px', border: '1px dashed var(--border-strong)', background: 'var(--hatch)', font: 'var(--type-mono)', fontSize: 5.5, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>{t}</span>
            ))}
          </div>
          <p style={{ margin: 0, font: 'var(--type-mono)', fontSize: 5.5, lineHeight: 1.6, color: 'var(--text-meta)' }}>
            Packed by Fair Farms Co. Ltd, Phnom Penh, KH · KH-BIO-154 · fair-farms.com<br />Best before 2029-04 · scan the lot code for the full record
          </p>
        </div>
      </div>
      <span style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)', whiteSpace: 'nowrap' }}>100 g jar · 60 × 90 mm</span>
    </div>
  );
}
window.JarLabel = JarLabel;