// Social — 1080 × 1080 harvest post
const { Seal, Eyebrow, LotCode, Badge } = window.FF;

function PostSquare({ scale = 0.4 }) {
  return (
    <figure style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
      <div style={{ width: 1080 * scale, height: 1080 * scale, overflow: 'hidden' }}>
        <div
          style={{
            width: 1080, height: 1080, transform: 'scale(' + scale + ')', transformOrigin: 'top left',
            background: 'var(--ff-paper)', padding: 72, display: 'flex', flexDirection: 'column',
            position: 'relative', overflow: 'hidden',
          }}
        >
          <img src="../../assets/logos/fair-farms-seal-ink.svg" alt="" style={{ position: 'absolute', right: -140, bottom: -120, width: 620, opacity: 0.05 }} />
          <Seal size={96} assetBase="../../" style={{ padding: 0, position: 'relative' }} />
          <div style={{ position: 'relative', marginTop: 56 }}>
            <Eyebrow style={{ fontSize: 22, letterSpacing: '0.12em' }}>Harvest 2026 · Chhouk</Eyebrow>
            <h1 style={{ margin: '32px 0 0', font: 'var(--type-display-1)', fontSize: 104, lineHeight: 1.02, color: 'var(--text-strong)', textWrap: 'pretty' }}>
              4 280 kg of black pepper, from one hillside.
            </h1>
            <p style={{ margin: '32px 0 0', maxWidth: '30ch', font: 'var(--type-body-lg)', fontSize: 32, lineHeight: 1.5, color: 'var(--text-muted)' }}>
              Picked green by 41 growers, sun-dried nine days, packed at origin.
            </p>
          </div>
          <div style={{ position: 'relative', marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 20, paddingTop: 32, borderTop: '3px solid var(--ff-pepper)' }}>
            <img src="../../assets/certifications/fair-for-life-mark.png" alt="Fair for Life" style={{ height: 56 }} />
            <Badge tone="organic" icon="badge-check" style={{ fontSize: 22, padding: '10px 18px' }}>Organic</Badge>
            <LotCode label="LOT" code="KP-BLK-2026-014" style={{ marginLeft: 'auto', fontSize: 24, padding: '10px 16px' }} />
          </div>
        </div>
      </div>
      <figcaption style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>1080 × 1080 · feed post</figcaption>
    </figure>
  );
}
window.PostSquare = PostSquare;