/* global React */

/* ============================================================
   fitness/move.html - Layer-2 Fitness sub-page
   Sub-cats: Mobility · Flexibility · Yoga · Low-impact
   ============================================================ */

const M_IMG = {
  hero: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=2400&q=80",
  stretching: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1400&q=80",
  mobility: "https://images.unsplash.com/photo-1599901860904-17e6ed7083a0?w=1400&q=80",
  flexibility: "https://images.unsplash.com/photo-1591228127791-8e2eaef098d3?w=1400&q=80",
  yoga: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1400&q=80",
  walking: "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=1400&q=80",
  lowimpact: "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=1400&q=80",
  balance: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",
  posture: "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?w=1400&q=80",
  pilates: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1517963879433-6ad2b056d712?w=1400&q=80",
};

function MCrumb() {
  return (
    <div className="tcrumb">
      <div className="tcrumb-inner">
        <div className="tcrumb-trail">
          <a href="/en/">How To: Health &amp; Fitness</a>
          <span className="sep">/</span>
          <a href="/en/fitness/">Fitness</a>
          <span className="sep">/</span>
          <span className="here">Move</span>
        </div>
        <div>Lane 02 · Sub 02 of 06</div>
      </div>
    </div>
  );
}
window.MCrumb = MCrumb;

function MHeader() {
  return (
    <header className="header">
      <div className="header-inner">
        <a className="logo" href="/en/">
          How To<span className="ampersand">:</span> <span style={{fontStyle:"italic"}}>Health</span> <span className="amp-roman">&amp;</span> <span style={{fontStyle:"italic"}}>Fitness</span>
          <small>The How To Co. - Edition 08</small>
        </a>
        <nav className="nav">
          <a href="/en/">Home</a>
          <a href="/en/health/">Health</a>
          <a href="/en/fitness/" className="active">Fitness</a>
          <a href="/en/#program">This Week</a>
          <a href="/en/#contributors">Contributors</a>
        </nav>
        <div className="header-right">
          <span>Search</span>
          <span className="pill">Saved · 04</span>
        </div>
      </div>
    </header>
  );
}
window.MHeader = MHeader;

