/* global React */

const PREVENTION_L3 = {
  screenings: {
    name: "Screenings Literacy",
    crumb: "Prevention - Timing, risk, and questions",
    title: <>How to talk about <span className="it">screenings</span><br/>without guessing your own calendar.</>,
    standfirst: "A plain-English room for understanding what screening means, why timing varies, what changes the conversation, and what to ask your clinician.",
    image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1800&q=80",
    updated: "05.08.26",
    by: ["Torrie", "Prevention desk", "7 min read"],
    note: "Screening is a conversation starter. It is not a one-size calendar you assign to yourself.",
    lede: "Screenings can sound simple from a distance: a test, an age, a reminder, a box to check. Real life is more specific. Timing can depend on age, history, prior results, symptoms, family patterns, access, and the judgment of someone who can actually see your chart.",
    second: "This hub stays on the safe side of that line. It does not tell you which test to book. It helps you understand the language, bring better context, and leave with a clearer next step from the person responsible for your care.",
    deviceTitle: <>The <span className="it">screening brief</span>.</>,
    deviceMeta: "Bring the facts. Ask the question.",
    deviceLead: "The useful move is not guessing. The useful move is showing up prepared.",
    deviceRows: [
      ["What is the test looking for?", "Ask what condition or risk the screening is meant to catch early.", "Good question"],
      ["Why now, or why not now?", "Ask what makes the timing appropriate for you specifically.", "Timing"],
      ["What changes the plan?", "Ask whether family history, prior results, medicines, symptoms, or other factors matter.", "Context"],
      ["What happens after the result?", "Ask what normal, unclear, and abnormal results could lead to.", "Follow-up"],
      ["When should we revisit this?", "Leave with the next conversation point, not a vague sense that you should remember later.", "Next step"],
    ],
    featureTitle: <>Before the <span className="it">appointment</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1584982751601-97dcc096659c?w=1600&q=80",
    featureDek: "A screening conversation gets better when the clinician can see the shape of the situation quickly.",
    featureItems: [
      ["Bring", "Your age, recent changes, current medicines, prior results, and the reason you are asking now."],
      ["Ask", "What applies to me, what can wait, what needs follow-up, and what would change the recommendation?"],
      ["Repeat", "Say the plan back before you leave so the next step is not living only in memory."],
    ],
    cardsTitle: <>What makes timing <span className="it">personal</span>.</>,
    cards: [
      ["History", "Prior results and prior procedures can change the conversation."],
      ["Family patterns", "Some family facts are worth bringing even when you are not sure they matter."],
      ["Symptoms", "A current symptom may move the conversation out of prevention and into care."],
      ["Access", "Cost, location, time, follow-up, and comfort can shape what is realistic."],
    ],
    guides: [
      ["01", "How to ask which screenings belong on your calendar", "The safe way to bring age, history, and questions into the room.", "Start"],
      ["02", "How to understand what a screening test is for", "What screening means, what it can miss, and why it is not a diagnosis.", "Basics"],
      ["03", "How to prepare your health history for a screening conversation", "The facts that help a clinician make the discussion more specific.", "Prep"],
      ["04", "How to ask about screening risks and benefits", "False alarms, follow-up, discomfort, and making room for real tradeoffs.", "Tradeoffs"],
      ["05", "How to understand normal and abnormal screening results", "What result language can mean and why follow-up belongs with care.", "Results"],
      ["06", "How to track when to revisit screening questions", "Reminders, portals, notes, and not relying on memory alone.", "Track"],
      ["07", "How to talk about screenings when you are nervous", "Questions, support, and making the visit less intimidating.", "Nerves"],
      ["08", "How to know when a symptom is not a screening question", "When the conversation should move from prevention to direct care.", "Care"],
    ],
    care: "If you have a new, severe, worsening, or worrying symptom, do not treat it like a screening question. Ask for care from a qualified clinician.",
  },
  records: {
    name: "Records",
    crumb: "Prevention - Paperwork, portals, and lists",
    title: <>How to keep the <span className="it">paper trail</span><br/>from running your health life.</>,
    standfirst: "Portals, lab records, medicine lists, visit summaries, insurance cards, emergency contacts, and the quiet work of being able to find things.",
    image: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1800&q=80",
    updated: "05.08.26",
    by: ["Torrie", "Prevention desk", "6 min read"],
    note: "The best health folder is boring, current, and easy to open when you are tired.",
    lede: "Records are not glamorous. They are also one of the few places where a little order can make care easier fast. The medication list you can actually find. The lab result you do not have to describe from memory. The portal message that explains what happened last time.",
    second: "This hub is health admin without the panic. It is about keeping the basics accessible, knowing what is worth saving, and making the next appointment less dependent on memory.",
    deviceTitle: <>The <span className="it">records folder</span>.</>,
    deviceMeta: "One place. Current enough.",
    deviceLead: "The goal is not perfect archiving. The goal is finding the right fact at the right moment.",
    deviceRows: [
      ["Current medicines", "Name, dose if known, why you take it, and who manages it.", "List"],
      ["Recent labs and results", "Save the report, the date, and any follow-up instructions.", "Results"],
      ["Visit summaries", "Keep the plan, referrals, instructions, and questions for next time.", "Visit"],
      ["Care contacts", "Clinicians, pharmacy, insurance, emergency contact, and preferred hospital if relevant.", "Contacts"],
      ["Personal notes", "Symptoms to ask about, dates you noticed changes, and questions you keep forgetting.", "Notes"],
    ],
    featureTitle: <>Make it <span className="it">findable</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1516321497487-e288fb19713f?w=1600&q=80",
    featureDek: "A health record system fails when it only works on your most organized day.",
    featureItems: [
      ["Choose", "Use one folder, one notes app, one binder, or one shared document instead of five half-systems."],
      ["Update", "Refresh the medicine list and contact list after appointments, not months later."],
      ["Share", "Let one trusted person know where essentials live if you would want help in an urgent moment."],
    ],
    cardsTitle: <>What belongs in the <span className="it">front pocket</span>.</>,
    cards: [
      ["Medication list", "The thing most likely to be useful quickly."],
      ["Allergies and reactions", "Write what happened, not just the name."],
      ["Recent instructions", "The plan you were told to follow after care."],
      ["Questions", "The running list that makes visits less rushed."],
    ],
    guides: [
      ["01", "How to make a simple health records folder", "A low-friction system for the documents you actually need.", "Start"],
      ["02", "How to keep a medication list up to date", "Names, doses, reasons, prescribers, and what to confirm with care.", "Medicines"],
      ["03", "How to organize lab results without interpreting them yourself", "Dates, reports, questions, and follow-up without self-diagnosis.", "Labs"],
      ["04", "How to use a patient portal without losing the thread", "Messages, visit summaries, results, and where the plan lives.", "Portal"],
      ["05", "How to save appointment notes you will actually use", "What was decided, what changed, and what comes next.", "Notes"],
      ["06", "How to prepare records for a new clinician", "The short stack that helps someone understand your history faster.", "New care"],
      ["07", "How to keep emergency health information easy to find", "Contacts, medicines, allergies, and the basics someone may need quickly.", "Emergency"],
      ["08", "How to know when records are not enough", "When confusion, symptoms, or urgent questions need real care.", "Care"],
    ],
    care: "Records can make care smoother, but they do not replace care. If a result, instruction, symptom, or medication question worries you, ask a qualified clinician or pharmacist.",
  },
  "family-history": {
    name: "Family History",
    crumb: "Prevention - Patterns, questions, and notes",
    title: <>How to ask your family <span className="it">better</span><br/>health questions.</>,
    standfirst: "A calmer way to gather useful family health facts, notice patterns, and bring what you learn into a care conversation without turning dinner into an interrogation.",
    image: "https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1800&q=80",
    updated: "05.08.26",
    by: ["Torrie", "Prevention desk", "7 min read"],
    note: "Family history is not gossip. It is context, handled gently.",
    lede: "Family history can be awkward because the useful questions often live near private stories. People forget dates. They use old names for conditions. They may not want to talk. They may not know. That does not make the effort useless.",
    second: "This hub keeps the process humane: ask for patterns, not perfect files; write down what you hear; separate facts from guesses; and bring the useful parts to a clinician who can help decide what matters.",
    deviceTitle: <>The <span className="it">family interview</span>.</>,
    deviceMeta: "Ask gently. Write plainly.",
    deviceLead: "You are not building a courtroom record. You are gathering context for a better conversation.",
    deviceRows: [
      ["Who had what?", "Condition names, body systems, or plain descriptions if nobody remembers the formal term.", "Facts"],
      ["About when?", "Approximate age can matter. Exact dates are nice, but not always possible.", "Timing"],
      ["How close?", "Parent, sibling, grandparent, aunt, uncle, cousin, and which side of the family.", "Relation"],
      ["What changed?", "Major events, repeat patterns, early diagnoses, or several relatives with similar issues.", "Pattern"],
      ["What is uncertain?", "Mark guesses as guesses so they do not become fake certainty.", "Unclear"],
    ],
    featureTitle: <>Keep the tone <span className="it">human</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1600&q=80",
    featureDek: "The right question is useful. The wrong tone closes the room.",
    featureItems: [
      ["Ask", "Use one small question at a time instead of a full medical questionnaire."],
      ["Respect", "Let people decline, correct, or remember slowly."],
      ["Bring", "Share the notes with a clinician as context, not as a conclusion."],
    ],
    cardsTitle: <>What to write down <span className="it">afterward</span>.</>,
    cards: [
      ["Names", "Use the condition name if known, plain description if not."],
      ["Ages", "Approximate age at diagnosis, treatment, or major event."],
      ["Side", "Which side of the family and how closely related."],
      ["Questions", "Anything you want a clinician to help interpret."],
    ],
    guides: [
      ["01", "How to start a family health history conversation", "A gentle opener that does not make people feel cornered.", "Start"],
      ["02", "How to write down family health patterns", "Names, ages, sides of the family, and uncertainty.", "Notes"],
      ["03", "How to ask relatives about health without prying", "Respectful questions, boundaries, and keeping the tone calm.", "Ask"],
      ["04", "How to separate family history facts from guesses", "What you know, what you heard, and what needs confirmation.", "Clarity"],
      ["05", "How to bring family history to a doctor visit", "Turning notes into better questions for someone with medical context.", "Visit"],
      ["06", "How to handle unknown or missing family history", "Adoption, estrangement, memory gaps, privacy, and what you can still do.", "Unknown"],
      ["07", "How to update family history over time", "New facts, changed diagnoses, and keeping the record alive.", "Update"],
      ["08", "How to know when family history needs a clinician's guidance", "Patterns, worry, and why interpretation belongs with qualified care.", "Care"],
    ],
    care: "Family history can raise anxiety or confusion. If what you learn worries you, bring it to a qualified clinician instead of trying to interpret risk alone.",
  },
  "everyday-prevention": {
    name: "Everyday Prevention",
    crumb: "Prevention - Ordinary habits and lower friction",
    title: <>How to make prevention feel less like a <span className="it">lecture</span>.</>,
    standfirst: "Sleep, movement, sun, dental care, food basics, handwashing, air, light, and the ordinary habits that work best when they stay ordinary.",
    image: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1800&q=80",
    updated: "05.08.26",
    by: ["Torrie", "Prevention desk", "6 min read"],
    note: "The most useful preventive habits are usually too plain to sell as a breakthrough.",
    lede: "Everyday prevention gets ruined when it turns into moral theater. The basics are not glamorous: sleep enough when you can, move the body, protect skin from too much sun, keep up with dental care, wash hands when it matters, eat in a way your life can repeat, and make your environment a little easier to live in.",
    second: "This hub is not a purity program. It is a practical baseline. Pick the ordinary thing that removes the most friction from your week and make it easier to repeat.",
    deviceTitle: <>The <span className="it">baseline check</span>.</>,
    deviceMeta: "Small levers. Real life.",
    deviceLead: "A baseline is not a perfect routine. It is the minimum floor that helps the week hold together.",
    deviceRows: [
      ["Sleep", "What one change would make bedtime or waking less chaotic?", "Rest"],
      ["Movement", "Where can walking, stretching, lifting, or standing fit without a full reinvention?", "Move"],
      ["Sun and skin", "What protection, shade, or timing makes the day safer outdoors?", "Sun"],
      ["Dental", "What makes brushing, flossing, or booking care easier to repeat?", "Mouth"],
      ["Home and hands", "What simple clean-air, handwashing, or surface habit lowers everyday exposure?", "Home"],
    ],
    featureTitle: <>Build the habit <span className="it">around the room</span>.</>,
    featureImage: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1600&q=80",
    featureDek: "The room can carry more of the habit than willpower can.",
    featureItems: [
      ["Place", "Put the useful object where the behavior happens: floss by the sink, shoes by the door, water by the desk."],
      ["Pair", "Attach the habit to something already real instead of inventing a second life."],
      ["Lower", "Make the first version small enough to survive a tired week."],
    ],
    cardsTitle: <>The ordinary things <span className="it">count</span>.</>,
    cards: [
      ["Light", "Daylight in the morning, dimmer light at night."],
      ["Water", "Available enough that thirst is not a scavenger hunt."],
      ["Food basics", "More repeatable meals, less drama."],
      ["Air", "Ventilation, smoke avoidance, and the room you spend time in."],
    ],
    guides: [
      ["01", "How to build an everyday prevention routine", "A realistic baseline without turning the week into a project.", "Start"],
      ["02", "How to make sleep part of prevention", "Light, timing, wind-down, and treating rest like infrastructure.", "Sleep"],
      ["03", "How to use movement as preventive care", "Walking, strength, mobility, and ordinary consistency.", "Movement"],
      ["04", "How to protect your skin from too much sun", "Shade, timing, clothing, and asking care-specific questions when needed.", "Sun"],
      ["05", "How to make dental care easier to repeat", "Brushing, flossing, appointments, and reducing friction at the sink.", "Dental"],
      ["06", "How to keep handwashing practical", "When it matters, what helps, and not turning cleanliness into fear.", "Hands"],
      ["07", "How to improve the health of your home environment", "Air, light, surfaces, smoke, clutter, and the room you live in.", "Home"],
      ["08", "How to know when habits are not enough", "Symptoms, distress, barriers, and when support or care matters more.", "Care"],
    ],
    care: "Habits are support, not a cure-all. If you have symptoms, pain, distress, or a change that worries you, ask for care instead of trying to habit your way through it.",
  },
  "doctor-questions": {
    name: "Doctor Questions",
    crumb: "Prevention - Visit prep and follow-up",
    title: <>How to leave the visit with an actual <span className="it">plan</span>.</>,
    standfirst: "What to bring, what to ask, what to repeat back, what to write down, and how to make preventive visits less rushed and more useful.",
    image: "https://images.unsplash.com/photo-1584982751601-97dcc096659c?w=1800&q=80",
    updated: "05.08.26",
    by: ["Torrie", "Prevention desk", "7 min read"],
    note: "A good question can turn a rushed visit into a clearer next step.",
    lede: "Preventive visits can move fast. You may get asked about history, habits, concerns, results, follow-up, referrals, and things you forgot you wanted to mention until the parking lot. A little preparation helps you use the minutes better.",
    second: "This hub is about asking better questions, not taking over the clinician's job. Bring the facts, name the concern, ask what the plan means, and repeat back what happens next.",
    deviceTitle: <>The <span className="it">visit brief</span>.</>,
    deviceMeta: "Bring. Ask. Repeat.",
    deviceLead: "The goal is not to win the appointment. The goal is to leave less confused.",
    deviceRows: [
      ["What should I bring?", "Current medicines, key records, recent changes, questions, and anything you were told to follow up on.", "Bring"],
      ["What matters most today?", "Name the top concern early so it does not appear at the door.", "Priority"],
      ["What are my options?", "Ask what can wait, what should happen next, and what tradeoffs matter.", "Options"],
      ["What should I watch for?", "Ask what changes should prompt follow-up or urgent care.", "Watch"],
      ["Can I say the plan back?", "Repeat instructions in your own words before the visit ends.", "Repeat"],
    ],
    featureTitle: <>Use 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 a lot of clarity gets lost. Slow it down just enough.",
    featureItems: [
      ["Summarize", "Here is what I heard: this is the plan, this is the follow-up, this is when I should call."],
      ["Clarify", "Ask what words mean before you leave, especially if instructions are new."],
      ["Write", "Put the plan somewhere you will see it after the appointment adrenaline wears off."],
    ],
    cardsTitle: <>Questions worth keeping <span className="it">nearby</span>.</>,
    cards: [
      ["Why this?", "What makes this recommendation fit me?"],
      ["What next?", "What happens after this step?"],
      ["What if?", "What should I do if symptoms change or the plan is hard to follow?"],
      ["Who handles it?", "Who should I call, and when should I expect a reply?"],
    ],
    guides: [
      ["01", "How to prepare questions for a preventive visit", "The short list that keeps the visit from scattering.", "Start"],
      ["02", "How to explain what changed since your last visit", "Dates, symptoms, habits, medicines, and what is different now.", "Changes"],
      ["03", "How to ask what a medical recommendation means", "Plain-language questions without pretending you already understand.", "Meaning"],
      ["04", "How to ask about options without sounding difficult", "Tradeoffs, timing, watchful waiting, referrals, and shared decisions.", "Options"],
      ["05", "How to take notes during a doctor visit", "What to write, what to skip, and how to capture the plan.", "Notes"],
      ["06", "How to repeat back a care plan", "The simple move that catches confusion before you leave.", "Repeat"],
      ["07", "How to follow up after an appointment", "Portals, phone calls, results, referrals, and when to ask again.", "Follow-up"],
      ["08", "How to know when a question should not wait", "Urgent symptoms, worsening changes, and when to seek care now.", "Care"],
    ],
    care: "If a symptom is severe, sudden, worsening, or feels urgent, do not save it for a routine visit. Seek timely medical or emergency care.",
  },
};

