// Trade — season price and availability sheet (A4)
const { Seal, Eyebrow, Table, Badge, LotCode, CertBadge } = window.FF;

const ROWS = [
  { grade: 'Black · Kampot PGI', format: '25 kg carton', moq: '25 kg', price: '$32.40', lead: '14 days', lot: 'KP-BLK-2026-014' },
  { grade: 'Black · Kampot PGI', format: '1 kg pouch', moq: '10 kg', price: '$36.10', lead: '14 days', lot: 'KP-BLK-2026-015' },
  { grade: 'Red · Kampot PGI', format: '10 kg carton', moq: '10 kg', price: '$58.90', lead: '30 days', lot: 'KP-RED-2026-006' },
  { grade: 'White · Kampot PGI', format: '10 kg carton', moq: '10 kg', price: '$49.60', lead: '21 days', lot: 'KP-WHT-2026-003' },
  { grade: 'Long pepper', format: '5 kg carton', moq: '5 kg', price: '$41.00', lead: '30 days', lot: 'KH-LNG-2026-002' },
  { grade: 'Fresh green (brined)', format: '6 × 1 kg', moq: '12 kg', price: '$27.80', lead: '45 days', lot: 'KP-GRN-2026-009' },
];

function PriceSheet() {
  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)' }}>Price & availability · Q3 2026</span>
        </div>
        <span style={{ marginLeft: 'auto', font: 'var(--type-meta)', color: 'var(--text-meta)' }}>FOB Sihanoukville · USD/kg · valid to 30 September 2026</span>
      </header>

      <div style={{ padding: '32px 40px 0' }}>
        <Eyebrow>Harvest 2026</Eyebrow>
        <h1 style={{ margin: '14px 0 18px', font: 'var(--type-display-3)', fontSize: 36, color: 'var(--text-strong)' }}>Six lines, all Fair for Life and organic certified</h1>
        <Table
          caption="Prices exclude freight and duty. Every line is available as a sample box, free, two 50 g pouches."
          columns={[
            { key: 'grade', header: 'Grade' },
            { key: 'format', header: 'Format' },
            { key: 'moq', header: 'MOQ', align: 'right', mono: true },
            { key: 'price', header: 'FOB / kg', align: 'right', mono: true },
            { key: 'lead', header: 'Lead time', align: 'right', mono: true },
            { key: 'lot', header: 'Current lot', render: (r) => <LotCode code={r.lot} size="sm" /> },
          ]}
          rows={ROWS}
        />
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20, padding: '32px 40px 0' }}>
        {[
          ['Sampling', 'Two 50 g pouches per grade, shipped free within five working days.'],
          ['Payment', '30 % on order confirmation, balance against copy documents.'],
          ['Documents', 'Certificates, spec sheets and the lot passport travel with every shipment.'],
        ].map(([h, d]) => (
          <div key={h} style={{ borderTop: '2px solid var(--border-strong)', paddingTop: 12 }}>
            <h3 style={{ margin: '0 0 6px', font: 'var(--type-title-3)', fontSize: 15, color: 'var(--text-strong)' }}>{h}</h3>
            <p style={{ margin: 0, font: 'var(--type-body-sm)', fontSize: 13, color: 'var(--text-muted)' }}>{d}</p>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 'auto', padding: '28px 40px 0' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, paddingBottom: 20 }}>
          <CertBadge name="Fair for Life" art="assets/certifications/fair-for-life-mark.png" number="Since 2018" height={32} assetBase="../../" />
          <CertBadge name="USDA NOP Organic" number="7880187533" height={32} assetBase="../../" />
          <CertBadge name="EU Organic" number="2018-848TC" height={32} assetBase="../../" />
          <CertBadge name="Kampot PGI" number="Registered packager" height={32} assetBase="../../" />
        </div>
      </div>

      <footer style={{ display: 'flex', alignItems: 'center', gap: 20, padding: '20px 40px', borderTop: '1px solid var(--border-hairline)', background: 'var(--surface-sunken)' }}>
        <span style={{ font: 'var(--type-body-sm)', fontSize: 13, fontWeight: 600, color: 'var(--text-strong)' }}>export@fair-farms.com</span>
        <span style={{ font: 'var(--type-mono)', fontSize: 11, color: 'var(--text-muted)' }}>+855 __ ___ ___</span>
        <Badge tone="organic" size="sm" icon="badge-check" style={{ marginLeft: 'auto' }}>Organic</Badge>
        <Badge tone="fair" size="sm">Fair for Life</Badge>
      </footer>
    </article>
  );
}
window.PriceSheet = PriceSheet;