// fairfarms.com — product range
const { Eyebrow, Card, Badge, DataList, Button } = window.FF;

const RANGE = [
  {
    name: 'Black pepper', grade: 'Kampot PGI',
    note: 'Picked green, sun-dried nine days. Warm, floral, long finish.',
    shot: 'product 1:1 — berries on paper, top light',
    specs: [
      { label: 'Formats', value: '25 kg · 1 kg · 100 g' },
      { label: 'Moisture', value: '11.8 %', mono: true },
      { label: 'Piperine', value: '5.4 %', mono: true },
    ],
  },
  {
    name: 'Red pepper', grade: 'Kampot PGI',
    note: 'Left to ripen on the vine, hand-sorted berry by berry. Fruit and heat.',
    shot: 'product 1:1 — red berries, linen',
    specs: [
      { label: 'Formats', value: '10 kg · 500 g · 100 g' },
      { label: 'Moisture', value: '12.1 %', mono: true },
      { label: 'Yield', value: '610 kg / harvest', mono: true },
    ],
  },
  {
    name: 'White pepper', grade: 'Kampot PGI',
    note: 'Ripe berries soaked in spring water, hulled by hand. Clean, sharp, mineral.',
    shot: 'product 1:1 — white peppercorns, dark bowl',
    specs: [
      { label: 'Formats', value: '10 kg · 500 g · 100 g' },
      { label: 'Moisture', value: '11.2 %', mono: true },
      { label: 'Yield', value: '925 kg / harvest', mono: true },
    ],
  },
];

function Products() {
  return (
    <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--space-12) var(--space-6)' }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 'var(--space-6)' }}>
        <div>
          <Eyebrow>The range</Eyebrow>
          <h2 style={{ margin: '16px 0 0', font: 'var(--type-display-3)', color: 'var(--text-strong)' }}>Three grades, one hillside</h2>
        </div>
        <Button variant="ghost" iconAfter="chevron-right">Full spec sheet</Button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-8)' }}>
        {RANGE.map((p) => (
          <Card key={p.name} padding="none" interactive>
            <div style={{ aspectRatio: '1 / 1', background: 'var(--hatch)', borderBottom: '1px solid var(--border-hairline)', borderRadius: '6px 6px 0 0', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20, textAlign: 'center' }}>
              <span style={{ font: 'var(--type-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-meta)' }}>{p.shot}</span>
            </div>
            <div style={{ padding: 'var(--space-6)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
                <h3 style={{ margin: 0, font: 'var(--type-title-1)', fontSize: 24, color: 'var(--text-strong)' }}>{p.name}</h3>
                <Badge tone="ink" size="sm">{p.grade}</Badge>
              </div>
              <p style={{ margin: '10px 0 var(--space-5)', font: 'var(--type-body-sm)', color: 'var(--text-muted)' }}>{p.note}</p>
              <DataList items={p.specs} dense />
              <div style={{ display: 'flex', gap: 'var(--space-2)', marginTop: 'var(--space-5)' }}>
                <Badge tone="organic" icon="badge-check">Organic</Badge>
                <Badge tone="fair">Fair for Life</Badge>
              </div>
            </div>
          </Card>
        ))}
      </div>
    </section>
  );
}
window.Products = Products;