// fairfarms.com — traceability band (ink surface)
const { Eyebrow, Button, LotCode } = window.FF;

const STEPS = [
  { k: '01', t: 'Farm', d: 'Sok Chan · Chhouk', m: '10.6104° N, 104.1810° E' },
  { k: '02', t: 'Collection', d: 'Weighed at the commune store', m: '2026-03-11 · 214 kg' },
  { k: '03', t: 'Drying', d: 'Raised screens, nine days', m: '11.8 % moisture' },
  { k: '04', t: 'Sorting', d: 'Hand-graded, density table', m: '580 g/l' },
  { k: '05', t: 'Packing', d: 'Phnom Penh, food-grade liner', m: 'KP-BLK-2026-014' },
  { k: '06', t: 'Container', d: 'Sihanoukville → Le Havre', m: 'ETD 2026-06-12' },
];

function Traceability() {
  return (
    <section className="ff-on-ink" style={{ background: 'var(--ff-ink)', color: 'var(--ff-paper)', position: 'relative', overflow: 'hidden' }}>
      <img src="../../assets/logos/fair-farms-seal-paper.svg" alt="" style={{ position: 'absolute', right: -80, top: -60, width: 380, opacity: 0.05 }} />
      <div style={{ position: 'relative', maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-12) var(--space-6)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-7)' }}>
          <div>
            <Eyebrow tone="meta" style={{ color: 'rgba(247,242,232,0.6)' }}>Traceability</Eyebrow>
            <h2 style={{ margin: '16px 0 0', font: 'var(--type-display-3)', color: 'var(--ff-paper)' }}>Six steps, one code</h2>
            <p style={{ margin: '14px 0 0', maxWidth: '52ch', font: 'var(--type-body)', color: 'rgba(247,242,232,0.72)' }}>
              Scan the code on any pack and you get this record — no login, no account.
            </p>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)' }}>
            <LotCode label="LOT" code="KP-BLK-2026-014" style={{ background: 'rgba(247,242,232,0.08)', borderColor: 'rgba(247,242,232,0.22)', color: 'var(--ff-paper)' }} />
            <Button variant="inverse" icon="qr-code">Open record</Button>
          </div>
        </div>
        <ol style={{ listStyle: 'none', margin: 'var(--space-9) 0 0', padding: 0, display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0 }}>
          {STEPS.map((s) => (
            <li key={s.k} style={{ padding: '0 var(--space-4) 0 0', borderTop: '2px solid rgba(247,242,232,0.28)', paddingTop: 'var(--space-4)' }}>
              <span style={{ font: 'var(--type-mono)', fontSize: 12, color: 'rgba(247,242,232,0.5)' }}>{s.k}</span>
              <h3 style={{ margin: '8px 0 6px', font: 'var(--type-title-3)', color: 'var(--ff-paper)' }}>{s.t}</h3>
              <p style={{ margin: 0, font: 'var(--type-body-sm)', fontSize: 13, color: 'rgba(247,242,232,0.72)' }}>{s.d}</p>
              <p style={{ margin: '6px 0 0', font: 'var(--type-mono)', fontSize: 11, color: 'rgba(247,242,232,0.5)' }}>{s.m}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
window.Traceability = Traceability;