function PreventionL3Data() {
  return PREVENTION_L3[window.PREVENTION_L3_TOPIC] || PREVENTION_L3.screenings;
}

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

function PreventionL3Header() {
  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 PreventionL3Masthead() {
  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 PreventionL3Crumb({ 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/prevention/">Prevention</a><span className="sep">/</span>
          <span className="here">{page.name}</span>
        </div>
        <div>{page.crumb}</div>
      </div>
    </div>
  );
}

function PreventionL3Hero({ page }) {
  return (
    <section className="pl-hero">
      <div className="pl-hero-inner">
        <div className="pl-hero-copy">
          <div className="pl-eyebrow"><span className="dot" /><span>Prevention / {page.name}</span><span>- {page.guides.length} guides</span></div>
          <h1>{page.title}</h1>
          <p>{page.standfirst}</p>
          <div className="pl-meta"><span>{page.by[0]}</span><span>{page.by[1]}</span><span>{page.updated}</span></div>
        </div>
        <figure><img src={page.image} alt={`${page.name} editorial image`} /></figure>
      </div>
    </section>
  );
}

function PreventionL3Passage({ 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 PreventionL3Device({ 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 PreventionL3Feature({ page }) {
  return (
    <section className="pl-feature">
      <div className="pl-inner pl-feature-grid">
        <figure><img src={page.featureImage} alt={`${page.name} prevention 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 PreventionL3Cards({ 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 PreventionL3Guides({ page }) {
  const topic = window.PREVENTION_L3_TOPIC || "screenings";
  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]) => (
            <a className="pl-guide" href={`/en/health/prevention/${topic}/${preventionSlug(title)}/`} key={n}>
              <div><span>No. {n}</span><span>{tag}</span></div>
              <h3>{title}</h3>
              <p>{dek}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function PreventionL3Care({ page }) {
  return (
    <section className="pl-care">
      <div className="pl-care-inner">
        <h2>When the question feels <em>urgent,</em> move from reading to care.</h2>
        <p>{page.care}</p>
      </div>
    </section>
  );
}

function PreventionL3App() {
  const page = PreventionL3Data();
  return (
    <React.Fragment>
      <PreventionL3Masthead />
      <PreventionL3Header />
      <PreventionL3Crumb page={page} />
      <PreventionL3Hero page={page} />
      <PreventionL3Passage page={page} />
      <PreventionL3Device page={page} />
      <PreventionL3Feature page={page} />
      <PreventionL3Cards page={page} />
      <PreventionL3Guides page={page} />
      <PreventionL3Care page={page} />
      <Footer />
    </React.Fragment>
  );
}

window.PreventionL3App = PreventionL3App;