const PILLARS = [
  {
    from: 'guilt',
    to: 'action',
    desc: 'A few real, repeatable things, small enough to actually keep.',
  },
  {
    from: 'isolation',
    to: 'community',
    desc: 'Good people, back in the same room. Caring alone is exhausting.',
  },
  {
    from: 'hopelessness',
    to: 'empowerment',
    desc: 'One ordinary person, then a room full of them.',
  },
];

function Pillars() {
  return (
    <section className="tgp-band tgp-band-paper2" id="pillars">
      <div className="tgp-section-head">
        <div className="tgp-eyebrow">what we're really doing</div>
        <h2 className="tgp-h2">Three small turns, made <em>together</em>.</h2>
      </div>
      <div className="tgp-inner">
        <div className="tgp-pillars">
          {PILLARS.map((p) => (
            <div className="tgp-pillar" key={p.from}>
              <h3 className="tgp-pillar-turn">
                <span className="tgp-pillar-from">{p.from}</span>
                <span className="tgp-pillar-arrow">→</span>
                <span className="tgp-pillar-to">{p.to}</span>
              </h3>
              <p className="tgp-pillar-desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Pillars = Pillars;