/* Movement page */
const MovementScreen = ({ go }) => {
  const rows = [
    ['movement-pilates', 'Pilates', 'Core-deep · low-impact', 'Controlled, precise, and endlessly scalable. Build strength from the center out, one deliberate movement at a time.'],
    ['movement-barre', 'Barre', 'Small moves · big intention', 'Light weights, tiny isolations, and a steady burn. Music-driven and quietly powerful.'],
    ['movement-yoga', 'Yoga', 'Breath · balance · unwind', 'A slow, grounding flow to loosen the day and meet yourself where you are.'],
  ];
  return (
    <React.Fragment>
      <PageHero eyebrow="Movement" title="Movement" sub="Three disciplines, one intention — to feel more at home in your body." />
      <section className="movement wrap">
        {rows.map(([img, h, sub, body], i) =>
          <div className={`mrow reveal ${i % 2 ? 'rev' : ''}`} key={h}>
            <div className="imgph"><img src={`assets/photos/${img}.jpg`} alt="" /></div>
            <div className="mtxt">
              <h2>{h}</h2>
              <div className="sub">{sub}</div>
              <div className="mline">For every body, every level.</div>
              <p>{body}</p>
            </div>
          </div>
        )}
        <div className="schedule reveal"><a className="btn solid" onClick={() => go('contact')}>View the Schedule</a></div>
      </section>
      <Footer go={go} />
    </React.Fragment>
  );
};
window.MovementScreen = MovementScreen;