/* global React */

/* ============================================================
   health/care.html - Layer-2 Care editorial page
   Finding care, appointments, and labs literacy.
   Preparation and navigation only. No interpreting results or treatment advice.
   ============================================================ */

const CARE_IMG = {
  hero: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1800&q=80",
  finding: "https://images.unsplash.com/photo-1584982751601-97dcc096659c?w=1400&q=80",
  appointments: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1400&q=80",
  labs: "https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=1400&q=80",
  feat1: "https://images.unsplash.com/photo-1584982751601-97dcc096659c?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1581093588401-fbb62a02f120?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1400&q=80",
};

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

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

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

function CareHero() {
  return (
    <section className="bhero" data-screen-label="01 Care Hero">
      <div className="bhero-inner">
        <div>
          <div className="bhero-eyebrow">
            <span className="dot" />
            <span>Sub-lane 05 - Care</span>
            <span className="crumblet">- Finding care - Appointments - Labs</span>
          </div>
          <h1>
            The art of<br/>
            <span className="it">getting care.</span>
          </h1>
          <p className="standfirst">
            Finding care, appointments, labs, and the health admin nobody teaches. We do not replace care. We help you show up better for it.
          </p>
          <div className="meta-row">
            <span><strong>03</strong> rooms</span>
            <span className="sep">-</span>
            <span><strong>24</strong> guides in Care</span>
            <span className="sep">-</span>
            <span>Updated 05.05.26</span>
            <span className="sep">-</span>
            <span>No treatment advice. <strong>Ever.</strong></span>
          </div>
        </div>
        <div className="bhero-photo">
          <img src={CARE_IMG.hero} alt="Care team conversation and clinical notes" />
          <span className="credit">Photo - Care desk notes</span>
        </div>
      </div>
    </section>
  );
}
window.CareHero = CareHero;

const CARE_ROOMS = [
  { n: "01", slug: "finding-care", name: "Finding Care", dek: "Primary care, specialists, urgent care, second opinions, and how to think about fit without pretending access is simple.", count: 8, time: "5-11 min reads", img: "finding", tag: "Primary care - Specialists - Fit", ribbon: "Start here" },
  { n: "02", slug: "appointments", name: "Appointments", dek: "What to bring, what to say first, how to use ten minutes well, and how to leave knowing the next step.", count: 8, time: "4-9 min", img: "appointments", tag: "Prep - Notes - Follow-up" },
  { n: "03", slug: "labs-literacy", name: "Labs Literacy", dek: "Ranges, flags, repeats, trends, and why one number without context is not a diagnosis.", count: 8, time: "5-12 min", img: "labs", tag: "Ranges - Trends - Follow-up" },
];

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

          <p className="lede">
            Care is not glamorous. It is portals, phone calls, lab slips, insurance cards, waiting rooms, questions you forgot to ask, and the feeling of trying to remember everything while sitting on crinkly paper. This lane exists because getting good care is partly a system problem and partly a preparation problem.
          </p>

          <p>
            We cannot fix the system from a page. We also cannot tell you what treatment to choose or what a lab means for your body. What we can do is help you walk into the room with cleaner notes and better questions.
          </p>

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

          <p>
            <span className="accent">Finding Care</span> is about access and fit: primary care, specialists, urgent care, and second opinions. <span className="accent">Appointments</span> is the prep room. <span className="accent">Labs Literacy</span> explains flags, ranges, repeats, and trends without interpreting your results.
          </p>

          <div className="pull-line">
            The goal is not to become your own doctor. The goal is to become a better partner in the room.
          </div>
        </article>

        <aside className="mind-board" aria-label="Care rooms">
          <div className="a-head"><span className="dot" /><span>Care desk - 03 folders</span></div>
          <h5>Choose a folder <span className="accent">- bring it to care.</span></h5>
          <div className="mind-folder-list">
            {CARE_ROOMS.map((room, i) => (
              <a key={room.slug} className={`mind-folder${active === i ? " on" : ""}`} href={`/en/health/care/${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>Folder {cur.n}</span>
            <strong>{cur.name}</strong>
            <p>{cur.dek}</p>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.CareEssay = CareEssay;

function CareMenu() {
  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">Three rooms <span className="display italic" style={{color:"var(--accent)"}}>for better care.</span></h2>
          <div className="meta">Navigation<br/>not treatment</div>
        </div>
        <div className="bmenu-grid">
          {CARE_ROOMS.map((r) => (
            <a key={r.slug} href={`/en/health/care/${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={CARE_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.CareMenu = CareMenu;

const CARE_FEAT = [
  { img: "feat1", href: "/en/health/care/appointments/use-the-first-ten-minutes-with-a-clinician/", tag: "Appointments - Care", kicker: "Plain Guide", h: "How to use the first ten minutes with a clinician.", p: "Start with the main question, bring the list, repeat back the plan, and leave with the next step.", time: "7 min - Filed 05.09.26", by: "By Torrie" },
  { img: "feat2", href: "/en/health/care/labs-literacy/ask-about-a-flagged-lab-result/", tag: "Labs Literacy", kicker: "Field Notes", h: "A flagged lab is not a diagnosis.", p: "Ranges, trends, repeats, context, and the question you should ask before spiraling.", time: "6 min", by: "By Torrie" },
  { img: "feat3", href: "/en/health/care/finding-care/decide-what-kind-of-care-you-need/", tag: "Finding Care", kicker: "Practice", h: "How to decide where to start.", p: "Primary care, urgent care, specialists, second opinions, and the right room for the question.", time: "5 min", by: "By Torrie" },
];

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

const CARE_LINES = [
  { n: "01", t: "We do not interpret your labs, symptoms, or diagnoses." },
  { n: "02", t: "We do not choose treatments or interpret results for your body." },
  { n: "03", t: "If the issue is urgent, worsening, or unsafe, the next step is care now." },
];

function CareCall() {
  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 decision changes <span className="it">your care,</span><br/>ask the care team.</h2>
          <p className="bcall-lede">Care pages help with preparation and language. They do not make clinical decisions.</p>
          <a href="/en/health/" className="bcall-cta">Back to Health →</a>
        </div>
        <div className="bcall-list">
          {CARE_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.CareCall = CareCall;

const CARE_START = [
  { n: "01", href: "/en/health/care/appointments/prepare-for-an-appointment/", h: "prepare for an appointment", p: "The one-page note that makes the room easier.", time: "5 min" },
  { n: "02", href: "/en/health/care/labs-literacy/ask-about-a-flagged-lab-result/", h: "ask about a lab flag", p: "What to ask before you decide what it means.", time: "5 min" },
  { n: "03", href: "/en/health/care/finding-care/decide-what-kind-of-care-you-need/", h: "choose where to start", p: "Primary care, urgent care, specialist, or another door.", time: "4 min" },
  { n: "04", href: "/en/health/care/appointments/care-repeat-back-a-care-plan/", h: "repeat back the plan", p: "The simple move that catches confusion before you leave.", time: "4 min" },
];

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

function CareCareNote() {
  return (
    <section className="carenote" data-screen-label="07 Care Note">
      <div className="carenote-inner">
        <div className="label"><span className="dot" /><span>A note on care</span></div>
        <p>
          HowTo: Care is a <strong>magazine</strong>, not a clinician, diagnosis, lab interpretation, or treatment plan. Use it to ask better questions of the people responsible for your care.
        </p>
      </div>
    </section>
  );
}
window.CareCareNote = CareCareNote;