/* global React */

const CARE_L3 = {
  "finding-care": {
    name: "Finding Care",
    crumb: "Care - Right room, right question",
    title: <>How to find the <span className="it">right door</span><br/>without pretending the system is simple.</>,
    standfirst: "Primary care, urgent care, specialists, second opinions, access, fit, and how to decide what kind of care conversation you are trying to have.",
    image: "https://images.unsplash.com/photo-1584982751601-97dcc096659c?w=1800&q=80",
    updated: "05.09.26",
    note: "Finding care is part logistics, part judgment, and part knowing when a question needs a real person.",
    lede: "Getting care often starts before the appointment. It starts with the question nobody teaches clearly: what kind of care am I actually trying to find? A new primary care relationship is different from a same-day concern. A specialist question is different from a second opinion. Access, cost, location, trust, language, time, and paperwork all get a vote.",
    second: "This hub does not tell you who to choose. It helps you sort the doors, bring the right question to the right setting, and recognize when the problem is bigger than a search bar.",
    deviceTitle: <>The <span className="it">care map</span>.</>,
    deviceMeta: "Question first. Door second.",
    deviceLead: "The useful starting point is the question you need answered, not the title on the building.",
    deviceRows: [
      ["Primary care", "A continuing relationship for routine questions, prevention, follow-up, and care coordination.", "Ongoing"],
      ["Urgent care", "A same-day option for issues that should not wait but may not need an emergency room.", "Soon"],
      ["Specialist", "A focused visit when a clinician or condition points toward a narrower question.", "Focused"],
      ["Second opinion", "Another qualified view when the decision is important, unclear, or hard to trust.", "Another view"],
      ["Access barriers", "Cost, transportation, language, time, coverage, and availability are real parts of the plan.", "Reality"],
    ],
    featureTitle: <>Before you <span className="it">book</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=1600&q=80",
    featureDek: "A little sorting can save a lot of wrong-door energy.",
    featureItems: [
      ["Name", "Write the main question in one sentence before choosing where to bring it."],
      ["Check", "Confirm location, cost, coverage, timing, language access, and what records they need."],
      ["Escalate", "If symptoms feel urgent, severe, or unsafe, stop shopping for the perfect door and seek timely care."],
    ],
    cardsTitle: <>Signals that the door <span className="it">fits</span>.</>,
    cards: [
      ["They listen", "You can finish the main concern before the visit scatters."],
      ["They explain", "Next steps are clear enough to repeat back."],
      ["They coordinate", "You know who handles follow-up and where results go."],
      ["You can return", "Care works better when the door is possible to use again."],
    ],
    guides: [
      ["01", "How to decide what kind of care you need", "Primary care, urgent care, specialist, second opinion, and the first sorting question.", "Start"],
      ["02", "How to look for a primary care clinician", "Fit, access, location, coverage, language, and what to check before booking.", "Primary"],
      ["03", "How to know when urgent care makes sense", "Same-day care, limits, red flags, and when a higher level of care may matter.", "Urgent"],
      ["04", "How to prepare for a specialist visit", "Referrals, records, questions, and keeping the visit focused.", "Specialist"],
      ["05", "How to ask for a second opinion", "When another view is reasonable and how to keep the request clear.", "Second view"],
      ["06", "How to compare care options without getting overwhelmed", "Cost, access, trust, logistics, and narrowing the search.", "Compare"],
      ["07", "How to change clinicians respectfully", "Moving records, explaining the change, and keeping continuity intact.", "Change"],
      ["08", "How to know when finding care cannot wait", "Urgent symptoms, safety concerns, and when to seek help now.", "Care now"],
    ],
    care: "If symptoms are severe, sudden, worsening, or feel unsafe, seek timely medical or emergency care instead of trying to choose the perfect setting from a page.",
  },
  appointments: {
    name: "Appointments",
    crumb: "Care - Notes, questions, and next steps",
    title: <>How to use the room before the <span className="it">minutes</span><br/>disappear.</>,
    standfirst: "What to bring, what to say first, how to describe the concern, how to take notes, and how to leave knowing the next step.",
    image: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1800&q=80",
    updated: "05.09.26",
    note: "The appointment goes better when the main question enters early.",
    lede: "Appointments can feel strangely short. You wait, you rehearse, you forget the most important detail, then remember it in the parking lot. A visit is not a performance, but it does reward preparation: one main question, a short timeline, the relevant context, and a way to capture what happens next.",
    second: "This hub is the prep room. It helps you organize the conversation without pretending a page can make the decision. Bring the concern. Ask the question. Repeat the plan.",
    deviceTitle: <>The <span className="it">visit brief</span>.</>,
    deviceMeta: "Bring. Ask. Repeat.",
    deviceLead: "A simple brief keeps the visit from scattering into ten half-questions.",
    deviceRows: [
      ["Main concern", "Say the biggest reason for the visit early, even if it feels awkward.", "Priority"],
      ["Timeline", "When it started, what changed, what makes it better or worse, and what you tried.", "Shape"],
      ["Context", "Recent care, results, major changes, barriers, and anything the clinician asked you to track.", "Background"],
      ["Questions", "Bring the top three. Put the hardest one near the top.", "Ask"],
      ["Next step", "Repeat what happens next, who handles it, and when to follow up.", "Plan"],
    ],
    featureTitle: <>The last <span className="it">two minutes</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=1600&q=80",
    featureDek: "The end of the visit is where clarity often gets lost.",
    featureItems: [
      ["Summarize", "Say what you heard in your own words and let the clinician correct it."],
      ["Clarify", "Ask what should happen next, what to watch for, and when to contact the office."],
      ["Write", "Put the plan somewhere you will see it after the appointment adrenaline wears off."],
    ],
    cardsTitle: <>Questions that keep the visit <span className="it">clear</span>.</>,
    cards: [
      ["What matters most today?", "A priority question protects the visit from drifting."],
      ["What are we watching?", "Know what change should prompt follow-up."],
      ["What happens next?", "Leave with a step, not a mood."],
      ["Who do I contact?", "Know the door for the next question."],
    ],
    guides: [
      ["01", "How to prepare for an appointment", "The one-page note that keeps the visit focused.", "Start"],
      ["02", "How to use the first ten minutes with a clinician", "Main question first, short timeline, and the details that matter.", "First"],
      ["03", "How to describe symptoms clearly", "Timeline, location, pattern, changes, and what to avoid guessing.", "Describe"],
      ["04", "How to bring notes without overwhelming the visit", "The short version, the backup details, and when to hand over the page.", "Notes"],
      ["05", "How to ask what a care plan means", "Plain-language questions before the visit ends.", "Meaning"],
      ["06", "How to repeat back a care plan", "The simple move that catches confusion before you leave.", "Repeat", "care-repeat-back-a-care-plan"],
      ["07", "How to follow up after an appointment", "Portals, calls, results, referrals, and when to ask again.", "Follow-up", "care-follow-up-after-an-appointment"],
      ["08", "How to know when an appointment question should not wait", "Urgent symptoms, worsening changes, and when to seek care now.", "Care now"],
    ],
    care: "If a symptom is severe, sudden, worsening, or feels urgent, do not save it for a routine appointment. Seek timely medical or emergency care.",
  },
  "labs-literacy": {
    name: "Labs Literacy",
    crumb: "Care - Ranges, flags, and follow-up",
    title: <>How to read a lab result without turning one <span className="it">number</span><br/>into a diagnosis.</>,
    standfirst: "Reference ranges, flags, repeats, trends, context, and how to ask better follow-up questions without interpreting your own results.",
    image: "https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=1800&q=80",
    updated: "05.09.26",
    note: "A lab result is information. Interpretation belongs with the person who knows the clinical context.",
    lede: "Lab results arrive with numbers, ranges, flags, units, abbreviations, and often very little explanation. It is easy to see a bold letter and spiral. It is also easy to dismiss something you do not understand. Both moves skip the part that matters: context.",
    second: "This hub explains the furniture of a lab report: ranges, flags, trends, repeats, units, and follow-up questions. It does not tell you what your result means. That belongs with a qualified clinician.",
    deviceTitle: <>The <span className="it">lab report map</span>.</>,
    deviceMeta: "Read structure. Ask context.",
    deviceLead: "The page can help you understand the pieces. It cannot decide what they mean for you.",
    deviceRows: [
      ["Reference range", "A comparison range used by the lab; not a full explanation of your health.", "Range"],
      ["Flag", "A marker that a result sits outside that lab's range or reporting threshold.", "Flag"],
      ["Trend", "How values move over time, which may matter more than a single isolated number.", "Trend"],
      ["Repeat", "A clinician may want to recheck something before drawing conclusions.", "Again"],
      ["Context", "Symptoms, history, timing, recent illness, and other results all matter.", "Context"],
    ],
    featureTitle: <>Before you <span className="it">spiral</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1579165466741-7f35e4755660?w=1600&q=80",
    featureDek: "A lab report deserves follow-up, not panic-reading.",
    featureItems: [
      ["Pause", "Do not turn the first flagged value into a conclusion."],
      ["Collect", "Save the report, date, reason for the test, and any related instructions."],
      ["Ask", "What does this mean in my context, do we repeat it, and what is the next step?"],
    ],
    cardsTitle: <>What a result does <span className="it">not</span> show alone.</>,
    cards: [
      ["The whole story", "One number rarely carries the full clinical picture."],
      ["A diagnosis", "A report is not the same as an interpreted assessment."],
      ["A trend", "Trend needs prior values, timing, and context."],
      ["A plan", "Next steps belong in a care conversation."],
    ],
    guides: [
      ["01", "How to read a lab report without self-diagnosing", "Ranges, flags, units, and why context matters.", "Start"],
      ["02", "How to ask about a flagged lab result", "The questions to bring before panic takes over.", "Flag"],
      ["03", "How to understand reference ranges", "What ranges can show and what they cannot decide.", "Ranges"],
      ["04", "How to think about lab trends", "Why prior results, timing, and repeats can matter.", "Trends"],
      ["05", "How to prepare lab questions for a follow-up visit", "What to save, what to ask, and how to leave with next steps.", "Follow-up"],
      ["06", "How to use a patient portal for lab results", "Messages, reports, dates, and not losing the thread.", "Portal"],
      ["07", "How to handle confusing lab language", "Units, abbreviations, flags, and asking for plain English.", "Language"],
      ["08", "How to know when a lab question is urgent", "Symptoms, clinician instructions, and when not to wait.", "Care now"],
    ],
    care: "If a result comes with urgent instructions, severe symptoms, or a change that worries you, contact the care team or seek timely care instead of interpreting it alone.",
  },
};

