/* global React */

const RECOVERY_L3 = {
  instructions: {
    name: "Understanding Instructions",
    crumb: "Recovery - Notes, restrictions, and follow-up",
    title: <>How to understand the <span className="it">instructions</span><br/>before the plan gets fuzzy.</>,
    standfirst: "Discharge notes, restrictions, follow-up dates, call lines, red-flag language, and the plain questions to ask before you leave.",
    image: "https://images.unsplash.com/photo-1516549655169-df83a0774514?w=1800&q=80",
    updated: "05.09.26",
    note: "Instructions are not useful until you can repeat them in your own words.",
    lede: "Recovery often begins with a stack of paper, a portal message, or a conversation you heard while tired. The instructions may be correct, but that does not mean they are easy to use. Restrictions, follow-up dates, warning language, medication lists, wound notes, movement limits, and phone numbers can blur together fast.",
    second: "This hub is not here to interpret the plan or change it. It helps you slow down long enough to find the pieces, ask what is unclear, and leave with language you can actually use at home.",
    deviceTitle: <>The <span className="it">instruction packet</span>.</>,
    deviceMeta: "Read. Repeat. Clarify.",
    deviceLead: "The safest question is often the simplest one: what exactly should I do if this changes?",
    deviceRows: [
      ["Restrictions", "What you should avoid, for how long, and who clears the next step.", "Limits"],
      ["Follow-up", "The date, person, location, and reason for the next check-in.", "Next"],
      ["Call line", "Who to contact during office hours, after hours, and when the issue cannot wait.", "Contact"],
      ["Warning language", "The words in the instructions that mean stop guessing and get help.", "Care now"],
      ["Repeat-back", "Saying the plan in your own words while someone can still correct it.", "Clarity"],
    ],
    featureTitle: <>Before you <span className="it">leave</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1584982751601-97dcc096659c?w=1600&q=80",
    featureDek: "The last few minutes matter because home is where the questions multiply.",
    featureItems: [
      ["Circle", "Mark the restrictions, follow-up date, contact number, and warning language."],
      ["Ask", "What would make you want me to call, come back, or seek urgent care?"],
      ["Share", "Make sure the person helping at home can see the same instructions."],
    ],
    cardsTitle: <>What should be <span className="it">clear</span>.</>,
    cards: [
      ["Who is responsible", "Know which office or clinician owns the next question."],
      ["What changes the plan", "Ask what kind of change should prompt contact."],
      ["What is off-limits", "Restrictions should be specific enough to follow."],
      ["What happens next", "A recovery plan needs a next step, not just a goodbye."],
    ],
    guides: [
      ["01", "How to read recovery instructions before you leave", "What to circle, repeat back, and ask while help is still in the room.", "Start", "read-recovery-instructions-before-you-leave"],
      ["02", "How to understand recovery restrictions", "Limits, clearance, and why guessing your own timeline is not the move.", "Restrictions", "understand-recovery-restrictions"],
      ["03", "How to know who to call during recovery", "Office lines, after-hours numbers, urgent care, and emergency instructions.", "Contact", "know-who-to-call-during-recovery"],
      ["04", "How to repeat back recovery instructions", "The simple check that catches confusion before you get home.", "Repeat", "repeat-back-recovery-instructions"],
    ],
    care: "If instructions mention urgent symptoms, sudden changes, worsening pain, fever, bleeding, breathing trouble, numbness, or anything that feels unsafe, contact the care team or seek urgent medical care instead of interpreting it alone.",
  },
  "support-at-home": {
    name: "Support at Home",
    crumb: "Recovery - Rides, rooms, and real life",
    title: <>How to make home less <span className="it">heroic</span><br/>after care.</>,
    standfirst: "Rides, meals, stairs, sleep setup, chores, communication, helpers, and the ordinary logistics that keep recovery from becoming a solo project.",
    image: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1800&q=80",
    updated: "05.09.26",
    note: "A good home setup is not dramatic. It is reachable water, charged phones, clear numbers, and fewer trips across the room.",
    lede: "Recovery at home is often less about motivation and more about friction. Where do you sleep? Who drives? Which room has the least stairs? Who understands the instructions? What happens when food, laundry, pets, childcare, trash, prescriptions, and follow-up calls all keep happening anyway?",
    second: "This hub stays with logistics. It does not tell you how to heal faster or what your body should tolerate. It helps you set up the week so the care team's plan is easier to follow.",
    deviceTitle: <>The <span className="it">home setup</span>.</>,
    deviceMeta: "Lower the friction.",
    deviceLead: "Recovery support starts with making the necessary things easier to reach and the unnecessary trips easier to avoid.",
    deviceRows: [
      ["Ride plan", "How you get home, return for follow-up, and avoid driving if restricted.", "Transport"],
      ["Sleep zone", "A place that matches your instructions, stairs, bathroom access, and comfort.", "Room"],
      ["Food and water", "Simple meals, hydration, and help that does not require hosting energy.", "Basics"],
      ["Chores and care", "Pets, kids, laundry, trash, errands, and the jobs recovery interrupts.", "Reality"],
      ["Shared notes", "Instructions, phone numbers, appointments, and changes helpers should know.", "Team"],
    ],
    featureTitle: <>The first <span className="it">48 hours</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1519682337058-a94d519337bc?w=1600&q=80",
    featureDek: "The first stretch at home is not the time to improvise every small task.",
    featureItems: [
      ["Place", "Put water, chargers, medications if prescribed, instructions, and phone numbers within reach."],
      ["Assign", "Give specific jobs to specific people instead of making a vague request for help."],
      ["Protect", "If the instructions limit movement, build the room around those limits rather than testing them."],
    ],
    cardsTitle: <>Help that actually <span className="it">helps</span>.</>,
    cards: [
      ["Specific", "A ride at 2 PM beats 'let me know if you need anything.'"],
      ["Quiet", "Support should reduce work, not create hosting pressure."],
      ["Written", "A shared note saves everyone from guessing."],
      ["Flexible", "Recovery days change. The setup should be easy to adjust."],
    ],
    guides: [
      ["01", "How to set up your home for recovery", "Rooms, stairs, chargers, water, instructions, and fewer unnecessary trips.", "Setup", "set-up-your-home-for-recovery"],
      ["02", "How to ask for practical help after care", "Rides, meals, errands, childcare, pet care, and making the ask specific.", "Help", "ask-for-practical-help-after-care"],
      ["03", "How to plan recovery rides and follow-ups", "Transportation, waiting rooms, pickup windows, and not driving when restricted.", "Rides", "plan-recovery-rides-and-follow-ups"],
      ["04", "How to make a recovery support note", "The shared page helpers can read without making you explain everything twice.", "Notes", "make-a-recovery-support-note"],
    ],
    care: "If a home setup question affects restrictions, movement, wound care, medication use, or symptoms, ask the care team before adjusting the plan.",
  },
  "tracking-and-questions": {
    name: "Tracking & Questions",
    crumb: "Recovery - Notes, changes, and follow-up",
    title: <>How to track recovery without turning every <span className="it">detail</span><br/>into a verdict.</>,
    standfirst: "What changed, what improved, what got harder, what questions came up, and how to bring a cleaner note to the next care conversation.",
    image: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1800&q=80",
    updated: "05.09.26",
    note: "The point of tracking is not to diagnose yourself. It is to help the care team see the shape of the week.",
    lede: "Recovery can make memory unreliable. Days blur. A symptom feels huge at midnight and hard to describe by morning. A question comes up in the kitchen and disappears in the exam room. Tracking helps when it stays modest: dates, changes, questions, instructions, and what you need clarified next.",
    second: "This hub is a notebook, not a judgment machine. It helps you notice and report. It does not tell you what a change means or whether something is safe.",
    deviceTitle: <>The <span className="it">recovery log</span>.</>,
    deviceMeta: "Short notes beat perfect memory.",
    deviceLead: "A useful log is small enough to keep and clear enough to bring to follow-up.",
    deviceRows: [
      ["Date and time", "When a change happened or when you noticed it.", "When"],
      ["What changed", "A plain description without trying to name the cause.", "Change"],
      ["What helped or hurt", "Only if your care team asked you to notice it or it affects the question.", "Pattern"],
      ["Questions", "The things you want answered at follow-up or sooner.", "Ask"],
      ["Instructions", "Any plan update, call-back, appointment, or clearance note.", "Plan"],
    ],
    featureTitle: <>Bring a better <span className="it">question</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1517842645767-c639042777db?w=1600&q=80",
    featureDek: "The best follow-up note helps the care team answer faster.",
    featureItems: [
      ["Name", "Write the concern in one sentence without diagnosing it."],
      ["Sort", "Separate urgent changes from routine follow-up questions."],
      ["Ask", "What should I do now, what should I watch, and when should I contact you again?"],
    ],
    cardsTitle: <>Track what helps the <span className="it">room</span>.</>,
    cards: [
      ["Changes", "What is different from yesterday or from the instructions."],
      ["Barriers", "What makes the plan hard to follow at home."],
      ["Questions", "The repeated doubts worth asking directly."],
      ["Updates", "What the care team told you after the last call."],
    ],
    guides: [
      ["01", "How to keep a simple recovery log", "Dates, changes, questions, and enough context for follow-up.", "Log", "keep-a-simple-recovery-log"],
      ["02", "How to prepare questions for a recovery follow-up", "What to ask, what to bring, and how to leave with the next step.", "Questions", "prepare-questions-for-recovery-follow-up"],
      ["03", "How to describe a recovery change clearly", "Plain language, timing, pattern, and avoiding self-diagnosis.", "Describe", "describe-a-recovery-change-clearly"],
      ["04", "How to know when a recovery question should not wait", "Urgent instructions, worsening changes, and when to contact care now.", "Care now", "know-when-a-recovery-question-should-not-wait"],
    ],
    care: "If a change is sudden, severe, worsening, listed in your instructions as urgent, or simply feels unsafe, contact the care team or seek timely medical care.",
  },
  "returning-slowly": {
    name: "Returning Slowly",
    crumb: "Recovery - Clearance, patience, and limits",
    title: <>How to come back <span className="it">slowly</span><br/>without making yourself the referee.</>,
    standfirst: "Clearance, limits, pacing, work, movement, training, chores, travel, and the questions to ask before doing more.",
    image: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1800&q=80",
    updated: "05.09.26",
    note: "Feeling ready is information. It is not the same thing as being cleared.",
    lede: "The hardest part of recovery is often the middle: better than before, not yet fully cleared, impatient to return, and surrounded by ordinary life asking for more. Work, workouts, stairs, driving, lifting, travel, sex, chores, childcare, and sport can all look simple from the outside and still be the wrong question to answer alone.",
    second: "This hub does not provide a return plan. It helps you ask about clearance, limits, pacing, and what to do when your confidence arrives before the plan changes.",
    deviceTitle: <>The <span className="it">return checklist</span>.</>,
    deviceMeta: "Clearance first.",
    deviceLead: "The useful return question is not how soon can I do this. It is who clears it, what counts as too much, and what happens if it feels wrong.",
    deviceRows: [
      ["Clearance", "Who says you can return, and what exactly they are clearing.", "Permission"],
      ["Limits", "What remains off-limits, what changes the plan, and when to ask again.", "Boundary"],
      ["Dose", "How much, how often, and whether the care team wants gradual steps.", "Amount"],
      ["Signals", "What should make you stop, call, or seek care.", "Watch"],
      ["Follow-up", "When to report back and how the plan gets updated.", "Next"],
    ],
    featureTitle: <>Before doing <span className="it">more</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1476480862126-209bfaa8edc8?w=1600&q=80",
    featureDek: "The return conversation protects you from turning patience into a guessing game.",
    featureItems: [
      ["Ask", "Am I cleared for this specific activity, or only for a smaller version of it?"],
      ["Define", "What does too much look like, and what should I do if it happens?"],
      ["Confirm", "When do we reassess, and who should I contact if the plan no longer fits real life?"],
    ],
    cardsTitle: <>Places people return <span className="it">too vaguely</span>.</>,
    cards: [
      ["Work", "Hours, commute, lifting, standing, screens, and fatigue can all matter."],
      ["Exercise", "Training belongs under the plan, not motivation alone."],
      ["Chores", "Home tasks can be more physical than they look."],
      ["Travel", "Driving, flights, luggage, walking, and timing deserve real questions."],
    ],
    guides: [
      ["01", "How to ask if you are cleared to do more", "The specific questions that keep clearance from staying vague.", "Clearance", "ask-if-you-are-cleared-to-do-more"],
      ["02", "How to return to daily routines slowly", "Work, chores, errands, driving, travel, and asking what counts as too much.", "Daily life", "return-to-daily-routines-slowly"],
      ["03", "How to talk about returning to exercise after care", "What to ask before activity, training, sport, or movement ramps up.", "Exercise", "talk-about-returning-to-exercise-after-care"],
      ["04", "How to handle impatience during recovery", "The emotional middle, comparison, frustration, and staying inside the plan.", "Patience", "handle-impatience-during-recovery"],
    ],
    care: "If returning to an activity could affect an injury, incision, surgery site, symptom, restriction, or medication instruction, ask the care team before doing more.",
  },
};

