/* Experiences page */
const ExperiencesScreen = ({ go }) => {
  const cards = [
    ['experience-1', 'Retreats', 'Full-day resets of movement, nourishment, and stillness — in and beyond the studio.'],
    ['experience-2', 'Workshops', 'Deep-dives into technique, breath, and recovery, led by our instructors and guests.'],
    ['experience-3', 'Socials', 'Paint nights, book circles, and slow dinners at the Well Bar.'],
    ['experience-4', 'Member Gatherings', 'Seasonal celebrations for the women who make Sora, Sora.'],
  ];
  return (
    <React.Fragment>
      <PageHero eyebrow="Beyond the Mat" title="Experiences" sub="Gatherings that turn a class into a community." />
      <section className="exp wrap"><div className="egrid">
        {cards.map(([img, h, p]) =>
          <div className="ecard reveal" key={h}>
            <div className="imgph"><img src={`assets/photos/${img}.jpg`} alt="" /></div>
            <h3>{h}</h3>
            <p>{p}</p>
          </div>
        )}
      </div></section>
      <section className="quote"><div className="wrap">
        <p>&ldquo;I came for the movement and stayed for the women. That&rsquo;s the whole thing.&rdquo;</p>
        <div className="by">Sora member</div>
      </div></section>
      <Footer go={go} />
    </React.Fragment>
  );
};
window.ExperiencesScreen = ExperiencesScreen;