// Field notes — recent short essays.

const FieldNotes = () => {
  const notes = window.CWL_DATA.FIELD_NOTES;
  return (
    <section id="notes" className="section">
      <div className="container">
        <div className="section__head">
          <Eyebrow>§ Field notes</Eyebrow>
          <div>
            <h2><em>Short essays</em> on the work in progress.</h2>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {notes.map((n) => (
            <a key={n.id} href="#" className="card" onClick={(e) => e.preventDefault()}
               style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 12 }}>
                <span className="meta" style={{ textTransform: 'uppercase', letterSpacing: '0.14em' }}>Field note · {n.n}</span>
                <span className="meta">{n.date}</span>
              </div>
              <div className="card__title" style={{
                fontSize: 26, lineHeight: 1.18, letterSpacing: '-0.01em',
                color: 'var(--ink)', marginBottom: 18, textWrap: 'balance',
              }}>
                <em>{n.title}</em>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div className="meta">{n.words.toLocaleString()} words · {n.mins} min read</div>
                <Icon name="arrow-right" size={14} className="row-link__arrow" style={{ opacity: 0.45 }} />
              </div>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 22, display: 'flex', justifyContent: 'flex-end' }}>
          <a href="#" onClick={(e) => e.preventDefault()}
             style={{ fontSize: 14, color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' }}>
            All field notes <Icon name="arrow-right" size={12} />
          </a>
        </div>
      </div>
    </section>
  );
};

window.FieldNotes = FieldNotes;