/* Home page */
const HomeScreen = ({ go }) => (
  <React.Fragment>
    <section className="hero">
      <div className="hero-copy">
        <span className="eyebrow">Etobicoke</span>
        <img className="hero-sig" src="assets/sora-signature-dark.svg" alt="Sora" />
        <div className="hero-word">Well Bar</div>
        <p className="hero-line">Move, gather, and stay a while &mdash; where class is only the beginning.</p>
        <a className="btn solid" onClick={() => go('about')}>Step Inside</a>
      </div>
      <div className="hero-art">
        <div className="archframe"><img src="assets/photos/studio-hero.jpg" alt="Inside the Sora studio" /></div>
      </div>
      <div className="scrollcue">Scroll</div>
    </section>

    <Ticker />

    {/* Return to yourself */}
    <section className="story wrap"><div className="grid">
      <div className="archframe reveal"><img src="assets/photos/instructor-duo.jpg" alt="" /></div>
      <div className="story-txt reveal">
        <span className="eyebrow">More than a studio</span>
        <h2>It&rsquo;s a return<br/>to <em>yourself</em>.</h2>
        <p>The name and spirit of Sora are rooted in time spent in Italy, where wellness isn&rsquo;t a program &mdash; it&rsquo;s woven into everyday life. Slow mornings. Shared meals. Movement that feels like care.</p>
        <p>At its heart, Sora is about sisterhood &mdash; the friendships formed on a mat, and the quiet understanding that you don&rsquo;t have to do any of this alone.</p>
        <div className="sig">Stefanie</div>
      </div>
    </div></section>

    {/* Community band */}
    <section className="community"><div className="wrap">
      <div className="head reveal"><span className="eyebrow">In good company</span><h2>The circle that forms here</h2></div>
      <div className="commframe reveal"><img src="assets/photos/community-savasana.jpg" alt="" /></div>
    </div></section>

    {/* The Well Bar */}
    <section className="story wrap"><div className="grid">
      <div className="story-txt reveal">
        <span className="eyebrow">The Well Bar</span>
        <h2>Stay a <em>while</em>.</h2>
        <p>Class is only the beginning. Afterward, gather at the Well Bar &mdash; herbal teas, fresh&#8209;pressed juice, seasonal treats and a slow, gourmet table meant to be lingered over.</p>
      </div>
      <div className="imgph reveal" style={{ aspectRatio: '1.05/1', borderRadius: 8 }}><img src="assets/photos/well-bar.jpg" alt="" /></div>
    </div></section>

    {/* The Sora Rhythm */}
    <section className="pillars"><div className="wrap">
      <div className="head reveal"><span className="eyebrow">The Sora Rhythm</span><h2>Move &middot; Connect &middot; Restore</h2></div>
      <div className="trio">
        {[
          ['rhythm-move', 'Move', 'Pilates, Barre & Yoga', 'Strength built slowly, with intention.'],
          ['rhythm-connect', 'Connect', 'A room full of women', 'Class is where the friendships start.'],
          ['rhythm-restore', 'Restore', 'The Well Bar & beyond', 'Linger, sip, and soften the pace.'],
        ].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>

    {/* Testimonials */}
    <section className="testi"><div className="wrap">
      <div className="head reveal"><span className="eyebrow">In their words</span><h2>What women are saying</h2></div>
      <div className="tgrid">
        <blockquote className="reveal">I left feeling lighter, more grounded, and deeply grateful for the connection, peace, and care woven throughout the day.<cite>Retreat guest</cite></blockquote>
        <blockquote className="reveal">It&rsquo;s the first studio that feels like a living room. I come for class and stay for the table.<cite>Founding member</cite></blockquote>
        <blockquote className="reveal">Stefanie has built something rare &mdash; a real sisterhood, not just a schedule.<cite>Member since opening</cite></blockquote>
      </div>
    </div></section>

    {/* Founder story */}
    <section className="story wrap"><div className="grid">
      <div className="imgph reveal" style={{ aspectRatio: '0.9/1', borderRadius: 8 }}><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>
        <a className="btn" onClick={() => go('about')}>Our Story</a>
      </div>
    </div></section>

    {/* CTA */}
    <section className="cta"><div className="wrap">
      <span className="eyebrow">Your first class is on us</span>
      <h2>Come find your <em>rhythm</em>.</h2>
      <p>Every new guest&rsquo;s first class is complimentary. Step inside and stay a while.</p>
      <a className="btn solid" onClick={() => go('membership')}>Join the Circle</a>
    </div></section>

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