// Leonard's Farm What We Grow section
const LFGrowHeading = SectionHeading;
const LFCropCard = CropCard;

// Real crop photographs, saved locally in images/. Swap any file for your own
// photo of the same name to change it.
const CROPS = [
  {
    name: 'Mangoes', season: 'In season',
    description: 'Sweet Apple and Ngowe varieties, heavy on the branch through the dry months.',
    note: 'Grafted trees start bearing in three to four years and carry a heavy crop once they take hold in the warm soil.',
    tip: 'Prune right after harvest to open the canopy; it lets light in and keeps fruit-fly damage down.',
    image: 'images/mango.jpg',
  },
  {
    name: 'Pixie oranges', season: 'In season',
    description: 'Small, seedless and easy to peel, a favourite at the market gate.',
    note: 'Citrus does well on our warm, well-drained slopes as long as the trees get a steady drink through the dry season.',
    tip: 'Mulch the base and feed after flowering for sweeter, fuller fruit.',
    image: 'images/pixie-oranges.jpg',
  },
  {
    name: 'Watermelon',
    description: 'Big and sweet, ripening fast on steady drip lines.',
    note: 'A short 80–90 day crop we plant to ripen through the hottest, driest weeks when it sells best.',
    tip: 'Ease off the water once the fruit has set; less, deeper watering keeps it sweet.',
    image: 'images/watermelon.jpg',
  },
  {
    name: 'Pawpaw',
    description: 'Soft golden fruit that ripens fast in the Makueni sun.',
    note: 'Fast growers that fruit within a year and keep bearing steadily right through the seasons.',
    tip: 'Plant a few together so you end up with both male and female trees and reliable fruit.',
    image: 'images/pawpaw.jpg',
  },
  {
    name: 'Onions', season: 'In season',
    description: 'Red bulb onions, cured in the sun and sold by the sack.',
    note: 'A dependable dry-season cash crop; they store for weeks after lifting, so you sell when the price is right.',
    tip: 'Stop watering once the tops fall over, then lift and cure the bulbs in the shade.',
    image: 'images/onions.jpg',
  },
  {
    name: 'Spinach',
    description: 'Tender leaves picked young between the tree rows.',
    note: 'Quick to mature and cut-and-come-again, so a single planting keeps giving for weeks.',
    tip: 'Pick the outer leaves first and leave the centre, and the plant keeps producing.',
    image: 'images/spinach.jpg',
  },
  {
    name: 'Tomatoes', season: 'In season',
    description: 'Firm, market-grade tomatoes grown on staked rows.',
    note: 'Staked and pruned for airflow, which cuts disease and gives cleaner fruit in the warm weather.',
    tip: 'Remove the side shoots and stake early for bigger, tidier fruit.',
    image: 'images/tomatoes.jpg',
  },
  {
    name: 'Leafy greens',
    description: 'Sukuma wiki and kale grown between the tree rows.',
    note: 'The everyday green here: hardy, cheap to grow and always finding a buyer at the gate.',
    tip: 'Pick the lower leaves a few at a time and the plant feeds you for months.',
    image: 'images/leafy-greens.jpg',
  },
];

function Grow() {
  return (
    <section id="grow" style={{ padding: 'var(--section-y) 0', background: 'var(--surface-sunk)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ maxWidth: 640 }}>
          <LFGrowHeading eyebrow="What we grow" title="Eight crops from dry ground" lead="Sun-ripened fruit and vegetables grown the year round. What's ready changes with the season; tap any crop to see how we grow it." />
        </div>
        <div style={{ marginTop: 'var(--space-7)', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(230px, 1fr))', gap: 'var(--space-5)', alignItems: 'start' }}>
          {CROPS.map((c) => (
            <LFCropCard key={c.name} name={c.name} season={c.season} description={c.description} note={c.note} tip={c.tip} image={c.image} height={190} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Grow = Grow;