function RecoveryL3Data() {
  return RECOVERY_L3[window.RECOVERY_L3_TOPIC] || RECOVERY_L3.instructions;
}

function recoverySlug(title) {
  return title.toLowerCase().replace(/^how to /, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
}

function RecoveryL3Header() {
  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>
  );
}

function RecoveryL3Masthead() {
  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>
  );
}

function RecoveryL3Crumb({ page }) {
  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>
          <a href="/en/health/recovery/">Recovery</a><span className="sep">/</span>
          <span className="here">{page.name}</span>
        </div>
        <div>{page.crumb}</div>
      </div>
    </div>
  );
}

function RecoveryL3Hero({ page }) {
  return (
    <section className="pl-hero">
      <div className="pl-hero-inner">
        <div className="pl-hero-copy">
          <div className="pl-eyebrow"><span className="dot" /><span>Recovery / {page.name}</span><span>- {page.guides.length} guides</span></div>
          <h1>{page.title}</h1>
          <p>{page.standfirst}</p>
          <div className="pl-meta"><span>Torrie</span><span>Recovery desk</span><span>{page.updated}</span></div>
        </div>
        <figure><img src={page.image} alt={`${page.name} editorial image`} /></figure>
      </div>
    </section>
  );
}

function RecoveryL3Passage({ page }) {
  return (
    <section className="pl-passage">
      <div className="pl-passage-inner">
        <aside><span>Desk note</span><p>{page.note}</p></aside>
        <article>
          <p className="lede">{page.lede}</p>
          <p>{page.second}</p>
        </article>
      </div>
    </section>
  );
}

