/* "In the field" — emergency photo band. Shows the calls that come in
   after hours, each framed like an inbound dispatch ticket. */
function FieldBand() {
  const cards = [
    { img: 'job-garage.jpg', v: 'Garage door', h: 'Door jammed, car trapped', t: '11:42 PM',
      alt: 'A residential garage at night with the side door open and a work light on.' },
    { img: 'job-roof.jpg', v: 'Roofing', h: 'Leak during the storm', t: '02:09 AM',
      alt: 'A residential roof under repair with a tarp and a work light during a storm at dusk.' },
    { img: 'job-water.jpg', v: 'Water damage', h: 'Basement filling fast', t: '03:55 AM',
      alt: 'A flooded residential basement at night with a wet-vac and a single light.' },
  ];
  return (
    <section className="fieldband" id="field">
      <div className="site sec-pad">
        <div className="sec-head" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--yellow)' }}>Real calls, real emergencies</div>
          <h2 className="display" style={{ marginTop: 12 }}>When it goes wrong, <span className="yl">they call.</span></h2>
          <p style={{ color: 'var(--muted-text)', maxWidth: 560, margin: '14px auto 0', fontSize: 16 }}>
            These are the calls that come in after hours. The ones that go to whoever picks up first.
          </p>
        </div>
        <div className="fb-grid">
          {cards.map((c, i) => (
            <figure className="fb-card" key={i}>
              <img src={'assets/' + c.img} alt={c.alt} loading="lazy" width="600" height="450" />
              <figcaption className="fb-meta">
                <span className="fb-tag"><span className="fb-dot"></span> Inbound · {c.t}</span>
                <span className="fb-v">{c.v}</span>
                <h3>{c.h}</h3>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FieldBand = FieldBand;