/* global React */

/* ============================================================
   health/body.html — Layer-3 Body editorial page components
   Light Pulse palette · warmer Torrie voice · menu woven into essay.
   No medical advice anywhere. We'll point at doctors, never replace them.
   ============================================================ */

const BODY_IMG = {
  hero: "https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=1800&q=80",
  sleep: "https://images.unsplash.com/photo-1455659817273-f96807779a8a?w=1400&q=80",
  hydration: "https://images.unsplash.com/photo-1523362628745-0c100150b504?w=1400&q=80",
  energy: "https://images.unsplash.com/photo-1518609878373-06d740f60d8b?w=1400&q=80",
  posture: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",
  skin: "https://images.unsplash.com/photo-1509909756405-be0199881695?w=1400&q=80",
  symptoms: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1531353826977-0941b4779a1c?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1517837125937-53bd402f49d6?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1455659817273-f96807779a8a?w=1400&q=80",
};

/* ---------------- Header (active = Health, with Body crumb-aware paths) ---------------- */
function BHeader() {
  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.BHeader = BHeader;

/* ---------------- Masthead (no clock — keeps file tidy) ---------------- */
function BMasthead() {
  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.BMasthead = BMasthead;

/* ---------------- Breadcrumb ---------------- */
function BCrumb() {
  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">Body</span>
        </div>
        <div>Sub-lane 01 of 06 · Light edition</div>
      </div>
    </div>
  );
}
window.BCrumb = BCrumb;

/* ---------------- Editorial hero ---------------- */
function BHero() {
  return (
    <section className="bhero" data-screen-label="01 Body Hero">
      <div className="bhero-inner">
        <div>
          <div className="bhero-eyebrow">
            <span className="dot" />
            <span>Sub-lane 01 — Body</span>
            <span className="crumblet">· Physical · Symptoms · Wellness</span>
          </div>
          <h1>
            The bod<span className="it">y</span><br/>
            you have.
          </h1>
          <p className="standfirst">
            Not the one you’re trying to earn back. Not the one in the photo. The one reading this, right now.
          </p>
          <div className="meta-row">
            <span><strong>06</strong> sub-lanes</span>
            <span className="sep">·</span>
            <span><strong>38</strong> guides in Body</span>
            <span className="sep">·</span>
            <span>Updated 04.28.26</span>
            <span className="sep">·</span>
            <span>No medical advice. <strong>Ever.</strong></span>
          </div>
        </div>
        <div className="bhero-photo">
          <img src={BODY_IMG.hero} alt="Morning light, a body at rest" />
          <span className="credit">Photo · A. Mendel for HowTo</span>
        </div>
      </div>
    </section>
  );
}
window.BHero = BHero;

/* ---------------- Essay + small anatomy aside ---------------- */
function BEssay() {
  const [pin, setPin] = React.useState("sleep");
  const PINS = {
    sleep:    { x: 50, y: 16, label: "Head · Sleep",      hint: "The first place to look when nothing else feels right." },
    energy:   { x: 50, y: 36, label: "Chest · Energy",    hint: "Daylight, breath, food timing — in roughly that order." },
    hydration:{ x: 36, y: 48, label: "Side · Hydration",  hint: "“Tired” is sometimes thirsty wearing a hat." },
    posture:  { x: 50, y: 56, label: "Spine · Posture",   hint: "It’s less about standing tall, more about moving often." },
    skin:     { x: 66, y: 30, label: "Arm · Skin",        hint: "Sunscreen, sleep, hot showers — in that order." },
    symptoms: { x: 50, y: 78, label: "Belly · Symptoms",  hint: "Read it like weather: pattern matters more than one day." },
  };
  const cur = PINS[pin];

  return (
    <section className="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 Wednesday, DC</span>
            <span className="sep">·</span>
            <span>9 min read</span>
          </div>

          <p className="lede">
            My grandmother used to say her body was a <span className="it">good house</span> with bad plumbing. I thought it was a joke until I was thirty-three and woke up one Tuesday with a back that had decided to retire. The plumber, in this metaphor, was a physical therapist named Renee, and she said something I keep coming back to: <span className="accent">most of what your body is trying to tell you, it has been telling you for a while.</span>
          </p>

          <p>
            That’s the whole pitch of this sub-lane. Not <em>biohacks</em>. Not <em>protocols</em>. Just the boring, plain-language work of paying attention to a body before it has to shout. We’re going to talk about sleep, water, daylight, posture, skin, and how to tell the difference between a thing to watch and a thing to ask a real doctor about. (We will, every single time, send you to a real doctor when we should.)
          </p>

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

          <p>
            We’ve broken Body into six rooms. <span className="accent">Sleep</span> is first because it’s where every other system starts — when sleep is bad, everything else gets harder, and we’ll spend a lot of time on the unglamorous habits that actually change it. <span className="accent">Hydration</span> is second because half the time you feel something off, you’re a glass of water from feeling fine. Then <span className="accent">Energy</span>, which is mostly daylight and breath and the 3 PM dip nobody warned us about.
          </p>

          <p>
            <span className="accent">Posture &amp; Movement</span> is the room where we admit that the desk is the villain and the walk is the hero. <span className="accent">Skin &amp; Sun</span> is where we get specific about the SPF that actually works on a Tuesday — and the hot shower habit none of us want to give up. And finally, <span className="accent">Symptoms Literacy</span>: how to read what your body is saying without spiraling, and how to tell when the right answer is <em>call somebody</em>.
          </p>

          <div className="pull-line">
            We are not here to <span className="accent">optimize you.</span> We are here to keep you around long enough to enjoy the rest of it.
          </div>

          <div className="crosshead">A note on what this isn’t</div>

          <p>
            This isn’t a clinic. I don’t have a license, and the people who write here mostly don’t either. What we do have is time — to read the studies, to talk to clinicians on background, to try things in our own bodies for months before we put them on the page. When something is genuinely outside the scope of a magazine — a pain that won’t quit, a number on a lab that worries you, a symptom that came on fast — we will say so, and point you at someone who actually went to school for this.
          </p>

          <p>
            The promise is small, and I think it’s a good one: <span className="it">we will not waste your time, and we will not pretend to know things we don’t.</span> That leaves a surprising amount of useful ground to cover. Pick a room below and let’s start there.
          </p>
        </article>

        <aside className="anatomy" aria-label="Body map">
          <div className="a-head">
            <span className="dot" />
            <span>Body map · 06 rooms</span>
          </div>
          <h5>Hover a pin <span className="accent">— each one is a room.</span></h5>
          <div className="anatomy-fig">
            {/* Stylized human silhouette as faint stripes overlay */}
            <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <defs>
                <linearGradient id="bodyGrad" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#16171a" stopOpacity="0.18"/>
                  <stop offset="1" stopColor="#16171a" stopOpacity="0.08"/>
                </linearGradient>
              </defs>
              {/* head */}
              <ellipse cx="50" cy="18" rx="9" ry="11" fill="url(#bodyGrad)" stroke="#16171a" strokeOpacity="0.35" strokeWidth="0.5"/>
              {/* neck */}
              <rect x="46" y="28" width="8" height="5" fill="url(#bodyGrad)" stroke="#16171a" strokeOpacity="0.35" strokeWidth="0.5"/>
              {/* torso */}
              <path d="M34 34 Q50 32 66 34 L70 70 Q66 86 60 96 L40 96 Q34 86 30 70 Z"
                fill="url(#bodyGrad)" stroke="#16171a" strokeOpacity="0.35" strokeWidth="0.5"/>
              {/* arms */}
              <path d="M34 36 L24 60 L22 84" fill="none" stroke="#16171a" strokeOpacity="0.35" strokeWidth="0.5"/>
              <path d="M66 36 L76 60 L78 84" fill="none" stroke="#16171a" strokeOpacity="0.35" strokeWidth="0.5"/>
              {/* legs */}
              <path d="M42 96 L40 132" fill="none" stroke="#16171a" strokeOpacity="0.35" strokeWidth="0.5"/>
              <path d="M58 96 L60 132" fill="none" stroke="#16171a" strokeOpacity="0.35" strokeWidth="0.5"/>
              {/* spine guide */}
              <line x1="50" y1="34" x2="50" y2="96" stroke="#c43818" strokeOpacity="0.25" strokeWidth="0.4" strokeDasharray="1.2 2"/>
            </svg>

            {Object.entries(PINS).map(([key, p], i) => (
              <button
                key={key}
                type="button"
                className={`pin${pin === key ? " on" : ""}`}
                style={{ left: `${p.x}%`, top: `${p.y}%` }}
                onMouseEnter={() => setPin(key)}
                onFocus={() => setPin(key)}
                onClick={() => {
                  const el = document.getElementById(`bm-${key}`);
                  if (el) el.scrollIntoView({behavior: "smooth", block: "center"});
                }}
                aria-label={p.label}
              >
                {String(i + 1).padStart(2, "0")}
              </button>
            ))}
          </div>
          <div className="a-readout">
            <span>Pin 0{Object.keys(PINS).indexOf(pin) + 1}</span>
            <span className="lbl">{cur.label}</span>
          </div>
          <p className="a-foot">{cur.hint}</p>
        </aside>
      </div>
    </section>
  );
}
window.BEssay = BEssay;

/* ---------------- The Six Rooms — Layer-3 menu ---------------- */
const ROOMS = [
  {
    n: "01", slug: "sleep", name: "Sleep",
    dek: "Where every other system starts. The boring habits, the room you sleep in, the conversation you keep having with the ceiling at 3 AM.",
    count: 12, time: "3–9 min reads",
    img: "sleep",
    hero: true,
    cta: "Start with sleep",
    ribbon: "Most read",
  },
  {
    n: "02", slug: "hydration", name: "Hydration",
    dek: "Water, electrolytes, and the days when “tired” is just thirsty wearing a hat.",
    count: 6, time: "3–6 min",
    img: "hydration",
  },
  {
    n: "03", slug: "energy", name: "Energy",
    dek: "Daylight, breath, food timing. The 3 PM dip nobody warned us about.",
    count: 7, time: "4–8 min",
    img: "energy",
  },
  {
    n: "04", slug: "posture", name: "Posture & Movement",
    dek: "The desk is the villain, the walk is the hero. Small fixes that add up.",
    count: 5, time: "3–7 min",
    img: "posture",
  },
  {
    n: "05", slug: "skin", name: "Skin & Sun",
    dek: "SPF that actually works on a Tuesday. The hot shower habit, examined.",
    count: 4, time: "4–7 min",
    img: "skin",
  },
  {
    n: "06", slug: "symptoms", name: "Symptoms Literacy",
    dek: "How to read a symptom without spiraling — and when the right answer is to call someone.",
    count: 4, time: "5–10 min",
    img: "symptoms",
  },
];

function BMenu() {
  return (
    <section className="bmenu" data-screen-label="03 The Six Rooms">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Six rooms <span className="display italic" style={{color:"var(--accent)"}}>in one body.</span></h2>
          <div className="meta">A plain index<br/>of where to start</div>
        </div>
        <div className="bmenu-grid">
          {ROOMS.map((r) => (
            <a
              key={r.slug}
              id={`bm-${r.slug}`}
              href={r.slug === "sleep" ? "/en/health/body/sleep/" : `/en/health/body/${r.slug}/`}
              className={`bcard${r.hero ? " hero" : ""}`}
            >
              {r.ribbon ? <span className="ribbon">{r.ribbon}</span> : null}
              <div className="b-num">{r.n}.</div>
              <div className="b-img">
                <img src={BODY_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.BMenu = BMenu;

/* ---------------- Featured Body guides ---------------- */
const BFEAT = [
  {
    img: "feat1", tag: "Sleep · Body",
    kicker: "The Long Read",
    h: "How to fall asleep faster, without the nightly negotiation.",
    p: "Four researchers, one boring nightly routine. We watched it for a month — here’s what stuck and what didn’t.",
    time: "9 min · Filed 04.21.26",
    by: "By Torrie",
  },
  {
    img: "feat2", tag: "Posture · Body",
    kicker: "Field Notes",
    h: "How to sit at a desk without slowly becoming the desk.",
    p: "Six small adjustments. Three free. None of them require a new chair.",
    time: "5 min",
    by: "By Reni A.",
  },
  {
    img: "feat3", tag: "Hydration · Body",
    kicker: "Plain Guide",
    h: "How much water, really. (It’s less than the internet thinks.)",
    p: "What the science says about thirst, color, and the eight-glass myth that won’t die.",
    time: "4 min",
    by: "By Torrie",
  },
];

function BFeat() {
  return (
    <section className="bfeat" data-screen-label="04 Featured Body">
      <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)"}}>Body desk.</span></h2>
          <div className="meta">Three reads<br/>worth saving</div>
        </div>
        <div className="bfeat-grid">
          {BFEAT.map((f, i) => (
            <a key={i} className="feat-card" href="#">
              <div className="f-img">
                <img src={BODY_IMG[f.img]} alt={`${f.h} body health 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.BFeat = BFeat;

/* ---------------- Symptoms callout (when to ask a doctor) ---------------- */
const SIGNS = [
  { n: "01", t: "Pain that wakes you up at night, or won’t quit after two weeks." },
  { n: "02", t: "A symptom that comes on fast — chest, breath, vision, speech." },
  { n: "03", t: "Bleeding that isn’t on a schedule, or doesn’t stop." },
  { n: "04", t: "A new lump, mole, or change you can see and didn’t put there." },
  { n: "05", t: "Anything you’ve been ignoring because you don’t want it to be real." },
];

function BCall() {
  return (
    <section className="bcall" data-screen-label="05 When to call">
      <div className="bcall-inner">
        <div>
          <div className="label">
            <span className="dot" />
            <span>When to put down the magazine</span>
          </div>
          <h2>If you see <span className="it">any of these,</span><br/>call somebody.</h2>
          <p className="bcall-lede">
            We’ll say it once, plainly: a magazine is the wrong place to diagnose anything. These five signs are the ones every clinician we asked agreed on. If you see them in your body, the next move isn’t a Google search — it’s a phone call.
          </p>
          <a href="#" className="bcall-cta">Find a doctor near you →</a>
        </div>
        <div className="bcall-list">
          {SIGNS.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.BCall = BCall;

/* ---------------- Start here tiles ---------------- */
const BSTART = [
  { n: "01", h: "go to bed at the same time", p: "The single most boring change. Also the one that moves the needle the most.", time: "4 min" },
  { n: "02", h: "drink a glass of water first", p: "Before coffee. Before phone. Before anything else. Three weeks, one habit.", time: "3 min" },
  { n: "03", h: "walk for ten minutes after meals", p: "Not for the calorie count. For the blood sugar curve, the spine, the head.", time: "4 min" },
  { n: "04", h: "see daylight before a screen", p: "Five minutes outside before the first scroll. The cheapest mood lift we know.", time: "3 min" },
];

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

/* ---------------- Care note ---------------- */
function BCareNote() {
  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: Body 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.BCareNote = BCareNote;
