/* FieldStudies.jsx — band of real fieldwork photography with captions */

const FIELD_PHOTOS = [
  {
    src: 'assets/photos/timeline-workshop.jpg',
    eyebrow: 'Ban Sam Kha',
    caption: 'Villagers map thirty years of community development onto butcher paper — financial crises, savings groups, the first school computer lab, the broadband cooperative.',
    span: 'wide',
  },
  {
    src: 'assets/photos/community-bank.jpg',
    eyebrow: 'Community bank',
    caption: 'A handwritten passbook from the Ban Sam Kha community bank — monthly deposits and interest, kept and audited by neighbors.',
    span: 'tall',
  },
  {
    src: 'assets/photos/crop-plan-detail.jpg',
    eyebrow: 'Crop planning',
    caption: 'A vegetable-planting plan for 4 rai of land, drawn in red and purple marker across the months of the year.',
    span: 'tall',
  },
  {
    src: 'assets/photos/ledger-calculations.jpg',
    eyebrow: 'Soil math',
    caption: 'Farmers work out the arithmetic of land, yield, and price in a shared notebook.',
    span: 'tall',
  },
  {
    src: 'assets/photos/village-map.jpg',
    eyebrow: 'Village atlas',
    caption: 'A community-drawn map of Ban Im-Thong, Mu 4, locating every household, pond, road, and grove of bamboo.',
    span: 'tall',
  },
];

function FieldStudies() {
  return (
    <section className="section field" id="field">
      <div className="container">
        <div className="section-thread" aria-hidden="true"></div>
        <h2>What learning looks&nbsp;like, in&nbsp;practice.</h2>
        <p className="field-lede">
          The book is grounded in three decades of fieldwork — notebooks, hand-drawn maps,
          passbooks, planting calendars, and timelines made by the communities themselves.
        </p>
        <div className="field-grid">
          {FIELD_PHOTOS.map((p) => (
            <figure key={p.src} className={"field-card " + p.span}>
              <div className="field-img" style={{ backgroundImage: `url(${p.src})` }} role="img" aria-label={p.caption}></div>
              <figcaption>
                <span className="field-eyebrow">{p.eyebrow}</span>
                <p>{p.caption}</p>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

window.FieldStudies = FieldStudies;