/* global React */
function PrinciplesGrid() {
  const items = [
    { n: '01', t: 'Consciousness exists.', b: 'It is the one fundamental that cannot be reduced. Everything else is a choice we make inside it.' },
    { n: '02', t: 'Evolve by lowering local entropy.', b: 'The direction of evolution is from disorder toward order\u00A0— from noise toward signal, from fear toward care.' },
    { n: '03', t: 'Choose love. Choose care.', b: 'Cooperation is not a strategy; it is the mechanism by which the system improves itself.' },
    { n: '∞', t: 'The cycle requantizes.', b: 'Inner expansion. Outer requantization. The conspansive cycle is how the universe breathes.', accent: true },
  ];
  return (
    <section className="container section" data-screen-label="03 Principles">
      <p className="eyebrow">principles</p>
      <h2 className="section-title">Four ideas, in order.</h2>
      <p className="section-lead">Every choice we make as a company is checked against these. They are not aspirational. They are operational. You don't have to share our framework to recognize them.</p>
      <div className="principles">
        {items.map((p) => (
          <div key={p.n} className={'principle' + (p.accent ? ' is-accent' : '')}>
            {p.accent && <img className="principle-mark" src="assets/mark-transparent.svg" alt="" />}
            <span className="principle-num">{p.n}</span>
            <div>
              <h3 className="principle-title">{p.t}</h3>
              <p className="principle-body">{p.b}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.PrinciplesGrid = PrinciplesGrid;