/* global React */

/* ============================================================
   health/prevention.html - Layer-2 Prevention editorial page
   Screenings, records, family history, everyday prevention, doctor questions.
   No diagnosis, screening schedules as prescriptions, or medical directives.
   ============================================================ */

const PREV_IMG = {
  hero: "https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?w=1800&q=80",
  screenings: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1400&q=80",
  records: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1400&q=80",
  family: "https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1400&q=80",
  everyday: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1400&q=80",
  questions: "https://images.unsplash.com/photo-1584982751601-97dcc096659c?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1511895426328-dc8714191300?w=1400&q=80",
};

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

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

function PreventionCrumb() {
  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">Prevention</span>
        </div>
        <div>Sub-lane 04 of 06 - Light edition</div>
      </div>
    </div>
  );
}
window.PreventionCrumb = PreventionCrumb;

function PreventionHero() {
  return (
    <section className="bhero" data-screen-label="01 Prevention Hero">
      <div className="bhero-inner">
        <div>
          <div className="bhero-eyebrow">
            <span className="dot" />
            <span>Sub-lane 04 - Prevention</span>
            <span className="crumblet">- Screenings - Records - Habits</span>
          </div>
          <h1>
            The boring work<br/>
            <span className="it">ahead</span> of time.
          </h1>
          <p className="standfirst">
            Screenings, records, family history, everyday habits, and the questions to ask before something becomes urgent. Not medical advice. Just preparation, literacy, and staying organized enough to get real care.
          </p>
          <div className="meta-row">
            <span><strong>05</strong> rooms</span>
            <span className="sep">-</span>
            <span><strong>40</strong> guides in Prevention</span>
            <span className="sep">-</span>
            <span>Updated 05.05.26</span>
            <span className="sep">-</span>
            <span>Ask your clinician. <strong>First.</strong></span>
          </div>
        </div>
        <div className="bhero-photo">
          <img src={PREV_IMG.hero} alt="Clinical notes and preventive care tools" />
          <span className="credit">Photo - Prevention desk notes</span>
        </div>
      </div>
    </section>
  );
}
window.PreventionHero = PreventionHero;

const PREVENTION_ROOMS = [
  {
    n: "01", slug: "screenings", name: "Screenings Literacy",
    dek: "What screenings are, why timing varies, and how to ask your clinician what belongs on your calendar.",
    count: 8, time: "5-11 min reads", img: "screenings", tag: "Calendar - Risk - Questions", ribbon: "Start here",
  },
  {
    n: "02", slug: "records", name: "Records",
    dek: "Labs, medication lists, portals, visit summaries, old paperwork, and the quiet power of being able to find things.",
    count: 8, time: "4-8 min", img: "records", tag: "Portals - Labs - Lists",
  },
  {
    n: "03", slug: "family-history", name: "Family History",
    dek: "How to gather the useful facts without turning Thanksgiving into an interrogation.",
    count: 8, time: "5-9 min", img: "family", tag: "Relatives - Patterns - Notes",
  },
  {
    n: "04", slug: "everyday-prevention", name: "Everyday Prevention",
    dek: "Sleep, movement, sun, food, dental, handwashing, and the ordinary habits that rarely get a headline.",
    count: 8, time: "4-9 min", img: "everyday", tag: "Habits - Environment - Basics",
  },
  {
    n: "05", slug: "doctor-questions", name: "Doctor Questions",
    dek: "What to ask at a preventive visit, what to bring, and how to leave with a plan you actually understand.",
    count: 8, time: "5-10 min", img: "questions", tag: "Visit prep - Notes - Follow-up",
  },
];