function RecoveryL3Device({ page }) {
  return (
    <section className="pl-device">
      <div className="pl-inner">
        <div className="pl-section-head">
          <span>01</span>
          <div><h2>{page.deviceTitle}</h2><p>{page.deviceLead}</p></div>
          <em>{page.deviceMeta}</em>
        </div>
        <div className="pl-brief">
          {page.deviceRows.map(([name, text, tag], i) => (
            <article key={name}>
              <div><span>{String(i + 1).padStart(2, "0")}</span><em>{tag}</em></div>
              <h3>{name}</h3>
              <p>{text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function RecoveryL3Feature({ page }) {
  return (
    <section className="pl-feature">
      <div className="pl-inner pl-feature-grid">
        <figure><img src={page.featureImage} alt={`${page.name} recovery feature image`} /></figure>
        <div>
          <div className="pl-section-head compact">
            <span>02</span>
            <div><h2>{page.featureTitle}</h2><p>{page.featureDek}</p></div>
          </div>
          <div className="pl-step-list">
            {page.featureItems.map(([name, text]) => <article key={name}><h3>{name}</h3><p>{text}</p></article>)}
          </div>
        </div>
      </div>
    </section>
  );
}

function RecoveryL3Cards({ page }) {
  return (
    <section className="pl-cards">
      <div className="pl-inner">
        <div className="pl-section-head"><span>03</span><div><h2>{page.cardsTitle}</h2></div></div>
        <div className="pl-card-grid">
          {page.cards.map(([name, text]) => <article key={name}><h3>{name}</h3><p>{text}</p></article>)}
        </div>
      </div>
    </section>
  );
}

function RecoveryL3Guides({ page }) {
  const topic = window.RECOVERY_L3_TOPIC || "instructions";
  return (
    <section className="pl-guides">
      <div className="pl-inner">
        <div className="pl-section-head">
          <span>04</span>
          <div><h2>The <em>guide shelf</em>.</h2></div>
          <em>Four careful reads</em>
        </div>
        <div className="pl-guide-grid">
          {page.guides.map(([n, title, dek, tag, slug]) => (
            <a className="pl-guide" href={`/en/health/recovery/${topic}/${slug || recoverySlug(title)}/`} key={n}>
              <div><span>No. {n}</span><span>{tag}</span></div>
              <h3>{title}</h3>
              <p>{dek}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function RecoveryL3Care({ page }) {
  return (
    <section className="pl-care">
      <div className="pl-care-inner">
        <h2>If the question changes <em>the plan,</em> call the care team.</h2>
        <p>{page.care}</p>
      </div>
    </section>
  );
}

function RecoveryL3App() {
  const page = RecoveryL3Data();
  return (
    <React.Fragment>
      <RecoveryL3Masthead />
      <RecoveryL3Header />
      <RecoveryL3Crumb page={page} />
      <RecoveryL3Hero page={page} />
      <RecoveryL3Passage page={page} />
      <RecoveryL3Device page={page} />
      <RecoveryL3Feature page={page} />
      <RecoveryL3Cards page={page} />
      <RecoveryL3Guides page={page} />
      <RecoveryL3Care page={page} />
      <Footer />
    </React.Fragment>
  );
}

window.RecoveryL3App = RecoveryL3App;