// Packaging — 500 g pouch front, 120 × 180 mm
const { Seal, Badge, LotCode } = window.FF;
const MM = 3.7795;

function PouchFront() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
      <div
        style={{
          width: 120 * MM, height: 180 * MM, background: 'var(--ff-paper)',
          border: '1px solid var(--border-hairline)', borderRadius: '14px 14px 4px 4px',
          padding: 26, display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
          <Seal size={54} assetBase="../../" style={{ padding: 0 }} />
          <div style={{ textAlign: 'right' }}>
            <span style={{ display: 'block', font: 'var(--type-label)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Kampot, Cambodia</span>
            <span style={{ display: 'block', marginTop: 3, font: 'var(--type-mono)', fontSize: 9, color: 'var(--text-meta)' }}>Harvest 2026</span>
          </div>
        </div>

        <div style={{ marginTop: 22 }}>
          <span style={{ display: 'inline-block', font: 'var(--type-label)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ff-pepper)', whiteSpace: 'nowrap' }}>Kampot PGI · organic</span>
          <h1 style={{ margin: '8px 0 0', font: 'var(--type-display-2)', fontSize: 40, lineHeight: 1.02, color: 'var(--text-strong)' }}>Black<br />pepper</h1>
          <p style={{ margin: '10px 0 0', font: 'var(--type-body-sm)', fontSize: 12, color: 'var(--text-muted)' }}>Poivre noir</p>
          <p style={{ margin: '2px 0 0', fontFamily: 'var(--ff-font-khmer)', fontSize: 12, lineHeight: 1.7, color: 'var(--text-muted)' }}>ម្រេចខ្មៅ</p>
        </div>

        <div style={{ marginTop: 16, aspectRatio: '3 / 2', background: 'var(--hatch)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 12 }}>
          <span style={{ font: 'var(--type-mono)', fontSize: 8.5, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>photo 3:2 — vines at Chhouk,<br />duotone ink on paper</span>
        </div>

        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <Badge tone="organic" size="sm" icon="badge-check">Organic</Badge>
            <Badge tone="fair" size="sm">Fair for Life</Badge>
            <span style={{ marginLeft: 'auto', font: 'var(--type-mono)', fontSize: 22, fontWeight: 500, color: 'var(--text-strong)' }}>500 g</span>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, paddingTop: 10, borderTop: '1px solid var(--border-strong)' }}>
            <img src="../../assets/certifications/fair-for-life-mark.png" alt="Fair for Life" style={{ height: 22 }} />
            {['USDA organic', 'EU organic', 'Kampot PGI'].map((t) => (
              <span key={t} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: 22, padding: '0 6px', border: '1px dashed var(--border-strong)', background: 'var(--hatch)', font: 'var(--type-mono)', fontSize: 7, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>{t}</span>
            ))}
            <LotCode code="KP-BLK-2026-014" size="sm" style={{ marginLeft: 'auto', fontSize: 8 }} />
          </div>
          <p style={{ margin: 0, font: 'var(--type-mono)', fontSize: 7, lineHeight: 1.6, color: 'var(--text-meta)' }}>
            Packed at origin by Fair Farms Co. Ltd, Phnom Penh, Cambodia · KH-BIO-154 · Agriculture non-UE<br />
            Best before 2029-04 · scan the lot code for farm, harvest and drying record · fair-farms.com
          </p>
        </div>
      </div>
      <span style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)', whiteSpace: 'nowrap' }}>500 g pouch · 120 × 180 mm</span>
    </div>
  );
}
window.PouchFront = PouchFront;