/* About page */
const AboutScreen = ({ go }) => (
  <React.Fragment>
    <PageHero eyebrow="Our Story" title="The heart of <em>Sora</em>" sub="A boutique wellness destination on the Etobicoke waterfront — built for women, around movement and belonging." />

    <section className="story wrap"><div className="grid">
      <div className="archframe reveal"><img src="assets/photos/founder.jpg" alt="" /></div>
      <div className="story-txt reveal">
        <span className="eyebrow">The story behind Sora</span>
        <h2>Built from<br/>what was <em>missing</em>.</h2>
        <p>Sora is named for a town in Italy with deep family meaning &mdash; a place of mountains, slow living, and belonging. Stefanie wanted to bring that same ease home: a space where women feel held, never rushed, and always welcome to stay.</p>
        <p>Where wellness isn&rsquo;t a program to complete, but a rhythm to return to.</p>
        <div className="sig">Stefanie</div>
      </div>
    </div></section>

    <section className="quote"><div className="wrap">
      <p>&ldquo;I wanted a place where the class is only the beginning &mdash; where you stay for the tea, the table, and the people.&rdquo;</p>
      <div className="by">Stefanie &middot; Founder</div>
    </div></section>

    <section className="story wrap"><div className="grid">
      <div className="story-txt reveal">
        <span className="eyebrow">Sisterhood</span>
        <h2>You don&rsquo;t do<br/>this <em>alone</em>.</h2>
        <p>At its heart, Sora is about the friendships formed on a mat and the quiet understanding that wellness is better shared. Come for a class; stay for the community.</p>
        <a className="btn" onClick={() => go('experiences')}>See What&rsquo;s On</a>
      </div>
      <div className="imgph reveal" style={{ aspectRatio: '1.05/1', borderRadius: 8 }}><img src="assets/photos/instructor-duo.jpg" alt="" /></div>
    </div></section>

    <section className="pillars"><div className="wrap">
      <div className="head reveal"><span className="eyebrow">What we stand for</span><h2>Move &middot; Connect &middot; Restore</h2></div>
      <div className="trio">
        {[
          ['rhythm-move','Move','Intentional movement','Pilates, Barre & Yoga, taught with care.'],
          ['rhythm-connect','Connect','A real community','A circle of women who keep showing up.'],
          ['rhythm-restore','Restore','The Well Bar','Linger over tea and a slow table.'],
        ].map(([img,h,sub,line]) =>
          <div className="pill reveal" key={h}>
            <div className="imgph"><img src={`assets/photos/${img}.jpg`} alt="" /></div>
            <h3>{h}</h3><div className="sub">{sub}</div><p>{line}</p>
          </div>
        )}
      </div>
    </div></section>

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