/* global React */
const PILLARS = [
  {
    title: 'Één frame, oneindig veel variatie',
    body: 'Ons systeem werkt met metalen frames en een vijftal afmetingen waarin je eenvoudig elk doek plaatst. Wissel het doek zo vaak als je wilt. Zonder tools of gedoe, wél erg gemakkelijk, want het frame blijft hetzelfde.'
  },
  {
    title: 'Voor elk kantoor een oplossing',
    body: 'Doordat we werken met verschillende formaten is er altijd een afmeting die past bij jouw kantoor. Of het nou een entreehal is of een kleine vergaderzaal, niets is te gek.'
  },
  {
    title: 'Milieubewust je kantoor verfrissen',
    body: 'Doeken die gebruikt zijn, gaan terug naar FrisseWand. FrisseWand verzorgt een kritische inspectie en reinigt de gebruikte doeken zorgvuldig, waarop ze vervolgens opnieuw gebruikt kunnen worden.'
  },
  {
    title: 'Rust en sfeer',
    body: 'Onze foto\u2019s zijn zorgvuldig geselecteerd en professioneel geprint op materialen met diepe kleurweergave en fijne details.'
  }
];

function Pillars() {
  return (
    <section className="fw-section fw-section--tint" id="waarom">
      <div className="fw-container">
        <header className="fw-pillars__head">
          <div className="fw-pillars__head-text">
            <span className="fw-eyebrow">Waarom FrisseWand</span>
            <h2 className="fw-h1">Daarom kiezen bedrijven voor FrisseWand</h2>
            <div className="fw-pillars__intro">
              <p>Steeds meer organisaties zien in dat er vaak nog veel winst te behalen valt op sfeer en uitstraling in hun pand. Bestaande huur kunst is vaak statisch en weinig vernieuwend, waar aangekochte kunst juist na verloop van tijd verveeld raakt.</p>
              <p>FrisseWand draagt daarom bij aan een inspirerende werkomgeving, maar het bevordert ook de productiviteit en het welzijn van de werknemer. Wij combineren hoogwaardige fotografie met een flexibel wisselsysteem dat je kantoor elke periode in een handomdraai vernieuwt.</p>
            </div>
          </div>
          <figure className="fw-frame fw-pillars__head-img">
            <img
              src="uploads/frissewand-fotos-nas-6-1024x576.webp"
              alt="FrisseWand kunstwerk aan de muur — stoomlocomotief op viaduct"
              loading="lazy"
            />
          </figure>
        </header>
        <h3 className="fw-h2 fw-pillars__lead"><strong>Maar er zijn meer redenen om voor FrisseWand te kiezen:</strong></h3>
        <div className="fw-pillars__grid">
          {PILLARS.map((p, i) => (
            <article key={i} className="fw-pillar">
              <div className="fw-pillar__icon" aria-hidden="true">✓</div>
              <h4 className="fw-h3">{p.title}</h4>
              <p>{p.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pillars = Pillars;