function MHero() {
  return (
    <section className="thero" data-screen-label="01 Move Hero">
      <div className="thero-bg" style={{ backgroundImage: `url(${M_IMG.hero})` }} />
      <div className="thero-inner">
        <div>
          <div className="thero-eye">
            <span className="dot" />
            <span>Fitness · Sub-lane 02 - Move</span>
          </div>
          <h1>How to <span className="it">move</span> on purpose.</h1>
          <p className="lede">
            Stretching, mobility, walking, yoga, balance, posture, Pilates, and low-impact work. The quiet sessions that make the body feel usable before training, after sitting, and on the days that need movement without punishment.
          </p>
          <div className="meta-row">
            <span><strong>09</strong> sub-categories</span>
            <span className="sep">·</span>
            <span><strong>168</strong> guides &amp; growing</span>
            <span className="sep">·</span>
            <span>Updated weekly</span>
            <span className="sep">·</span>
            <span>General principles only.</span>
          </div>
        </div>
        <aside className="thero-aside">
          <div className="a-eye">From the Lane Editor</div>
          <p>
            "The useful mobility is the one you can repeat when nothing hurts, nothing is urgent, and nobody is watching."
          </p>
          <div className="by">
            <span className="ava">J.</span>
            <span>By <strong>Jenna</strong> · Lane Editor, Fitness · Atlanta</span>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.MHero = MHero;

const MOVE_FOUR = [
  {
    n: "01", slug: "stretching", name: "Stretching",
    dek: "Static holds, desk resets, tight hips, hamstrings, shoulders, calves, and the small stretches that help the body feel available again.",
    tags: "Holds - Desk body - Hips - Shoulders",
    count: 20, time: "3-6 min reads",
    feat: { kicker: "Featured in Stretching", title: "How to stretch after a desk day.", dek: "Hips, chest, neck, and the short reset that makes the afternoon feel less folded.", time: "5 min read" },
  },
  {
    n: "02", slug: "mobility", name: "Mobility",
    dek: "Active range you can actually use. Hips, shoulders, ankles, wrists, and t-spine work that shows up when you move.",
    tags: "Range - Hips - Shoulders - Ankles",
    count: 20, time: "3-8 min reads",
    feat: { kicker: "Featured in Mobility", title: "How to build a simple mobility routine.", dek: "A repeatable joint sequence for days when the whole body feels locked.", time: "5 min read" },
  },
  {
    n: "03", slug: "flexibility", name: "Flexibility",
    dek: "Longer-term range goals, patient progressions, and the difference between stretching for relief and training flexibility.",
    tags: "Progressions - Splits - Range goals",
    count: 17, time: "4-7 min reads",
    feat: { kicker: "Featured in Flexibility", title: "How to start flexibility training.", dek: "Choose one goal, one frequency, and one version you can repeat.", time: "5 min read" },
  },
  {
    n: "04", slug: "yoga", name: "Yoga",
    dek: "Beginner-friendly flows, breath, balance, and control. A repeatable way to put movement and attention in the same room.",
    tags: "Beginner flows - Breath - Balance",
    count: 20, time: "4-9 min reads",
    feat: { kicker: "Featured in Yoga", title: "How to start yoga at home.", dek: "A mat-sized first practice, a few words to know, and no costume change required.", time: "6 min read" },
  },
  {
    n: "05", slug: "walking", name: "Walking",
    dek: "Steps, pace, incline, treadmill walks, weather, errands, and the most ordinary movement habit that still changes a week.",
    tags: "Steps - Pace - Incline - Routes",
    count: 20, time: "3-6 min reads",
    feat: { kicker: "Featured in Walking", title: "How to start a walking routine.", dek: "A low-friction week for people who do not need a dramatic plan.", time: "5 min read" },
  },
  {
    n: "06", slug: "low-impact", name: "Low-Impact",
    dek: "Cycling, elliptical, pool work, walking, and easy circuits that reduce pounding without pretending effort disappeared.",
    tags: "Bike - Elliptical - Pool - Easy circuits",
    count: 20, time: "4-8 min reads",
    feat: { kicker: "Featured in Low-Impact", title: "How to choose a low-impact workout.", dek: "Match the tool to your joints, energy, goal, and the week around it.", time: "5 min read" },
  },
  {
    n: "07", slug: "balance", name: "Balance",
    dek: "Feet, ankles, hips, eyes, core, and single-leg control for steadier movement without making medical promises.",
    tags: "Feet - Ankles - Stability - Control",
    count: 17, time: "3-5 min reads",
    feat: { kicker: "Featured in Balance", title: "How to start balance training.", dek: "A simple progression from supported stance to controlled single-leg work.", time: "4 min read" },
  },
  {
    n: "08", slug: "posture", name: "Posture",
    dek: "Desk positions, neck and shoulder resets, upper-back work, breathing, breaks, and practical posture habits.",
    tags: "Desk body - Neck - Shoulders - Breaks",
    count: 17, time: "3-5 min reads",
    feat: { kicker: "Featured in Posture", title: "How to reset your posture after sitting.", dek: "Hips, chest, neck, breath, and a short break that changes the next hour.", time: "4 min read" },
  },
  {
    n: "09", slug: "pilates", name: "Pilates",
    dek: "Mat Pilates, breath, core control, glutes, spine, beginner sequences, and low-impact strength with precision first.",
    tags: "Mat - Core - Breath - Control",
    count: 17, time: "4-6 min reads",
    feat: { kicker: "Featured in Pilates", title: "How to start mat Pilates.", dek: "A first sequence, a few positions, and the breathing cues that matter.", time: "5 min read" },
  },
];
function MFour() {
  const [active, setActive] = React.useState(0);
  const cur = MOVE_FOUR[active];
  return (
    <section id="four" className="tfour" data-screen-label="02 The Nine">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Nine ways <span className="display italic" style={{color:"var(--accent)"}}>to move.</span></h2>
          <div className="meta">The body<br/>unlocking</div>
        </div>
        <div className="tfour-grid">
          <div className="tfour-list">
            {MOVE_FOUR.map((s, i) => (
              <a key={s.slug} href={`/en/fitness/move/${s.slug}/`} className="tfour-row"
                 onMouseEnter={() => setActive(i)}>
                <div className="num">{s.n}</div>
                <div className="body">
                  <h3 className="name">{s.name}<span className="it">.</span></h3>
                  <p className="dek">{s.dek}</p>
                  <div className="tags">{s.tags}</div>
                </div>
                <div className="meta">
                  <div className="ct"><strong>{s.count}</strong> guides</div>
                  <div>{s.time}</div>
                  <div className="arr">→</div>
                </div>
              </a>
            ))}
          </div>
          <aside className="tfour-rail">
            <div className="r-eye"><span className="dot" /><span>{cur.feat.kicker}</span></div>
            <div className="r-img">
              <img src={M_IMG[cur.slug.replace("-", "")]} alt={cur.name} />
            </div>
            <h4>How to <span className="it">{cur.feat.title.replace(/^How to /, "")}</span></h4>
            <p>{cur.feat.dek}</p>
            <div className="r-foot">
              <span>{cur.feat.time}</span>
              <span className="arr">Read →</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}
window.MFour = MFour;

function MPrinciples() {
  return (
    <section id="editorial" className="tedit" data-screen-label="03 Editorial">
      <div className="frame tedit-inner">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title">What we <span className="display italic" style={{color:"var(--accent)"}}>actually mean</span> by moving.</h2>
          <div className="meta">A short essay<br/>- if you read nothing else</div>
        </div>

        <div className="tedit-body">
          <div className="tedit-h first">§ I - The smallest useful dose.</div>
          <p>
            Moving is not the same thing as training. Training asks the body to adapt. Moving asks the body to stay in conversation with itself. That can be a ten-minute walk, a hip circle before a lift, a yoga flow on the floor, or the choice to get up from the desk before your shoulders start negotiating against you. The point is not to win the session. The point is to stay available for the next one.
          </p>

          <div className="tedit-h">§ II - Range you can use.</div>
          <p>
            Mobility is useful range, not a circus trick. If a position helps you squat, breathe, reach overhead, sit comfortably, walk farther, or feel less stiff after a long day, it belongs here. If it only exists so you can prove you can do it, it probably belongs somewhere else. We like small practices because small practices survive real life.
          </p>
          <p>
            The best movement work usually looks unimpressive from the outside. Ankles, hips, shoulders, spine. A few slow reps. A few held positions. Enough attention to notice what changed, not enough drama to make it the whole day.
          </p>

          <div className="tedit-pull">If it has to be heroic, it probably will not last.</div>

          <div className="tedit-h">§ III - Walking counts.</div>
          <p>
            Walking is the most underrated fitness habit because it refuses to look like content. It can be recovery, conditioning, sunlight, an errand, a commute, a nervous-system reset, or simply the easiest way to move when you do not want to work out. We count it because bodies count it. The internet can argue with itself.
          </p>

          <div className="tedit-h">§ IV - Pain changes the assignment.</div>
          <p>
            Stiff, tired, awkward, rusty - those are normal human words. Sharp pain, worsening pain, numbness, swelling, or anything that makes you wonder whether you should keep going changes the assignment. Stop reading a magazine and ask someone with credentials. Movement should make the next hour more possible, not turn into a private bet with your body.
          </p>

          <div className="tedit-h">§ V - Keep the practice boring enough to repeat.</div>
          <p>
            The Move lane is built for repeatability. Five minutes before training. Ten minutes in the morning. A walk after dinner. A short flow on a day when a workout would be too much. There is nothing glamorous about any of it. That is why it works. The boring stuff is allowed to be the foundation.
          </p>
        </div>
      </div>
    </section>
  );
}
window.MPrinciples = MPrinciples;

const MFEAT = [
  {
    img: "feat1", tag: "Mobility · Yoga",
    kicker: "The Long Read",
    h: "How to build a movement practice that does not become another job.",
    p: "Five minutes before the day starts, ten minutes when you need it, and a few rules for keeping mobility useful instead of turning it into a second workout.",
    time: "8 min read · Filed 05.03.26",
    by: "By Jenna",
    lead: true,
  },
  {
    img: "feat2", tag: "Flexibility",
    kicker: "Field Notes",
    h: "Desk body, meet the floor.",
    p: "A short reset for hips, shoulders, neck, and the kind of afternoon that folds you in half.",
    time: "5 min read",
    by: "By Jenna",
  },
  {
    img: "feat3", tag: "Low-Impact",
    kicker: "Practice",
    h: "The walk that counts twice.",
    p: "How to make a normal walk do a little more without making it weird.",
    time: "4 min read",
    by: "By Jenna",
  },
];

function MFeatured() {
  return (
    <section id="featured" className="ffeat" data-screen-label="04 Featured">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 03</div>
          <h2 className="title"><span className="display italic" style={{color:"var(--accent)"}}>Featured</span> reading.</h2>
          <div className="meta">Three pieces<br/>worth your morning</div>
        </div>
        <div className="ffeat-grid">
          {MFEAT.map((f, i) => (
            <a key={i} className={`ffeat-card ${f.lead ? "lead" : ""}`} href="#">
              <div className="f-img">
                <img src={M_IMG[f.img]} alt={`${f.h} movement feature image`} />
                <span className="f-tag">{f.tag}</span>
              </div>
              <div className="f-kick">{f.kicker}</div>
              <h3>{f.h.split(" ").slice(0, 2).join(" ") + " "}<span className="it">{f.h.split(" ").slice(2).join(" ")}</span></h3>
              <p>{f.p}</p>
              <div className="f-foot">
                <span>{f.by}</span>
                <span>{f.time}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MFeatured = MFeatured;

function MPull() {
  return (
    <section className="fpull" data-screen-label="05 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">"</span>
        <blockquote>
          The movement you <span className="it">repeat</span> is more useful than the perfect routine you keep meaning to start.
        </blockquote>
        <cite>From the Lane Editor - <a href="#four">Read the four</a></cite>
      </div>
    </section>
  );
}
window.MPull = MPull;

const MSTART = [
  { n: "01", h: "find ten minutes of mobility", p: "The shortlist that beats the long list on a real morning.", time: "5 min" },
  { n: "02", h: "stretch after a desk day", p: "Three areas, six minutes, no performance required.", time: "4 min" },
  { n: "03", h: "start yoga without overthinking it", p: "A plain first flow and a few useful words.", time: "6 min" },
  { n: "04", h: "make walking count", p: "Pace, hills, errands, weather - the knobs that matter.", time: "5 min" },
];

function MStart() {
  return (
    <section id="start" className="fstart" data-screen-label="06 Start Here">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 04</div>
          <h2 className="title">If you're <span className="display italic" style={{color:"var(--accent)"}}>new here.</span></h2>
          <div className="meta">Four short reads<br/>to start with</div>
        </div>
        <div className="fstart-grid">
          {MSTART.map((s) => (
            <a key={s.n} className="fstart-tile" href="#">
              <div className="s-num"><span>No. {s.n}</span><span className="arr">→</span></div>
              <h4>How to <span className="it">{s.h}.</span></h4>
              <p>{s.p}</p>
              <div className="s-num" style={{marginTop:"auto",paddingTop:18,borderTop:"1px solid var(--rule)"}}>
                <span>{s.time}</span>
                <span>Read</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.MStart = MStart;

function MFooter() {
  const SharedFooter = window.HowToFooter;
  return SharedFooter ? <SharedFooter screenLabel="08 Footer" /> : null;
}
window.MFooter = MFooter;