/* global React */

/* ============================================================
   health/recovery.html - Layer-2 Recovery editorial page
   Post-injury/post-surgery recovery literacy. Care-team questions only.
   No rehab instructions, return-to-play protocols, or treatment guidance.
   ============================================================ */

const RECOVERY_IMG = {
  hero: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1800&q=80",
  instructions: "https://images.unsplash.com/photo-1516549655169-df83a0774514?w=1400&q=80",
  support: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1400&q=80",
  tracking: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1400&q=80",
  return: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1516549655169-df83a0774514?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",
};

function RecoveryHeader() {
  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/" className="active">Health</a>
          <a href="/en/fitness/">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.RecoveryHeader = RecoveryHeader;

function RecoveryMasthead() {
  return (
    <div className="masthead">
      <div className="masthead-inner">
        <div>Issue 08 - Spring/Summer '26</div>
        <div className="masthead-mid">
          <span>The How To Co.</span>
          <span>-</span>
          <span className="pulse">Vol. 08 - Health &amp; Fitness</span>
        </div>
        <div>EN / USD</div>
      </div>
    </div>
  );
}
window.RecoveryMasthead = RecoveryMasthead;

function RecoveryCrumb() {
  return (
    <div className="crumb">
      <div className="crumb-inner">
        <div className="crumb-trail">
          <a href="/en/">How To: Health &amp; Fitness</a>
          <span className="sep">/</span>
          <a href="/en/health/">Health</a>
          <span className="sep">/</span>
          <span className="here">Recovery</span>
        </div>
        <div>Sub-lane 06 of 06 - Light edition</div>
      </div>
    </div>
  );
}
window.RecoveryCrumb = RecoveryCrumb;

function RecoveryHero() {
  return (
    <section className="bhero" data-screen-label="01 Recovery Hero">
      <div className="bhero-inner">
        <div>
          <div className="bhero-eyebrow">
            <span className="dot" />
            <span>Sub-lane 06 - Recovery</span>
            <span className="crumblet">- Instructions - Support - Return</span>
          </div>
          <h1>
            The long road<br/>
            <span className="it">back.</span>
          </h1>
          <p className="standfirst">
            Post-injury, post-surgery, rehab literacy, and the questions to ask the people guiding your recovery. We do not give recovery protocols. We help you understand the room you are already in.
          </p>
          <div className="meta-row">
            <span><strong>04</strong> rooms</span>
            <span className="sep">-</span>
            <span><strong>16</strong> guides in Recovery</span>
            <span className="sep">-</span>
            <span>Updated 05.05.26</span>
            <span className="sep">-</span>
            <span>Care-team first. <strong>Always.</strong></span>
          </div>
        </div>
        <div className="bhero-photo">
          <img src={RECOVERY_IMG.hero} alt="Quiet recovery movement in warm light" />
          <span className="credit">Photo - Recovery desk notes</span>
        </div>
      </div>
    </section>
  );
}
window.RecoveryHero = RecoveryHero;

const RECOVERY_ROOMS = [
  { n: "01", slug: "instructions", name: "Understanding Instructions", dek: "What discharge notes, restrictions, follow-ups, and red-flag language are trying to do. Ask the care team when anything is unclear.", count: 4, time: "5-11 min reads", img: "instructions", tag: "Discharge - Restrictions - Follow-up", ribbon: "Start here" },
  { n: "02", slug: "support-at-home", name: "Support at Home", dek: "Rides, meals, stairs, sleep setup, chores, communication, and the ordinary logistics that make recovery less lonely.", count: 4, time: "4-9 min", img: "support", tag: "Home - Help - Logistics" },
  { n: "03", slug: "tracking-and-questions", name: "Tracking & Questions", dek: "Symptoms to write down, questions to bring, changes to report, and the habit of not relying on memory alone.", count: 4, time: "5-10 min", img: "tracking", tag: "Notes - Changes - Follow-up" },
  { n: "04", slug: "returning-slowly", name: "Returning Slowly", dek: "A literacy guide to patience, clearance, gradual return, and why the person in charge of the plan is not an article.", count: 4, time: "5-10 min", img: "return", tag: "Clearance - Patience - Gradual return" },
];

function RecoveryEssay() {
  const [active, setActive] = React.useState(0);
  const cur = RECOVERY_ROOMS[active];
  return (
    <section className="essay mind-essay" data-screen-label="02 Editor's Essay">
      <div className="essay-inner">
        <article className="essay-body">
          <div className="byline">
            <span className="ava">T.</span>
            <span>By <strong>Torrie</strong> - Lane Editor, Health</span>
            <span className="sep">-</span>
            <span>Filed Tuesday, DC</span>
            <span className="sep">-</span>
            <span>6 min read</span>
          </div>

          <p className="lede">
            Recovery is the place where we say no to a lot. No rehab plans. No return-to-sport timelines. No "try this exercise." No guesses about pain. No pretending that a clean paragraph can replace the messy reality of a surgeon, physical therapist, primary care doctor, discharge nurse, or specialist who knows what happened.
          </p>

          <p>
            That does not make the lane empty. It makes it honest. Recovery has paperwork, logistics, questions, fear, impatience, home setup, follow-up appointments, restrictions, and the weird emotional math of feeling better before you are cleared to do more. There is plenty to explain without crossing into treatment.
          </p>

          <div className="crosshead">What is in this sub-lane</div>

          <p>
            <span className="accent">Understanding Instructions</span> is about discharge notes, restrictions, follow-ups, and the words that should send you back to the care team. <span className="accent">Support at Home</span> is logistics: rides, meals, stairs, sleep setup, chores, and asking for help before you are stranded.
          </p>

          <p>
            <span className="accent">Tracking &amp; Questions</span> is the recovery notebook: what changed, what hurt, what improved, what needs to be asked. <span className="accent">Returning Slowly</span> is not a plan. It is a reminder that clearance, progression, and limits belong with the people responsible for your recovery.
          </p>

          <div className="pull-line">
            If the question changes what you do with an injured or healing body, the answer belongs to your care team.
          </div>
        </article>

        <aside className="mind-board" aria-label="Recovery rooms">
          <div className="a-head"><span className="dot" /><span>Recovery file - 04 rooms</span></div>
          <h5>Choose a room <span className="accent">- stay inside the plan.</span></h5>
          <div className="mind-folder-list">
            {RECOVERY_ROOMS.map((room, i) => (
              <a key={room.slug} className={`mind-folder${active === i ? " on" : ""}`} href={`/en/health/recovery/${room.slug}/`} onMouseEnter={() => setActive(i)} onFocus={() => setActive(i)}>
                <span className="n">{room.n}</span>
                <span className="txt"><strong>{room.name}</strong><em>{room.tag}</em></span>
              </a>
            ))}
          </div>
          <div className="mind-readout">
            <span>Room {cur.n}</span>
            <strong>{cur.name}</strong>
            <p>{cur.dek}</p>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.RecoveryEssay = RecoveryEssay;

function RecoveryMenu() {
  return (
    <section className="bmenu" data-screen-label="03 Rooms">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Four rooms <span className="display italic" style={{color:"var(--accent)"}}>for the road back.</span></h2>
          <div className="meta">Short because<br/>the guardrail is real</div>
        </div>
        <div className="bmenu-grid">
          {RECOVERY_ROOMS.map((r) => (
            <a key={r.slug} href={`/en/health/recovery/${r.slug}/`} className={`bcard${r.ribbon ? " hero" : ""}`}>
              {r.ribbon ? <span className="ribbon">{r.ribbon}</span> : null}
              <div className="b-num">{r.n}.</div>
              <div className="b-img"><img src={RECOVERY_IMG[r.img]} alt={r.name} /></div>
              <h3>{r.name}<span className="it">.</span></h3>
              <p>{r.dek}</p>
              <div className="b-foot"><span><strong style={{color:"inherit"}}>{r.count}</strong> guides - {r.time}</span><span className="arr">→</span></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.RecoveryMenu = RecoveryMenu;

const RECOVERY_FEAT = [
  { img: "feat1", href: "/en/health/recovery/instructions/read-recovery-instructions-before-you-leave/", tag: "Instructions - Recovery", kicker: "Plain Guide", h: "How to read recovery instructions before you leave.", p: "Restrictions, follow-ups, red flags, who to call, and what to repeat back while the care team is still there.", time: "7 min - Filed 05.05.26", by: "By Torrie" },
  { img: "feat2", href: "/en/health/recovery/support-at-home/set-up-your-home-for-recovery/", tag: "Support at Home", kicker: "Field Notes", h: "The recovery setup nobody regrets.", p: "Rides, meals, stairs, chargers, pillows, meds list, and a person who knows the plan.", time: "5 min", by: "By Torrie" },
  { img: "feat3", href: "/en/health/recovery/returning-slowly/ask-if-you-are-cleared-to-do-more/", tag: "Returning Slowly", kicker: "Practice", h: "How to ask about coming back.", p: "Clearance, limits, next steps, and the questions that belong with your clinician or PT.", time: "6 min", by: "By Torrie" },
];

function RecoveryFeat() {
  return (
    <section className="bfeat" data-screen-label="04 Featured">
      <div className="frame">
        <div className="sec-head"><div className="num">No. 02</div><h2 className="title">From the <span className="display italic" style={{color:"var(--accent)"}}>Recovery desk.</span></h2><div className="meta">Three reads<br/>worth saving</div></div>
        <div className="bfeat-grid">
          {RECOVERY_FEAT.map((f, i) => (
            <a key={i} className="feat-card" href={f.href}>
              <div className="f-img"><img src={RECOVERY_IMG[f.img]} alt={`${f.h} health 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.RecoveryFeat = RecoveryFeat;

const RECOVERY_LINES = [
  { n: "01", t: "We do not give rehab exercises, timelines, or return-to-play plans." },
  { n: "02", t: "We do not tell you whether pain, swelling, bleeding, numbness, fever, or a new symptom is okay." },
  { n: "03", t: "We do not override discharge instructions or a clinician's restrictions." },
  { n: "04", t: "If something feels wrong, worsening, urgent, or unsafe, contact the care team now." },
];

function RecoveryCall() {
  return (
    <section className="bcall" data-screen-label="05 Guardrails">
      <div className="bcall-inner">
        <div>
          <div className="label"><span className="dot" /><span>When to put down the magazine</span></div>
          <h2>If the question changes <span className="it">the plan,</span><br/>call the care team.</h2>
          <p className="bcall-lede">Recovery pages are short on purpose. The unsafe material is left out, not forgotten.</p>
          <a href="/en/health/" className="bcall-cta">Back to Health →</a>
        </div>
        <div className="bcall-list">
          {RECOVERY_LINES.map((s) => <div className="row" key={s.n}><div className="n">No. {s.n}</div><div className="t">{s.t}</div></div>)}
        </div>
      </div>
    </section>
  );
}
window.RecoveryCall = RecoveryCall;

const RECOVERY_START = [
  { n: "01", href: "/en/health/recovery/instructions/repeat-back-recovery-instructions/", h: "repeat back the instructions", p: "Before you leave, say the plan out loud and ask what you missed.", time: "4 min" },
  { n: "02", href: "/en/health/recovery/support-at-home/set-up-your-home-for-recovery/", h: "set up the first week", p: "Rides, meals, stairs, phone numbers, and the home details that matter.", time: "5 min" },
  { n: "03", href: "/en/health/recovery/tracking-and-questions/keep-a-simple-recovery-log/", h: "track changes clearly", p: "The notebook that helps a follow-up visit move faster.", time: "5 min" },
  { n: "04", href: "/en/health/recovery/returning-slowly/ask-if-you-are-cleared-to-do-more/", h: "ask about returning slowly", p: "The questions for the person who actually clears you.", time: "5 min" },
];

function RecoveryStart() {
  return (
    <section className="start" data-screen-label="06 Start Here">
      <div className="frame">
        <div className="sec-head"><div className="num">No. 03</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="start-grid">
          {RECOVERY_START.map((s) => (
            <a key={s.n} className="start-tile" href={s.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.RecoveryStart = RecoveryStart;

function RecoveryCareNote() {
  return (
    <section className="carenote" data-screen-label="07 Care Note">
      <div className="carenote-inner">
        <div className="label"><span className="dot" /><span>A note on recovery</span></div>
        <p>
          HowTo: Recovery is a <strong>magazine</strong>, not a doctor, surgeon, physical therapist, discharge nurse, rehab plan, or treatment protocol. Nothing here replaces your instructions or care team. If anything feels wrong, ask them first.
        </p>
      </div>
    </section>
  );
}
window.RecoveryCareNote = RecoveryCareNote;