function CareL3Data() {
  return CARE_L3[window.CARE_L3_TOPIC] || CARE_L3["finding-care"];
}

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

function CareL3Header() {
  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 CareL3Masthead() {
  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 CareL3Crumb({ 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/care/">Care</a><span className="sep">/</span>
          <span className="here">{page.name}</span>
        </div>
        <div>{page.crumb}</div>
      </div>
    </div>
  );
}

function CareL3Hero({ page }) {
  return (
    <section className="pl-hero">
      <div className="pl-hero-inner">
        <div className="pl-hero-copy">
          <div className="pl-eyebrow"><span className="dot" /><span>Care / {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>Care desk</span><span>{page.updated}</span></div>
        </div>
        <figure><img src={page.image} alt={`${page.name} editorial image`} /></figure>
      </div>
    </section>
  );
}

function CareL3Passage({ 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 CareL3Device({ 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 CareL3Feature({ page }) {
  return (
    <section className="pl-feature">
      <div className="pl-inner pl-feature-grid">
        <figure><img src={page.featureImage} alt={`${page.name} care 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 CareL3Cards({ 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 CareL3Guides({ page }) {
  const topic = window.CARE_L3_TOPIC || "finding-care";
  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>Eight practical reads</em>
        </div>
        <div className="pl-guide-grid">
          {page.guides.map(([n, title, dek, tag, slug]) => (
            <a className="pl-guide" href={`/en/health/care/${topic}/${slug || careSlug(title)}/`} key={n}>
              <div><span>No. {n}</span><span>{tag}</span></div>
              <h3>{title}</h3>
              <p>{dek}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CareL3Care({ page }) {
  return (
    <section className="pl-care">
      <div className="pl-care-inner">
        <h2>If the decision changes <em>your care,</em> ask the care team.</h2>
        <p>{page.care}</p>
      </div>
    </section>
  );
}

function CareL3App() {
  const page = CareL3Data();
  return (
    <React.Fragment>
      <CareL3Masthead />
      <CareL3Header />
      <CareL3Crumb page={page} />
      <CareL3Hero page={page} />
      <CareL3Passage page={page} />
      <CareL3Device page={page} />
      <CareL3Feature page={page} />
      <CareL3Cards page={page} />
      <CareL3Guides page={page} />
      <CareL3Care page={page} />
      <Footer />
    </React.Fragment>
  );
}

window.CareL3App = CareL3App;