// Social — 1080 × 1350 grower story
const { Seal } = window.FF;

function PostPortrait({ scale = 0.4 }) {
  return (
    <figure style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'center' }}>
      <div style={{ width: 1080 * scale, height: 1350 * scale, overflow: 'hidden' }}>
        <div
          style={{
            width: 1080, height: 1350, transform: 'scale(' + scale + ')', transformOrigin: 'top left',
            background: 'var(--ff-paper)', display: 'flex', flexDirection: 'column',
          }}
        >
          <div style={{ height: 700, background: 'var(--hatch)', borderBottom: '1px solid var(--border-hairline)', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 60, position: 'relative' }}>
            <span style={{ font: 'var(--type-mono)', fontSize: 26, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>portrait 4:5 — named grower,<br />mid-morning, no styling</span>
            <Seal size={104} colour="ink" assetBase="../../" style={{ position: 'absolute', left: 60, top: 60, padding: 0 }} />
          </div>
          <div style={{ flex: 1, padding: 72, display: 'flex', flexDirection: 'column' }}>
            <blockquote style={{ margin: 0, font: 'var(--type-display-3)', fontSize: 66, lineHeight: 1.14, color: 'var(--text-strong)', textWrap: 'pretty' }}>
              “The price is agreed before we pick, and paid the day we deliver.”
            </blockquote>
            <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, paddingTop: 36, borderTop: '3px solid var(--ff-pepper)' }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span style={{ font: 'var(--type-title-2)', fontSize: 32, color: 'var(--text-strong)' }}>Sok Chan</span>
                <span style={{ font: 'var(--type-body)', fontSize: 26, color: 'var(--text-muted)' }}>Grower partner since 2019 · Chhouk commune</span>
              </div>
              <img src="../../assets/certifications/fair-for-life-mark.png" alt="Fair for Life" style={{ height: 60 }} />
            </div>
          </div>
        </div>
      </div>
      <figcaption style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>1080 × 1350 · grower story</figcaption>
    </figure>
  );
}
window.PostPortrait = PostPortrait;