/* global React */

/* ============================================================
   Health.html — Layer-2 menu page components
   ============================================================ */

const HEALTH_IMG = {
  hero: "https://images.unsplash.com/photo-1545389336-cf090694435e?w=2200&q=80",
  body: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",
  mind: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1400&q=80",
  soul: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1400&q=80",
  prevention: "https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?w=1400&q=80",
  care: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1400&q=80",
  recovery: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1531353826977-0941b4779a1c?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1400&q=80",
};

/* ---------------- Breadcrumb ---------------- */
function Crumb() {
  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>
          <span className="here">Health</span>
        </div>
        <div>Lane 01 of 02 · Light edition</div>
      </div>
    </div>
  );
}
window.Crumb = Crumb;

/* ---------------- Editorial hero ---------------- */
function HHero() {
  return (
    <section className="hhero" data-screen-label="01 Health Hero">
      <div className="hhero-inner">
        <div>
          <div className="hhero-eyebrow">
            <span className="dot" />
            <span>Lane 01 — Health · Vol. 08</span>
          </div>
          <h1>
            How to live in the <span className="it">body</span><br/>
            you have.
          </h1>
          <p className="lede">
            Six ways into one question. Sleep, breath, mood, the long view — habits that compound, not hacks. We don’t prescribe; we share what we’ve seen, plainly, and tell you when to ask someone with a license.
          </p>
          <div className="meta-row">
            <span><strong>06</strong> sub-lanes</span>
            <span className="sep">·</span>
            <span><strong>184</strong> guides &amp; growing</span>
            <span className="sep">·</span>
            <span>Updated weekly</span>
            <span className="sep">·</span>
            <span>No medical advice. <strong>Ever.</strong></span>
          </div>
        </div>
        <aside className="hhero-aside">
          <div className="a-eyebrow">From the Lane Editor</div>
          <p>
            “The point isn’t to optimize you. The point is to keep you around long enough to enjoy the rest of it.”
          </p>
          <div className="by">
            <span className="ava">T.</span>
            <span>By <strong>Torrie</strong> · Lane Editor, Health · DC</span>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.HHero = HHero;

/* ---------------- The Six — TOC + sticky preview rail ---------------- */
const SIX = [
  {
    n: "01", slug: "body", name: "Body",
    dek: "Physical health, symptoms you should pay attention to, and the ordinary wellness you don’t hear about because it doesn’t go viral.",
    tags: "Physical health · Symptoms · Wellness",
    count: 38, time: "3–8 min reads",
    feat: { kicker: "Featured in Body", title: "How to listen to a symptom without spiraling.", dek: "A plain framework for telling the difference between a thing to watch and a thing to ask about.", time: "5 min read", img: "body" },
  },
  {
    n: "02", slug: "mind", name: "Mind",
    dek: "Mental and emotional health — focus, mood, the days you can’t name. We’ll point you toward what helps and toward people who help more.",
    tags: "Mental health · Emotional health · Focus",
    count: 31, time: "4–10 min reads",
    feat: { kicker: "Featured in Mind", title: "How to have a hard week without losing the month.", dek: "Three small moves that buy you back to baseline — and one conversation worth having.", time: "7 min read", img: "mind" },
  },
  {
    n: "03", slug: "soul", name: "Soul",
    dek: "Meditation, breathwork, spiritual wellness. The quiet stuff. We’re not selling you a religion — we’re telling you which practices have decent evidence behind them.",
    tags: "Meditation · Breathwork · Spiritual wellness",
    count: 24, time: "3–12 min reads",
    feat: { kicker: "Featured in Soul", title: "How to breathe when you’re two cups in.", dek: "Box breath, 4-7-8, physiological sigh — what each one actually does, in plain English.", time: "4 min read", img: "soul" },
  },
  {
    n: "04", slug: "prevention", name: "Prevention",
    dek: "Screenings, habits, staying ahead. The unglamorous, statistically-best version of health: catching things early and not getting sick in the first place.",
    tags: "Screenings · Habits · Staying ahead",
    count: 29, time: "5–10 min reads",
    feat: { kicker: "Featured in Prevention", title: "How to read your annual labs without panicking.", dek: "What the numbers mean, what range to ask about, and when ‘normal-ish’ is fine.", time: "8 min read", img: "prevention" },
  },
  {
    n: "05", slug: "care", name: "Care",
    dek: "Labs, doctors, supplements, health management. How to get good care when you need it — and how to tell the difference between a useful supplement and a marketing line.",
    tags: "Labs · Doctors · Supplements · Management",
    count: 36, time: "4–12 min reads",
    feat: { kicker: "Featured in Care", title: "How to find a doctor who answers your questions.", dek: "What to ask in the first ten minutes — and what to do when you don’t love the answers.", time: "6 min read", img: "care" },
  },
  {
    n: "06", slug: "recovery", name: "Recovery",
    dek: "Post-surgery, post-injury, rehabilitation. The long road back, told without false optimism. What helps healing — what only feels like it does.",
    tags: "Post-surgery · Post-injury · Rehabilitation",
    count: 26, time: "5–14 min reads",
    feat: { kicker: "Featured in Recovery", title: "How to come back slow, on purpose.", dek: "Why the boring six weeks beat the dramatic two — every single time.", time: "9 min read", img: "recovery" },
  },
];

function Six() {
  const [active, setActive] = React.useState(0);
  const cur = SIX[active];
  return (
    <section id="six" className="six" data-screen-label="02 The Six">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Six ways <span className="display italic" style={{color:"var(--accent)"}}>into one question.</span></h2>
          <div className="meta">A plain table<br/>of contents</div>
        </div>
        <div className="six-grid">
          <div className="six-list">
            {SIX.map((s, i) => (
              <a key={s.slug} href={`/en/health/${s.slug}/`} className="six-row"
                 onMouseEnter={() => setActive(i)}>
                <div className="num">{s.n}</div>
                <div className="body">
                  <h3 className="name">{s.name}<span className="it">.</span></h3>
                  <p className="dek">{s.dek}</p>
                  <div className="tags">{s.tags}</div>
                </div>
                <div className="meta">
                  <div className="ct"><strong>{s.count}</strong> guides</div>
                  <div>{s.time}</div>
                  <div className="arr">→</div>
                </div>
              </a>
            ))}
          </div>
          <aside className="six-rail">
            <div className="r-eyebrow">
              <span className="dot" />
              <span>{cur.feat.kicker}</span>
            </div>
            <div className="r-img">
              <img src={HEALTH_IMG[cur.feat.img]} alt={cur.name} />
            </div>
            <h4>How to <span className="it">{cur.feat.title.replace(/^How to /, "")}</span></h4>
            <p>{cur.feat.dek}</p>
            <div className="r-foot">
              <span>{cur.feat.time}</span>
              <span className="arr">Read →</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}
window.Six = Six;

/* ---------------- Featured guides ---------------- */
const FEAT = [
  {
    img: "feat1", tag: "Sleep · Body",
    kicker: "The Long Read",
    h: "How to fall asleep faster, without the nightly negotiation.",
    p: "We watched four sleep researchers do the same thing every night for a month. None of it was a hack. All of it was boring. Most of it worked. Here is what they had in common — and what we couldn’t make stick at home.",
    time: "9 min read · Filed 04.21.26",
    by: "By Torrie",
    lead: true,
  },
  {
    img: "feat2", tag: "Mind",
    kicker: "Field Notes",
    h: "A week of saying no on purpose.",
    p: "Five small refusals, one quiet result.",
    time: "5 min read",
    by: "By Torrie",
  },
  {
    img: "feat3", tag: "Soul",
    kicker: "Practice",
    h: "Ten breaths, before the inbox.",
    p: "The smallest morning practice we’ve seen actually hold.",
    time: "4 min read",
    by: "By Torrie",
  },
];

function Featured() {
  return (
    <section id="featured" className="feat" data-screen-label="03 Featured">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title"><span className="display italic" style={{color:"var(--accent)"}}>Featured</span> reading.</h2>
          <div className="meta">Three pieces<br/>worth your morning</div>
        </div>
        <div className="feat-grid">
          {FEAT.map((f, i) => (
            <a key={i} className={`feat-card ${f.lead ? "lead" : ""}`} href="#">
              <div className="f-img">
                <img src={HEALTH_IMG[f.img]} alt="" />
                <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.Featured = Featured;

/* ---------------- Pull quote ---------------- */
function Pull() {
  return (
    <section className="pull" data-screen-label="04 Pull">
      <div className="pull-inner">
        <span className="pull-mark">“</span>
        <blockquote>
          There is <span className="it">no universal answer.</span> Anyone telling you otherwise is selling something.
        </blockquote>
        <cite>From the Editor’s Letter — <a href="/en/#letter">Read in full</a></cite>
      </div>
    </section>
  );
}
window.Pull = Pull;

/* ---------------- Start here ---------------- */
const START = [
  { n: "01", h: "fall asleep faster", p: "What we’ve seen work. What we won’t pretend works for everyone.", time: "5 min" },
  { n: "02", h: "drink enough water", p: "A boring guide to a boring habit that quietly fixes a lot.", time: "3 min" },
  { n: "03", h: "walk, on purpose", p: "Why the simplest movement is still the one we recommend most.", time: "4 min" },
  { n: "04", h: "breathe in four counts", p: "One breath pattern, four ways to use it, no app required.", time: "3 min" },
];

function Start() {
  return (
    <section id="start" className="start" data-screen-label="05 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">
          {START.map((s) => (
            <a key={s.n} className="start-tile" 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.Start = Start;

/* ---------------- Care note (promoted disclaimer) ---------------- */
function CareNote() {
  return (
    <section className="carenote" data-screen-label="06 Care Note">
      <div className="carenote-inner">
        <div className="label"><span className="dot" /><span>A note on care</span></div>
        <p>
          HowTo: Health is a <strong>magazine</strong>, not a <span className="it">prescription</span>. Nothing here replaces your doctor, your therapist, or your own good judgment. If something in your body is asking a question, ask a professional first — then come back here for the long, plain-spoken read.
        </p>
      </div>
    </section>
  );
}
window.CareNote = CareNote;

/* ---------------- Health-specific header (active=Health) ---------------- */
function HHeader() {
  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.HHeader = HHeader;