/* Membership page */
const MembershipScreen = ({ go }) => (
  <React.Fragment>
    <PageHero eyebrow="Become a Member" title="Join the <em>Circle</em>" sub="Move as often as you like, and make Sora part of the rhythm of your week. Every journey begins with a complimentary first class." />

    <section className="founding wrap reveal"><div className="founding-card">
      <div className="founding-tag">The Founding Circle &middot; First 25 Members</div>
      <h2>Be one of the first <em>25</em>.</h2>
      <p>Our founding members shape Sora from the very beginning &mdash; and keep their founding rate for a full year.</p>
      <div className="founding-grid">
        <div className="founding-price">
          <div className="fp"><span className="amt">$165</span><span className="per">/ month</span></div>
          <div className="fp-note">Locked for 12 months &middot; regularly $195</div>
          <a className="btn solid" onClick={() => go('contact')}>Claim a Founding Spot</a>
          <div className="fp-left">Only 25 memberships at this rate</div>
        </div>
        <ul className="founding-perks">
          <li>Unlimited Pilates, Barre &amp; Yoga</li>
          <li>Plush towel service, every visit</li>
          <li>First to know &mdash; early access &amp; member pricing on all events, workshops &amp; retreats</li>
          <li>Priority booking, plus two guest passes each month</li>
          <li>Invitations to founding-member gatherings</li>
          <li>Your founding rate, locked in for a full year</li>
        </ul>
      </div>
    </div></section>

    <section className="member"><div className="wrap">
      <div className="head reveal"><span className="eyebrow">Memberships</span><h2>Ways to <em>belong</em></h2></div>
      <div className="tiers">
        <div className="tier reveal">
          <div className="tname">Community Rate</div>
          <div className="price">$<span>179</span><small>/mo</small></div>
          <ul><li>Unlimited Pilates, Barre &amp; Yoga</li><li>Plush towel service</li><li>For students, families &amp; corporate partners</li><li>Member pricing on events</li></ul>
          <a className="btn" onClick={() => go('contact')}>Enquire</a>
        </div>
        <div className="tier feature reveal">
          <div className="rib">Most loved</div>
          <div className="tname">The Monthly Circle</div>
          <div className="price">$<span>195</span><small>/mo</small></div>
          <ul><li>Unlimited Pilates, Barre &amp; Yoga</li><li>Plush towel service</li><li>First to know &amp; member pricing on events</li><li>Priority booking</li><li>A guest pass each month</li></ul>
          <a className="btn solid" onClick={() => go('contact')}>Begin</a>
        </div>
        <div className="tier reveal">
          <div className="tname">Pay As You Go</div>
          <div className="price">$<span>34</span><small>/class</small></div>
          <ul><li>Single drop-in class</li><li>5 classes &mdash; $160</li><li>10 classes &mdash; $300</li><li>Flexible, no commitment</li></ul>
          <a className="btn" onClick={() => go('contact')}>Book</a>
        </div>
      </div>
      <p className="finehint reveal">First class complimentary for every new guest. Memberships are month-to-month &mdash; pause or cancel anytime. Prices in CAD, plus applicable tax.</p>
    </div></section>

    <Footer go={go} />
  </React.Fragment>
);
window.MembershipScreen = MembershipScreen;