// Trade — one-page lot passport (A4)
const { Seal, Eyebrow, LotCode, Badge, DataList, CertBadge } = window.FF;

const STEPS = [
  ['01', 'Farm', 'Sok Chan · Chhouk', '10.6104° N, 104.1810° E'],
  ['02', 'Collection', 'Commune store · 214 kg', '2026-03-11'],
  ['03', 'Drying', 'Raised screens · 9 days', '11.8 % moisture'],
  ['04', 'Sorting', 'Hand-graded · density table', '580 g/l'],
  ['05', 'Packing', 'Phnom Penh · food-grade liner', '2026-04-02'],
  ['06', 'Container', 'Sihanoukville → Le Havre', 'ETD 2026-06-12'],
];

function LotPassport() {
  return (
    <article
      style={{
        width: 794, minHeight: 1123, background: 'var(--surface-card)',
        border: '1px solid var(--border-hairline)', display: 'flex', flexDirection: 'column',
      }}
    >
      <header style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '28px 40px', borderBottom: '2px solid var(--ff-pepper)' }}>
        <Seal size={52} assetBase="../../" style={{ padding: 0 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 2, borderLeft: '1px solid var(--border-strong)', paddingLeft: 20 }}>
          <span style={{ font: 'var(--type-title-1)', fontSize: 22, color: 'var(--text-strong)' }}>Fair Farms</span>
          <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Lot passport · harvest 2026</span>
        </div>
        <div style={{ marginLeft: 'auto', textAlign: 'right', display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
          <LotCode label="LOT" code="KP-BLK-2026-014" />
          <span style={{ font: 'var(--type-meta)', color: 'var(--text-meta)' }}>Issued 04 August 2026</span>
        </div>
      </header>

      <div style={{ padding: '32px 40px 0' }}>
        <Eyebrow>Black pepper · Kampot PGI</Eyebrow>
        <h1 style={{ margin: '14px 0 0', font: 'var(--type-display-3)', fontSize: 40, color: 'var(--text-strong)', textWrap: 'pretty' }}>
          Picked green in Chhouk, sun-dried nine days.
        </h1>
        <p style={{ margin: '14px 0 0', maxWidth: '62ch', font: 'var(--type-body)', color: 'var(--text-muted)' }}>
          Warm, floral, long finish. One farm, one drying yard, one packing date — this sheet
          is the whole record, and the same data sits behind the code on the pack.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, padding: '28px 40px 0' }}>
        <div>
          <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Specification</span>
          <DataList
            dense
            style={{ marginTop: 10 }}
            items={[
              { label: 'Botanical', value: 'Piper nigrum L.' },
              { label: 'Origin', value: 'Chhouk, Kampot, KH' },
              { label: 'Harvest', value: '2026-02 – 2026-04', mono: true },
              { label: 'Net packed', value: '4 280 kg', mono: true },
              { label: 'Moisture', value: '11.8 %', mono: true },
              { label: 'Piperine', value: '5.4 %', mono: true },
              { label: 'Bulk density', value: '580 g/l', mono: true },
              { label: 'Extraneous matter', value: '< 0.5 %', mono: true },
            ]}
          />
        </div>
        <div>
          <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Trade terms</span>
          <DataList
            dense
            style={{ marginTop: 10 }}
            items={[
              { label: 'Formats', value: '25 kg · 1 kg · 100 g' },
              { label: 'MOQ', value: '25 kg', mono: true },
              { label: 'Incoterms', value: 'FOB · CIF · EXW' },
              { label: 'Port', value: 'Sihanoukville' },
              { label: 'Lead time', value: '14 days ex-stock', mono: true },
              { label: 'Sailings', value: 'Every second Friday' },
              { label: 'Shelf life', value: '36 months', mono: true },
              { label: 'HS code', value: '0904.11', mono: true },
            ]}
          />
        </div>
      </div>

      <div style={{ padding: '28px 40px 0' }}>
        <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Chain of custody</span>
        <ol style={{ listStyle: 'none', margin: '14px 0 0', padding: 0, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '18px 24px' }}>
          {STEPS.map(([k, t, d, m]) => (
            <li key={k} style={{ borderTop: '2px solid var(--border-strong)', paddingTop: 10 }}>
              <span style={{ font: 'var(--type-mono)', fontSize: 11, color: 'var(--text-meta)' }}>{k}</span>
              <h3 style={{ margin: '4px 0 3px', font: 'var(--type-title-3)', fontSize: 15, color: 'var(--text-strong)' }}>{t}</h3>
              <p style={{ margin: 0, font: 'var(--type-body-sm)', fontSize: 13, color: 'var(--text-muted)' }}>{d}</p>
              <p style={{ margin: '3px 0 0', font: 'var(--type-mono)', fontSize: 11, color: 'var(--text-meta)' }}>{m}</p>
            </li>
          ))}
        </ol>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 28, padding: '28px 40px 0', alignItems: 'start' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 20px' }}>
          <CertBadge name="Fair for Life" art="assets/certifications/fair-for-life-mark.png" number="Partner since 2018" date="Audit 25 May 2026" height={34} assetBase="../../" />
          <CertBadge name="USDA NOP Organic" number="7880187533" date="6 February 2026" height={34} assetBase="../../" />
          <CertBadge name="EU Organic · TRACES" number="2018-848TC" date="Ecocert" height={34} assetBase="../../" />
          <CertBadge name="Kampot Pepper PGI" number="Registered packager" date="KPPA" height={34} assetBase="../../" />
        </div>
        <div style={{ aspectRatio: '1 / 1', background: 'var(--hatch)', border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-md)', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 16 }}>
          <span style={{ font: 'var(--type-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>photo 1:1 — this lot,<br />berries on paper</span>
        </div>
      </div>

      <footer style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 20, padding: '20px 40px', borderTop: '1px solid var(--border-hairline)', background: 'var(--surface-sunken)' }}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ font: 'var(--type-body-sm)', fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>Fair Farms Co. Ltd · Phnom Penh, Cambodia</span>
          <span style={{ font: 'var(--type-mono)', fontSize: 11, color: 'var(--text-muted)' }}>www.fair-farms.com · export@fair-farms.com</span>
        </div>
        <Badge tone="ink" size="sm" style={{ marginLeft: 'auto' }}>Kampot PGI</Badge>
        <span style={{ font: 'var(--type-meta)', color: 'var(--text-meta)' }}>Page 1 of 1</span>
      </footer>
    </article>
  );
}
window.LotPassport = LotPassport;