/* global React */
function QuoteSection() {
  return (
    <section className="container section quote-section" data-screen-label="04 Quote">
      <figure className="pullquote">
        <span className="pullquote-mark" aria-hidden="true">"</span>
        <div className="pullquote-body">
          <blockquote className="pullquote-text">
            Consciousness is the only fundamental truth that cannot be logically reduced or eliminated. The overarching purpose of consciousness is to evolve by reducing entropy through the progressive choices of love, cooperation, and care.
          </blockquote>
          <figcaption className="pullquote-cite">— thomas campbell</figcaption>
        </div>
      </figure>
    </section>
  );
}

function StatBand() {
  const stats = [
    { big: '∞', label: 'boundless', sub: 'an information system without edges' },
    { big: '1', label: 'one truth', sub: 'consciousness is irreducible' },
    { big: '→ 0', label: 'entropy', sub: 'the direction of evolution' },
  ];
  return (
    <section className="container section" data-screen-label="05 Stats">
      <p className="eyebrow">what we believe, in numerals</p>
      <h2 className="section-title">Three values. Held literally.</h2>
      <div className="stats">
        {stats.map((s) => (
          <div className="stat" key={s.label}>
            <div className="stat-big">{s.big}</div>
            <div className="stat-label">{s.label}</div>
            <div className="stat-sub">{s.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.QuoteSection = QuoteSection;
window.StatBand = StatBand;