const VALUES = [
  'Clean water for everyone',
  'A real love of animals',
  'A healthier, more sustainable world',
  'Less cruelty, more kindness',
  'Forests and air worth protecting',
  'A planet our children can inherit',
];

function SunMark() {
  return (
    <svg className="tgp-value-mark" viewBox="0 0 28 18" fill="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
        <path d="M3 15 H25"></path>
        <path d="M9 15 A5 5 0 0 1 19 15"></path>
        <path d="M14 3 v3 M6.5 6 l1.6 1.6 M21.5 6 l-1.6 1.6 M3.5 11 l2 .7 M24.5 11 l-2 .7"></path>
      </g>
    </svg>
  );
}

function Values() {
  return (
    <section className="tgp-band tgp-values" id="values">
      <div className="tgp-section-head">
        <div className="tgp-eyebrow">common ground</div>
        <h2 className="tgp-h2">Most people are <em>good people</em>.</h2>
        <p className="tgp-p tgp-p-lead tgp-values-lead">
          Strip it all back and almost everyone wants the same simple things.
        </p>
      </div>

      <ul className="tgp-values-grid">
        {VALUES.map((v) => (
          <li className="tgp-value" key={v}>
            <SunMark />
            <span className="tgp-value-text">{v}</span>
          </li>
        ))}
      </ul>

      <div className="tgp-values-turn">
        <p className="tgp-values-big">
          We are not the minority.<br /><em>We are the majority.</em>
        </p>
        <div className="tgp-values-mission">
          <p className="tgp-p">
            So why does it so often feel the other way around? We've been taught that what
            happens in the world is out of our hands, that one person changes nothing. It isn't,
            and they don't.
          </p>
          <p className="tgp-p">
            When we gather, we relearn the power of community and the impact each of us can have.
            The Good People started in Lisbon, with the intention to travel the world: giving
            people the tools to act, and the proof that together, we can change it for the better.
          </p>
          <a className="tgp-values-cta" href="#join">join us →</a>
        </div>
      </div>
    </section>
  );
}
window.Values = Values;