// fairfarms.com — grower network
const { Eyebrow, DataList, Button, Card } = window.FF;

function Farmers() {
  return (
    <>
      <figure style={{ margin: 'var(--space-12) 0 0' }}>
        <img
          src="../../assets/photography/grower-network-kampot.jpg"
          alt="Grower partners and the Fair Farms team standing together at the edge of a pepper field"
          style={{ display: 'block', width: '100%', aspectRatio: '16 / 7', objectFit: 'cover', objectPosition: 'center 42%' }}
        />
        <figcaption style={{ maxWidth: 'var(--container)', margin: '10px auto 0', padding: '0 var(--space-6)', font: 'var(--type-meta)', color: 'var(--text-meta)' }}>
          Grower partners and the Fair Farms team, Kampot · <span style={{ fontFamily: 'var(--ff-font-mono)' }}>caption pending: names, commune, date</span>
        </figcaption>
      </figure>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-10) var(--space-6) var(--space-12)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-10)', alignItems: 'start' }}>
          <div>
            <Eyebrow>Our farmers</Eyebrow>
            <h2 style={{ margin: '16px 0 0', font: 'var(--type-display-3)', color: 'var(--text-strong)', textWrap: 'pretty' }}>
              The well-being of communities is at the heart of our actions.
            </h2>
            <p style={{ margin: '16px 0 0', maxWidth: '52ch', font: 'var(--type-body)', color: 'var(--text-muted)' }}>
              Prices are agreed before the harvest and paid on collection. The Fair for Life
              premium funds what the growers vote for — last year, water storage in two communes.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-7)' }}>
              <Button variant="secondary" iconAfter="chevron-right">Read the 2026 audit</Button>
              <Button variant="ghost" icon="file-text">Social report</Button>
            </div>
          </div>
          <Card padding="md" tone="sunken">
            <DataList
              columns={2}
              items={[
                { label: 'Grower partners', value: '247', mono: true },
                { label: 'Communes', value: '9', mono: true },
                { label: 'Women in the network', value: '58 %', mono: true },
                { label: 'FFL performance', value: '77.8 %', mono: true },
                { label: 'Premium paid 2025', value: '$41 200', mono: true },
                { label: 'Training days', value: '312', mono: true },
              ]}
            />
          </Card>
        </div>
      </section>
    </>
  );
}
window.Farmers = Farmers;