function PreventionEssay() {
  const [active, setActive] = React.useState(0);
  const cur = PREVENTION_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>7 min read</span>
          </div>

          <p className="lede">
            Prevention is not where we tell you which test you need. That is not a magazine's job. Prevention is where we help you become the kind of person who can walk into a real appointment with better notes, better questions, and a little less fog around what is being discussed.
          </p>

          <p>
            Some preventive care is simple. Some depends on age, history, risk, family patterns, access, pregnancy, medications, prior results, and things only your clinician should weigh. So this lane stays in the safer ground: what words mean, what records to keep, what questions to ask, and what belongs in a conversation with someone who knows your actual body.
          </p>

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

          <p>
            <span className="accent">Screenings Literacy</span> explains the idea of screening without pretending one calendar fits everyone. <span className="accent">Records</span> is health admin: portals, labs, medication lists, visit summaries, and the paperwork that saves time later. <span className="accent">Family History</span> is for gathering the facts that might change what a clinician asks next.
          </p>

          <p>
            <span className="accent">Everyday Prevention</span> covers the ordinary habits that lower friction: sleep, movement, sun, dental care, food basics, handwashing, and environment. <span className="accent">Doctor Questions</span> is the practical room: what to bring, what to ask, what to repeat back before you leave.
          </p>

          <div className="pull-line">
            Prevention is not fortune-telling. It is preparation with humility.
          </div>
        </article>

        <aside className="mind-board" aria-label="Prevention rooms">
          <div className="a-head"><span className="dot" /><span>Prevention file - 05 checks</span></div>
          <h5>Choose a file <span className="accent">- then ask the right person.</span></h5>
          <div className="mind-folder-list">
            {PREVENTION_ROOMS.map((room, i) => (
              <a key={room.slug} className={`mind-folder${active === i ? " on" : ""}`} href={`/en/health/prevention/${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>File {cur.n}</span>
            <strong>{cur.name}</strong>
            <p>{cur.dek}</p>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.PreventionEssay = PreventionEssay;

function PreventionMenu() {
  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">Five rooms <span className="display italic" style={{color:"var(--accent)"}}>for staying ahead.</span></h2>
          <div className="meta">No forced symmetry<br/>only useful ground</div>
        </div>
        <div className="bmenu-grid">
          {PREVENTION_ROOMS.map((r) => (
            <a key={r.slug} href={`/en/health/prevention/${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={PREV_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.PreventionMenu = PreventionMenu;

const PREV_FEAT = [
  { img: "feat1", href: "/en/health/prevention/screenings/ask-which-screenings-belong-on-your-calendar/", tag: "Screenings - Prevention", kicker: "Plain Guide", h: "How to ask which screenings belong on your calendar.", p: "The safe version: bring your age, history, family notes, and questions. Let the clinician make the call.", time: "7 min - Filed 05.05.26", by: "By Torrie" },
  { img: "feat2", href: "/en/health/prevention/records/make-a-simple-health-records-folder/", tag: "Records", kicker: "Field Notes", h: "The folder future you will thank you for.", p: "Portals, dates, medicines, results, and the boring file that makes appointments easier.", time: "5 min", by: "By Torrie" },
  { img: "feat3", href: "/en/health/prevention/family-history/start-a-family-health-history-conversation/", tag: "Family History", kicker: "Practice", h: "How to ask your family better health questions.", p: "No panic, no interrogation. Just the facts that help a doctor ask smarter questions.", time: "6 min", by: "By Torrie" },
];

function PreventionFeat() {
  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)"}}>Prevention desk.</span></h2>
          <div className="meta">Three reads<br/>worth saving</div>
        </div>
        <div className="bfeat-grid">
          {PREV_FEAT.map((f, i) => (
            <a key={i} className="feat-card" href={f.href}>
              <div className="f-img"><img src={PREV_IMG[f.img]} alt={`${f.h} prevention 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.PreventionFeat = PreventionFeat;

const PREV_LINES = [
  { n: "01", t: "We do not tell you which screening you need. We tell you what to ask." },
  { n: "02", t: "We do not interpret abnormal results. We help you prepare the follow-up questions." },
  { n: "03", t: "We do not set medication, testing, or treatment schedules for you." },
  { n: "04", t: "If a symptom is present now, this is no longer prevention. Ask for care." },
];

function PreventionCall() {
  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 there is a real question <span className="it">about your body,</span><br/>ask your clinician.</h2>
          <p className="bcall-lede">Prevention pages are for literacy and preparation. They are not a substitute for medical judgment.</p>
          <a href="/en/health/" className="bcall-cta">Back to Health →</a>
        </div>
        <div className="bcall-list">
          {PREV_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.PreventionCall = PreventionCall;

const PREV_START = [
  { n: "01", href: "/en/health/prevention/records/make-a-simple-health-records-folder/", h: "make a prevention folder", p: "The simple file that makes appointments less chaotic.", time: "4 min" },
  { n: "02", href: "/en/health/prevention/screenings/ask-which-screenings-belong-on-your-calendar/", h: "ask about screenings", p: "The questions to bring, not the answers to self-assign.", time: "6 min" },
  { n: "03", href: "/en/health/prevention/family-history/write-down-family-health-patterns/", h: "write down family history", p: "A calm way to collect useful facts.", time: "5 min" },
  { n: "04", href: "/en/health/prevention/doctor-questions/prepare-questions-for-a-preventive-visit/", h: "prepare for a preventive visit", p: "What to bring, what to ask, what to repeat back.", time: "6 min" },
];

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

function PreventionCareNote() {
  return (
    <section className="carenote" data-screen-label="07 Care Note">
      <div className="carenote-inner">
        <div className="label"><span className="dot" /><span>A note on prevention</span></div>
        <p>
          HowTo: Prevention is a <strong>magazine</strong>, not a screening schedule, diagnosis, prescription, treatment plan, or substitute for medical care. Use it to prepare better questions, then ask the person with your chart.
        </p>
      </div>
    </section>
  );
}
window.PreventionCareNote = PreventionCareNote;