// Social — 1080 × 1920 traceability story (ink)
const { Seal, LotCode } = window.FF;

const STEPS = [['01', 'Farm', 'Sok Chan · Chhouk'], ['02', 'Drying', 'Nine days, raised screens'], ['03', 'Sorting', 'Hand-graded, 580 g/l'], ['04', 'Packing', 'Phnom Penh, 2026-04-02']];

function Story({ scale = 0.28 }) {
  return (
    <figure style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
      <div style={{ width: 1080 * scale, height: 1920 * scale, overflow: 'hidden' }}>
        <div
          className="ff-on-ink"
          style={{
            width: 1080, height: 1920, transform: 'scale(' + scale + ')', transformOrigin: 'top left',
            background: 'var(--ff-ink)', padding: '160px 80px 140px', display: 'flex', flexDirection: 'column',
            position: 'relative', overflow: 'hidden',
          }}
        >
          <img src="../../assets/logos/fair-farms-seal-paper.svg" alt="" style={{ position: 'absolute', right: -180, top: 420, width: 700, opacity: 0.05 }} />
          <Seal size={104} colour="paper" assetBase="../../" style={{ padding: 0, position: 'relative' }} />
          <h1 style={{ position: 'relative', margin: '72px 0 0', font: 'var(--type-display-1)', fontSize: 112, lineHeight: 1.02, color: 'var(--ff-paper)', textWrap: 'pretty' }}>
            Where this pepper came from
          </h1>
          <ol style={{ listStyle: 'none', position: 'relative', margin: '96px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 56 }}>
            {STEPS.map(([k, t, d]) => (
              <li key={k} style={{ borderTop: '3px solid rgba(247,242,232,0.3)', paddingTop: 24 }}>
                <span style={{ font: 'var(--type-mono)', fontSize: 26, color: 'rgba(247,242,232,0.5)' }}>{k}</span>
                <h2 style={{ margin: '14px 0 8px', font: 'var(--type-title-1)', fontSize: 52, color: 'var(--ff-paper)' }}>{t}</h2>
                <p style={{ margin: 0, font: 'var(--type-body-lg)', fontSize: 30, color: 'rgba(247,242,232,0.72)' }}>{d}</p>
              </li>
            ))}
          </ol>
          <div style={{ position: 'relative', marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 28 }}>
            <LotCode label="LOT" code="KP-BLK-2026-014" style={{ fontSize: 28, padding: '14px 20px', background: 'rgba(247,242,232,0.08)', borderColor: 'rgba(247,242,232,0.22)', color: 'var(--ff-paper)' }} />
            <span style={{ font: 'var(--type-body)', fontSize: 28, color: 'rgba(247,242,232,0.66)' }}>Scan any pack · no login</span>
          </div>
        </div>
      </div>
      <figcaption style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>1080 × 1920 · story</figcaption>
    </figure>
  );
}
window.Story = Story;