// fairfarms.com — hero
const { Eyebrow, Button, LotCode } = window.FF;

function Hero() {
  return (
    <section id="top" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-12) var(--space-6) var(--space-10)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-10)', alignItems: 'center' }}>
        <div>
          <Eyebrow>Kampot, Cambodia · since 2016</Eyebrow>
          <h1 style={{ margin: '18px 0 0', font: 'var(--type-display-1)', fontSize: 60, color: 'var(--text-strong)', textWrap: 'pretty' }}>
            Kampot pepper, packed at origin by the people who grow it.
          </h1>
          <p style={{ margin: '20px 0 0', maxWidth: '54ch', font: 'var(--type-body-lg)', color: 'var(--text-muted)' }}>
            247 grower partners in Kampot and Takéo. Every lot carries its farm, its harvest
            window and its drying record — the same file our auditors read.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-7)' }}>
            <Button size="lg" iconAfter="chevron-right">Request samples</Button>
            <Button size="lg" variant="secondary" icon="download">Download certificates</Button>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-4)', marginTop: 'var(--space-7)', paddingTop: 'var(--space-5)', borderTop: '1px solid var(--border-hairline)' }}>
            <span style={{ font: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>Current lot</span>
            <LotCode label="LOT" code="KP-BLK-2026-014" copyable />
            <span style={{ font: 'var(--type-meta)', color: 'var(--text-meta)' }}>4 280 kg available · harvest Feb–Apr 2026</span>
          </div>
        </div>
        <figure style={{ margin: 0 }}>
          <div
            style={{
              aspectRatio: '4 / 5', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-hairline)',
              overflow: 'hidden', background: 'var(--surface-sunken)',
            }}
          >
            <img
              src="../../assets/photography/grower-portrait-kampot.jpg"
              alt="A grower partner standing in the pepper vines, holding a pruning stick"
              style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 22%', display: 'block' }}
            />
          </div>
          <figcaption style={{ marginTop: 10, font: 'var(--type-meta)', color: 'var(--text-meta)' }}>
            Grower partner in the vines, Kampot · <span style={{ fontFamily: 'var(--ff-font-mono)' }}>caption pending: name, commune, date</span>
          </figcaption>
        </figure>
      </div>
    </section>
  );
}
window.Hero = Hero;