/* global React */

/* ============================================================
   fitness/recover.html - Layer-2 Fitness sub-page
   Sub-cats: Rest · Sleep · Soft tissue · Injury prevention
   ============================================================ */

const R_IMG = {
  hero: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=2400&q=80",
  restdays: "https://images.unsplash.com/photo-1519823551278-64ac92734fb1?w=1400&q=80",
  sleep: "https://images.unsplash.com/photo-1511295742362-92c96b1cf484?w=1400&q=80",
  soreness: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",
  deloads: "https://images.unsplash.com/photo-1517344884509-a0c97ec11bcc?w=1400&q=80",
  softtissue: "https://images.unsplash.com/photo-1599058917212-d750089bc07e?w=1400&q=80",
  prevention: "https://images.unsplash.com/photo-1576678927484-cc907957088c?w=1400&q=80",
  activerecovery: "https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=1400&q=80",
  returntraining: "https://images.unsplash.com/photo-1522898467493-49726bf28798?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1522898467493-49726bf28798?w=1400&q=80",
};

function RCrumb() {
  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">Recover</span>
        </div>
        <div>Lane 02 · Sub 06 of 06</div>
      </div>
    </div>
  );
}
window.RCrumb = RCrumb;

function RHeader() {
  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.RHeader = RHeader;

function RHero() {
  return (
    <section className="thero" data-screen-label="01 Recover Hero">
      <div className="thero-bg" style={{ backgroundImage: `url(${R_IMG.hero})` }} />
      <div className="thero-inner">
        <div>
          <div className="thero-eye">
            <span className="dot" />
            <span>Fitness · Sub-lane 06 - Recover</span>
          </div>
          <h1>How to <span className="it">recover</span> on purpose.</h1>
          <p className="lede">
            Rest days, sleep for recovery, soreness, deloads, soft tissue, injury-prevention literacy, active recovery, and return-to-training decisions. The half of training that happens when you are not training.
          </p>
          <div className="meta-row">
            <span><strong>08</strong> sub-categories</span>
            <span className="sep">·</span>
            <span><strong>96</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 days you do less are not empty. They are where the training either compounds or collects interest."
          </p>
          <div className="by">
            <span className="ava">J.</span>
            <span>By <strong>Jenna</strong> · Lane Editor, Fitness · Atlanta</span>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.RHero = RHero;

const RECOVER_FOUR = [
  {
    n: "01", slug: "rest", img: "rest", name: "Rest",
    dek: "Rest days, easy days, deloads, active recovery, and the guilt people attach to doing less. The plan works better when the floor is built in.",
    tags: "Rest days · Deloads · Easy days · Active recovery",
    count: 8, time: "4-10 min reads",
    feat: { kicker: "Featured in Rest", title: "How to take a real rest day, on purpose.", dek: "Less guilt, more couch, and why the days you do not train are quietly part of the program.", time: "5 min read" },
  },
  {
    n: "02", slug: "sleep", img: "sleep", name: "Sleep",
    dek: "Sleep as the recovery baseline: timing, consistency, late caffeine, hard sessions, and why recovery gets expensive when sleep is missing.",
    tags: "Timing · Consistency · Caffeine · Hard sessions",
    count: 8, time: "4-9 min reads",
    feat: { kicker: "Featured in Sleep", title: "How to treat sleep like training.", dek: "Not hacks. Just the boring schedule, the room, the caffeine line, and the week that feels different when sleep is not optional.", time: "7 min read" },
  },
  {
    n: "03", slug: "soft-tissue", img: "softtissue", name: "Soft Tissue",
    dek: "Foam rolling, massage tools, stretching, soreness, and the difference between feeling better for ten minutes and solving a real problem.",
    tags: "Foam rolling · Soreness · Massage tools · Stretching",
    count: 7, time: "4-8 min reads",
    feat: { kicker: "Featured in Soft Tissue", title: "How to foam roll without pretending it is magic.", dek: "What it can do, what it probably cannot, and why feeling better still counts for something.", time: "6 min read" },
  },
  {
    n: "04", slug: "injury-prevention", img: "prevention", name: "Injury Prevention",
    dek: "Warm-ups, load management, technique, pain literacy, and the useful humility of asking a professional before a small problem becomes your whole month.",
    tags: "Warm-ups · Load · Technique · Pain literacy",
    count: 8, time: "5-11 min reads",
    feat: { kicker: "Featured in Injury Prevention", title: "How to know when not to push through.", dek: "A plain-English guide to stopping, noticing, and getting the right eyes on the problem.", time: "8 min read" },
  },
];

const RECOVER_EIGHT = [
  {
    n: "01", slug: "rest-days", img: "restdays", name: "Rest Days",
    dek: "What to do, what not to do, easy movement, guilt, soreness, and why some days work better when rest has a job.",
    tags: "Easy days - Guilt - Readiness",
    count: 12, time: "4-8 min reads",
    feat: { kicker: "Featured in Rest Days", title: "How to take a real rest day, on purpose.", dek: "Less guilt, more program, and why the day off still has a job.", time: "5 min read" },
  },
  {
    n: "02", slug: "sleep-for-recovery", img: "sleep", name: "Sleep for Recovery",
    dek: "Sleep through the fitness lens: consistency, late caffeine, late workouts, naps, travel, and readiness for the next session.",
    tags: "Consistency - Caffeine - Late sessions",
    count: 12, time: "4-8 min reads",
    feat: { kicker: "Featured in Sleep for Recovery", title: "How to treat sleep like training.", dek: "The boring schedule, the caffeine line, and the week that feels different when sleep is not optional.", time: "7 min read" },
  },
  {
    n: "03", slug: "soreness", img: "soreness", name: "Soreness",
    dek: "DOMS, normal soreness, what helps, what does not, and when soreness is a signal to back off.",
    tags: "DOMS - Signals - Back off",
    count: 12, time: "4-8 min reads",
    feat: { kicker: "Featured in Soreness", title: "How to read soreness without chasing it.", dek: "New work, harder work, pain boundaries, and why soreness is not the scoreboard.", time: "6 min read" },
  },
  {
    n: "04", slug: "deloads", img: "deloads", name: "Deloads",
    dek: "When to pull volume or intensity down, how to make a lighter week, and why deloading is not laziness.",
    tags: "Volume - Intensity - Fatigue",
    count: 12, time: "4-8 min reads",
    feat: { kicker: "Featured in Deloads", title: "How to make a lighter week useful.", dek: "A planned pullback that keeps the work from outrunning recovery.", time: "6 min read" },
  },
  {
    n: "05", slug: "foam-rolling-soft-tissue", img: "softtissue", name: "Foam Rolling & Soft Tissue",
    dek: "Foam rolling, massage tools, temporary relief, what they can and cannot do, and when pain needs real help.",
    tags: "Foam rolling - Tools - Relief",
    count: 12, time: "4-8 min reads",
    feat: { kicker: "Featured in Soft Tissue", title: "How to foam roll without pretending it is magic.", dek: "What it can do, what it probably cannot, and why feeling better still counts.", time: "6 min read" },
  },
  {
    n: "06", slug: "injury-prevention", img: "prevention", name: "Injury Prevention",
    dek: "Load management, warm-ups, technique, pain literacy, and when to stop and get qualified help.",
    tags: "Load - Technique - Pain literacy",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Injury Prevention", title: "How to know when not to push through.", dek: "A plain-English guide to stopping, noticing, and getting the right eyes on the problem.", time: "8 min read" },
  },
  {
    n: "07", slug: "active-recovery", img: "activerecovery", name: "Active Recovery",
    dek: "Walking, easy cycling, mobility, light movement, and when active should still mean easy.",
    tags: "Walking - Mobility - Easy cardio",
    count: 12, time: "4-8 min reads",
    feat: { kicker: "Featured in Active Recovery", title: "How to keep active recovery easy.", dek: "Movement that supports the week without sneaking in another workout.", time: "5 min read" },
  },
  {
    n: "08", slug: "return-to-training", img: "returntraining", name: "Return to Training",
    dek: "Coming back after illness, travel, time off, soreness, or small setbacks without trying to repay every missed session.",
    tags: "Time off - Illness - Reentry",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Return to Training", title: "How to come back without overcorrecting.", dek: "A sensible re-entry week, not a dramatic repayment plan.", time: "7 min read" },
  },
];

function RFour() {
  const [active, setActive] = React.useState(0);
  const cur = RECOVER_EIGHT[active];
  return (
    <section id="four" className="tfour" data-screen-label="02 The Eight">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Eight ways <span className="display italic" style={{color:"var(--accent)"}}>to recover.</span></h2>
          <div className="meta">A calmer field<br/>manual</div>
        </div>
        <div className="tfour-grid">
          <div className="tfour-list">
            {RECOVER_EIGHT.map((s, i) => (
              <a key={s.slug} href={`/en/fitness/recover/${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={R_IMG[cur.img]} 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.RFour = RFour;

function RPrinciples() {
  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 recover.</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 - Recovery is not the absence of training.</div>
          <p>
            Recovery is what lets training count. It is sleep, rest, food, time, stress, easy movement, and the decision not to turn every signal from your body into a challenge. The internet likes to make recovery look like a product category. Most of it is still a schedule and a little honesty.
          </p>

          <div className="tedit-h">§ II - Rest is a training variable.</div>
          <p>
            A rest day is not a moral failure. It is a variable in the program, the same as sets and reps. If the plan never makes room for fatigue, life will make room for it in a worse way. Good training has pressure and release. Skip the release and the pressure stops being useful.
          </p>
          <p>
            That does not mean doing nothing is always the answer. Sometimes a walk helps. Sometimes a lighter day helps. Sometimes the right move is simply to stop negotiating and sleep.
          </p>

          <div className="tedit-pull">The work compounds when the recovery has somewhere to land.</div>

          <div className="tedit-h">§ III - Soreness is information, not a scoreboard.</div>
          <p>
            Being sore can mean you did something new, harder, longer, or just unfamiliar. It does not automatically mean the workout was better. It does not automatically mean something is wrong. We treat soreness as information and pain as a reason to get more careful.
          </p>

          <div className="tedit-h">§ IV - Pain changes the room.</div>
          <p>
            Sharp pain, worsening pain, swelling, numbness, instability, pain that changes how you move, or anything that makes you wonder whether you should keep going is outside the job of a magazine. Stop, notice what happened, and ask a qualified professional. Pushing through is not a personality trait worth protecting.
          </p>

          <div className="tedit-h">§ V - The goal is being able to come back.</div>
          <p>
            Recover is built around a simple standard: can you come back tomorrow, next week, next month, and keep doing the work? If the answer is yes, the plan is probably doing something right. If the answer is no, the recovery is no longer optional.
          </p>
        </div>
      </div>
    </section>
  );
}
window.RPrinciples = RPrinciples;

const R_FEAT = [
  {
    img: "feat1", tag: "Recover · Rest",
    kicker: "The Long Read",
    h: "How to make recovery part of the program instead of the apology.",
    p: "Rest days, lighter days, sleep, soreness, and the quieter decisions that make hard training possible for longer than six weeks.",
    time: "10 min read · Filed 05.03.26",
    by: "By Jenna",
    lead: true,
  },
  {
    img: "feat2", tag: "Sleep",
    kicker: "Field Notes",
    h: "Sleep is the lever nobody wants to count.",
    p: "The least exciting recovery tool is still doing most of the work.",
    time: "6 min read",
    by: "By Jenna",
  },
  {
    img: "feat3", tag: "Injury Prevention",
    kicker: "Practice",
    h: "Stop before it becomes a story.",
    p: "The small skill of noticing when the session has changed assignments.",
    time: "7 min read",
    by: "By Jenna",
  },
];

function RFeatured() {
  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">
          {R_FEAT.map((f, i) => (
            <a key={i} className={`ffeat-card ${f.lead ? "lead" : ""}`} href="#">
              <div className="f-img">
                <img src={R_IMG[f.img]} alt={`${f.h} recovery 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.RFeatured = RFeatured;

function RPull() {
  return (
    <section className="fpull" data-screen-label="05 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">"</span>
        <blockquote>
          Rest is not where training disappears. It is where training <span className="it">becomes useful.</span>
        </blockquote>
        <cite>From the Lane Editor - <a href="#four">Read the four</a></cite>
      </div>
    </section>
  );
}
window.RPull = RPull;

const R_START = [
  { n: "01", h: "take a real rest day", p: "Less guilt, more program. The day off still has a job.", time: "5 min" },
  { n: "02", h: "treat sleep like training", p: "The boring schedule that makes the hard work land.", time: "7 min" },
  { n: "03", h: "foam roll without magic", p: "What it can do, what it cannot, and why relief still counts.", time: "6 min" },
  { n: "04", h: "know when not to push", p: "Pain literacy, stopping early, and getting the right help.", time: "8 min" },
];

function RStart() {
  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">
          {R_START.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.RStart = RStart;

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