/* global React */

/* ============================================================
   health/body/sleep.html — Layer-3 SEO hub for Sleep
   Drier, reference-y. 12 leaf pages. Hard line on no medical advice.
   ============================================================ */

/* ---------------- Header ---------------- */
function SHeader() {
  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.SHeader = SHeader;

/* ---------------- Masthead ---------------- */
function SMasthead() {
  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.SMasthead = SMasthead;

/* ---------------- Crumb ---------------- */
function SCrumb() {
  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/body/">Body</a>
          <span className="sep">/</span>
          <span className="here">Sleep</span>
        </div>
        <div>Topic 01 of 06 · Body</div>
      </div>
    </div>
  );
}
window.SCrumb = SCrumb;

/* ---------------- Hero ---------------- */
function SHero() {
  return (
    <section className="shero" data-screen-label="01 Sleep Hero">
      <div className="shero-inner">
        <div className="shero-eyebrow">
          <span className="dot" />
          <span>Body / Topic 01 — Sleep</span>
          <span className="dim">· Hub · 12 guides</span>
        </div>
        <h1>
          How to fall asleep, <span className="it">stay asleep,</span><br/>
          and wake up like a person.
        </h1>
        <div className="shero-meta">
          <div className="cell">
            <div className="lbl">The promise</div>
            <div className="val lede">Plain-language guides for the eight hours nobody planned for. No supplements, no diagnoses, no melatonin opinions.</div>
          </div>
          <div className="cell">
            <div className="lbl">Guides</div>
            <div className="val"><span className="it">12</span> in this hub</div>
          </div>
          <div className="cell">
            <div className="lbl">Updated</div>
            <div className="val">04.28.26</div>
          </div>
          <div className="cell">
            <div className="lbl">Reading time</div>
            <div className="val">3–9 min each</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.SHero = SHero;

/* ---------------- 24-hour rhythm dial ---------------- */
const PHASES = [
  { t: "06:30", l: "First light",    n: "Cortisol begins to rise. Step outside.", sweep: [88, 130] },
  { t: "10:00", l: "Peak alertness", n: "The window for hard, focused work.", sweep: [130, 200] },
  { t: "14:30", l: "Post-lunch dip", n: "Real, predictable, not a personal failing.", sweep: [200, 250] },
  { t: "18:00", l: "Body temp peak", n: "Best window for movement.", sweep: [250, 290] },
  { t: "21:30", l: "Wind-down begins", n: "Lights down. Screens away. The slow exit.", sweep: [290, 340] },
  { t: "23:00", l: "Lights out",     n: "The magazine puts itself down here.", sweep: [340, 30] },
  { t: "03:00", l: "Deepest sleep",  n: "The room you came for.", sweep: [30, 88] },
];

function SDial() {
  const [hover, setHover] = React.useState(0);
  const cx = 200, cy = 200, r = 145;
  const polar = (deg, rad) => {
    const a = ((deg - 90) * Math.PI) / 180;
    return [cx + rad * Math.cos(a), cy + rad * Math.sin(a)];
  };
  const arcPath = (start, end, rad) => {
    let s = start, e = end;
    if (e < s) e += 360; // wrap
    const large = e - s > 180 ? 1 : 0;
    const [sx, sy] = polar(s, rad);
    const [ex, ey] = polar(e % 360 === 0 ? 359.999 : e, rad);
    return `M ${sx} ${sy} A ${rad} ${rad} 0 ${large} 1 ${ex} ${ey}`;
  };
  // 24h dial: 0deg = midnight at top, sweep clockwise.
  // We'll mark hours 0,3,6,9,12,15,18,21
  const hours = [0,3,6,9,12,15,18,21];

  return (
    <section className="sdial" data-screen-label="02 24-Hour Dial">
      <div className="sdial-inner">
        <div className="sdial-fig" aria-label="24-hour rhythm">
          <svg viewBox="0 0 400 400" role="img">
            <defs>
              <radialGradient id="dialBg" cx="0.5" cy="0.5" r="0.55">
                <stop offset="0" stopColor="#ece7dc"/>
                <stop offset="1" stopColor="#d6cfbe"/>
              </radialGradient>
            </defs>
            {/* face */}
            <circle cx={cx} cy={cy} r={r + 22} fill="url(#dialBg)" stroke="#16171a" strokeOpacity="0.15" strokeWidth="0.6"/>
            <circle cx={cx} cy={cy} r={r + 4} fill="none" stroke="#16171a" strokeOpacity="0.3" strokeWidth="0.6"/>
            {/* night arc 21:00 -> 06:00 (deg 315 -> 90) */}
            <path d={arcPath(315, 90, r - 14)} fill="none" stroke="#16171a" strokeOpacity="0.85" strokeWidth="14" strokeLinecap="butt"/>
            {/* day arc 06:00 -> 21:00 (deg 90 -> 315) */}
            <path d={arcPath(90, 315, r - 14)} fill="none" stroke="#c43818" strokeOpacity="0.18" strokeWidth="14" strokeLinecap="butt"/>

            {/* hour ticks + labels */}
            {Array.from({length: 24}).map((_, i) => {
              const deg = (i * 360) / 24;
              const inner = i % 3 === 0 ? r - 30 : r - 22;
              const [x1, y1] = polar(deg, r);
              const [x2, y2] = polar(deg, inner);
              return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#16171a" strokeOpacity={i % 3 === 0 ? 0.55 : 0.25} strokeWidth="0.6"/>;
            })}
            {hours.map((h) => {
              const deg = (h * 360) / 24;
              const [x, y] = polar(deg, r - 46);
              return (
                <text key={h} x={x} y={y} fill="#16171a" fillOpacity="0.55"
                  fontFamily="JetBrains Mono, monospace" fontSize="11" letterSpacing="2"
                  textAnchor="middle" dominantBaseline="middle">
                  {String(h).padStart(2,"0")}
                </text>
              );
            })}

            {/* phase markers */}
            {PHASES.map((p, i) => {
              const [hh, mm] = p.t.split(":").map(Number);
              const deg = ((hh + mm/60) * 360) / 24;
              const [x, y] = polar(deg, r + 4);
              const on = i === hover;
              return (
                <g key={i} style={{cursor:"pointer"}} onMouseEnter={() => setHover(i)} onFocus={() => setHover(i)} tabIndex="0" aria-label={p.l}>
                  <circle cx={x} cy={y} r={on ? 8 : 5} fill={on ? "#c43818" : "#ece7dc"} stroke="#c43818" strokeWidth="1.2" />
                </g>
              );
            })}

            {/* center readout */}
            <text x={cx} y={cy - 20} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="3" fill="#8a877f">PHASE 0{hover + 1}</text>
            <text x={cx} y={cy + 8} textAnchor="middle" fontFamily="Playfair Display, serif" fontStyle="italic" fontSize="34" fill="#c43818">{PHASES[hover].t}</text>
            <text x={cx} y={cy + 32} textAnchor="middle" fontFamily="Playfair Display, serif" fontSize="14" fill="#16171a">{PHASES[hover].l}</text>

            {/* outer rim labels */}
            <text x={cx} y={20} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="3" fill="#16171a" fillOpacity="0.5">00 · MIDNIGHT</text>
            <text x={cx} y={392} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="3" fill="#16171a" fillOpacity="0.5">12 · NOON</text>
          </svg>
        </div>
        <div className="sdial-side">
          <h3>The 24-hour <span className="it">rhythm.</span></h3>
          <p>
            Sleep doesn’t start at bedtime. It starts the morning before — with light, food, movement, and the windows your body has been keeping for thousands of years. Hover the dial to read the phases.
          </p>
          <div className="sdial-key">
            {PHASES.map((p, i) => (
              <div key={i} className={`row${i === hover ? " on" : ""}`} onMouseEnter={() => setHover(i)}>
                <div className="t">{p.t}</div>
                <div className="l">{p.l}<br/><span className="it">{p.n}</span></div>
                <div className="n">0{i + 1}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.SDial = SDial;

/* ---------------- Editor's note (short) ---------------- */
function SNote() {
  return (
    <section className="snote" data-screen-label="03 Editor's Note">
      <div className="snote-inner">
        <div className="by">
          <span>By <strong>Torrie</strong> · Lane Editor, Health</span>
          <span className="sep">·</span>
          <span>Filed 04.28.26</span>
        </div>
        <p>
          We treat sleep the way we treat groceries: a thing we’ll get to. <span className="accent">It is, instead, the cheapest thing on the menu.</span> Nothing else in this magazine compounds faster — better mood, better workouts, better attention, better skin — and nothing else is more often given away to a screen.
        </p>
        <p>
          What follows isn’t a treatment plan. It’s a hub: a 24-hour rhythm to read against, a calculator to back into a bedtime, twelve plain guides on the everyday pieces, and a short list of signs that mean it’s time to stop reading magazines and call somebody. <span className="it">If a problem keeps showing up at 3 AM,</span> a doctor will help you faster than we will.
        </p>
      </div>
    </section>
  );
}
window.SNote = SNote;

/* ---------------- Bedtime calculator ---------------- */
function SCalc() {
  const [wake, setWake] = React.useState("06:30");
  const [mode, setMode] = React.useState("wake"); // wake = "I want to wake at" | bed = "I'm going to bed at"

  // Sleep cycle: ~90 min. Add 14 min to fall asleep.
  const FALL = 14;
  const CYCLE = 90;

  const parse = (str) => {
    const [h, m] = str.split(":").map(Number);
    return h * 60 + m;
  };
  const fmt = (mins) => {
    let m = ((mins % 1440) + 1440) % 1440;
    const h = Math.floor(m / 60);
    const mm = String(m % 60).padStart(2, "0");
    const period = h < 12 || h === 24 ? "AM" : "PM";
    let h12 = h % 12; if (h12 === 0) h12 = 12;
    return `${h12}:${mm} ${period}`;
  };

  const cycles = [4, 5, 6, 7, 8];
  const results = cycles.map((c) => {
    const total = c * CYCLE + FALL;
    const target = mode === "wake"
      ? parse(wake) - total           // bedtime
      : parse(wake) + total;          // wake time
    const hours = (c * CYCLE) / 60;
    return { c, time: fmt(target), hours };
  });
  const best = mode === "wake" ? 1 : 1; // the 5-cycle option (~7.5h) is the recommended pick

  return (
    <section className="scalc" data-screen-label="04 Bedtime Calculator">
      <div className="scalc-inner">
        <div className="scalc-side">
          <div className="label"><span className="dot" /><span>Featured module · Bedtime calculator</span></div>
          <h3>Back into a <span className="it">bedtime</span> from your wake-up.</h3>
          <p>
            One sleep cycle is roughly ninety minutes. Most adults feel best on five — about seven and a half hours, plus the fourteen-ish minutes it takes to fall asleep. Pick a wake time, get five honest options.
          </p>
          <div className="footnote">
            Built from the 90-minute cycle convention. Real cycles vary 70–110 minutes — use this as a guide, not a verdict. <em>Not medical advice.</em>
          </div>
        </div>
        <div className="scalc-card">
          <div className="scalc-row">
            <div className="toggle" role="tablist">
              <button type="button" className={mode === "wake" ? "on" : ""} onClick={() => setMode("wake")}>Wake at</button>
              <button type="button" className={mode === "bed" ? "on" : ""} onClick={() => setMode("bed")}>Bed at</button>
            </div>
            <span className="ask">{mode === "wake" ? "I want to wake at" : "I’m going to bed at"}</span>
            <input
              className="scalc-input"
              type="time"
              value={wake}
              onChange={(e) => setWake(e.target.value)}
              aria-label="Time"
            />
          </div>
          <div className="scalc-results">
            {results.map((r, i) => (
              <div key={r.c} className={`scalc-cell${i === best ? " best" : ""}`}>
                <div className="cycles">{r.c} cycles</div>
                <div className="time">{r.time}</div>
                <div className="span">{r.hours.toFixed(1)} hrs</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.SCalc = SCalc;

/* ---------------- 12 leaf pages ---------------- */
const LEAVES = [
  { n: "01", slug: "fall-asleep-faster", h: "Falling asleep faster",   p: "What works when the lights are out and the brain isn't.", time: "7 min", read: "Most read", tag: "Routine" },
  { n: "02", slug: "stay-asleep",        h: "Staying asleep",            p: "Why we wake at 3 AM, and what helps us not stay there.",  time: "6 min", tag: "Routine" },
  { n: "03", slug: "wind-down",          h: "Wind-down routines",        p: "The hour before bed, broken into small honest steps.",    time: "5 min", tag: "Routine" },
  { n: "04", slug: "bedroom-environment",h: "The bedroom",               p: "Light, sound, temperature — the easy wins, in order.",    time: "6 min", tag: "Environment" },
  { n: "05", slug: "naps",               h: "Naps, properly",            p: "Twenty minutes, before three. The whole rule.",           time: "4 min", tag: "Habit" },
  { n: "06", slug: "caffeine",           h: "Caffeine timing",           p: "How late is too late, and the math behind 'two o’clock.'", time: "5 min", read: "Trending", tag: "Habit" },
  { n: "07", slug: "alcohol",            h: "Alcohol & sleep",           p: "Why a nightcap helps you fall asleep and ruins the rest.", time: "6 min", tag: "Habit" },
  { n: "08", slug: "screens",            h: "Screens at night",          p: "Beyond the blue-light story. What the screen is really doing.", time: "5 min", tag: "Environment" },
  { n: "09", slug: "travel",             h: "Travel & jet lag",          p: "A plain protocol for landing east, west, and back.",       time: "8 min", tag: "Edge case" },
  { n: "10", slug: "partners",           h: "Sleeping with a partner",   p: "Different schedules, different temperatures, same bed.",   time: "5 min", tag: "Edge case" },
  { n: "11", slug: "kids",               h: "Sleep when there are kids", p: "Realistic strategies for the years sleep stops being yours.", time: "7 min", tag: "Edge case" },
  { n: "12", slug: "three-am",           h: "The 3 AM wake-up",          p: "What it usually is, what it usually isn’t, what to do.",   time: "6 min", read: "New", tag: "Pattern" },
];

const S_BASE = "/en/health/body/sleep/";
const S_SLUG = (slug) => window.howToArticleSlug(S_BASE, slug);
const useSArticles = window.useHubArticles;

function SMenuLive() {
  const [q, setQ] = React.useState("");
  const [sort, setSort] = React.useState("recommended");
  const filtered = LEAVES.filter((l) =>
    !q || (l.h + " " + l.p + " " + l.tag).toLowerCase().includes(q.toLowerCase())
  );
  const sorted = [...filtered].sort((a, b) => {
    if (sort === "shortest") return parseInt(a.time) - parseInt(b.time);
    if (sort === "popular") return (b.read ? 1 : 0) - (a.read ? 1 : 0);
    return 0;
  });
  const slugs = React.useMemo(() => sorted.map((l) => S_SLUG(l.slug)), [q, sort]);
  const { articles } = useSArticles(slugs);

  return (
    <section className="smenu" data-screen-label="05 12 Leaf Pages">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Twelve guides <span className="display italic" style={{color:"var(--accent)"}}>on the eight hours.</span></h2>
          <div className="meta">Pick a thing<br/>and read it</div>
        </div>
        <div className="smenu-tools">
          <span className="lbl">Find</span>
          <div className="smenu-search">
            <span className="ico">/</span>
            <input
              type="text"
              placeholder="Search the hub - caffeine, jet lag, 3 AM..."
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
          </div>
          <span className="lbl">Sort</span>
          <div className="smenu-sort">
            <button className={sort === "recommended" ? "on" : ""} onClick={() => setSort("recommended")}>Recommended</button>
            <button className={sort === "shortest" ? "on" : ""} onClick={() => setSort("shortest")}>Shortest</button>
            <button className={sort === "popular" ? "on" : ""} onClick={() => setSort("popular")}>Most read</button>
          </div>
          <span className="count"><strong>{sorted.length}</strong> of {LEAVES.length} guides</span>
        </div>

        <div className="smenu-grid">
          {articles.map((article, i) => (
            <HealthArticleCard
              key={article.slug}
              article={article}
              rank={sorted[i].n}
              tag={sorted[i].tag}
              time={sorted[i].time}
              read={sorted[i].read}
            />
          ))}
          {sorted.length === 0 ? (
            <div className="scard" style={{gridColumn:"1 / -1", textAlign:"center", justifyContent:"center"}}>
              <p style={{margin:"24px 0"}}>No guides match <span style={{fontStyle:"italic", color:"var(--accent)"}}>"{q}"</span> yet.</p>
            </div>
          ) : null}
        </div>
      </div>
    </section>
  );
}
window.SMenu = SMenuLive;

/* ---------------- Common sleep mistakes ---------------- */
const MISTAKES = [
  { n: "01", h: "Treating weekends as a do-over.", p: "Sleeping in Saturday by ninety minutes is the equivalent of a small jet-lag every Monday." },
  { n: "02", h: "Blaming caffeine you had at 8 AM.", p: "It’s rarely the morning cup. It’s the 3 PM one — and the espresso you forgot you had with dessert." },
  { n: "03", h: "Drinking to fall asleep faster.", p: "It works for the falling. It ruins the staying. The second half of the night gets shallow and short." },
  { n: "04", h: "Lying in bed, willing it.", p: "After twenty minutes awake, the bed is the wrong room. A dim chair, a boring book, then back." },
  { n: "05", h: "Cold bedrooms, warm bodies.", p: "A sixty-five-degree room with a warm blanket beats a warm room with no blanket. The body wants the contrast." },
  { n: "06", h: "Naps after three, naps over thirty.", p: "Either one will rent out tonight’s sleep at a bad rate. Twenty minutes, before three. That’s the rule." },
];

function SMist() {
  return (
    <section className="smist" data-screen-label="06 Common Mistakes">
      <div className="smist-inner">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title">Six common <span className="display italic" style={{color:"var(--accent)"}}>mistakes.</span></h2>
          <div className="meta">Things we’ve all done<br/>and probably will again</div>
        </div>
        <div className="smist-grid">
          {MISTAKES.map((m) => (
            <div key={m.n} className="row">
              <div className="n">{m.n}.</div>
              <div className="body">
                <h4>{m.h.split(" ").slice(0,1).join(" ") + " "}<span className="it">{m.h.split(" ").slice(1).join(" ")}</span></h4>
                <p>{m.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SMist = SMist;

/* ---------------- Featured 3-up ---------------- */
const SFEAT = [
  {
    img: "https://images.unsplash.com/photo-1455659817273-f96807779a8a?w=1600&q=80",
    tag: "Falling asleep · Sleep",
    kicker: "The Long Read",
    h: "How to fall asleep faster, without the nightly negotiation.",
    p: "We watched four researchers do the same thing every night for a month. Boring. Repeatable. Mostly worked.",
    time: "9 min · Filed 04.21.26",
    by: "By Torrie",
  },
  {
    img: "https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?w=1400&q=80",
    tag: "Caffeine · Sleep",
    kicker: "Plain Guide",
    h: "How to time caffeine, without giving up the cup.",
    p: "The two o’clock rule, the half-life math, and why your one nightcap of coffee shows up at 2 AM.",
    time: "5 min",
    by: "By Reni A.",
  },
  {
    img: "https://images.unsplash.com/photo-1517502884422-41eaead166d4?w=1400&q=80",
    tag: "3 AM · Sleep",
    kicker: "Field Notes",
    h: "How to handle the 3 AM wake-up, without making it a thing.",
    p: "What the brain is doing at three, and the small move that gets most of us back under.",
    time: "6 min",
    by: "By Torrie",
  },
];

function SFeat() {
  return (
    <section className="sfeat" data-screen-label="07 Featured Sleep">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 03</div>
          <h2 className="title">From the <span className="display italic" style={{color:"var(--accent)"}}>Sleep desk.</span></h2>
          <div className="meta">Three reads<br/>for tonight</div>
        </div>
        <div className="sfeat-grid">
          {SFEAT.map((f, i) => (
            <a key={i} className="feat-card" href="#">
              <div className="f-img">
                <img src={f.img} alt={`${f.h} sleep 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.SFeat = SFeat;

/* ---------------- Start tonight tiles ---------------- */
const START = [
  { n: "01", h: "set a bedtime alarm",    p: "Not a wake-up alarm. A bedtime alarm. Same time, every night, for two weeks.",   time: "3 min" },
  { n: "02", h: "ban the phone from bed", p: "Charge it across the room. The week after is the hardest, then it isn’t.",        time: "3 min" },
  { n: "03", h: "step outside before noon", p: "Five to ten minutes of real daylight. The cheapest sleep aid we know.",         time: "3 min" },
  { n: "04", h: "drop the room two degrees", p: "Sixty-five-ish, warm blanket, dark room. The body sleeps in the contrast.",    time: "3 min" },
];

function SStart() {
  return (
    <section className="start" data-screen-label="08 Start Tonight">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 04</div>
          <h2 className="title">Start <span className="display italic" style={{color:"var(--accent)"}}>tonight.</span></h2>
          <div className="meta">Four small moves<br/>that don’t need a plan</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.SStart = SStart;

/* ---------------- When to call a doctor (sleep-specific signs) ---------------- */
const SIGNS = [
  { n: "01", t: "Loud, gasping, or pausing breath during sleep — yours or a partner’s." },
  { n: "02", t: "Falling asleep without meaning to — at the wheel, in conversations, mid-task." },
  { n: "03", t: "Sleep that is broken every night for weeks, despite the boring fixes." },
  { n: "04", t: "A persistent feeling of dread, low mood, or disinterest that travels with the sleep loss." },
  { n: "05", t: "Snoring loud enough to be heard through a closed door, plus daytime tiredness." },
];

function SCall() {
  return (
    <section className="scall" data-screen-label="09 When to call">
      <div className="scall-inner">
        <div>
          <div className="label">
            <span className="dot" />
            <span>When to put down the magazine</span>
          </div>
          <h2>If sleep keeps <span className="it">losing,</span><br/>call somebody.</h2>
          <p>
            A magazine is the wrong place to diagnose anything. These are five patterns clinicians told us they want to see — not because they’re scary, but because they’re fixable, and the fix isn’t in our pages. Pick up the phone.
          </p>
          <a href="#" className="cta">Find a doctor near you →</a>
        </div>
        <div className="scall-list">
          {SIGNS.map((s) => (
            <div key={s.n} className="row">
              <div className="n">No. {s.n}</div>
              <div className="t">{s.t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.SCall = SCall;

/* ---------------- Care note ---------------- */
function SCareNote() {
  return (
    <section className="carenote" data-screen-label="10 Care Note">
      <div className="carenote-inner">
        <div className="label"><span className="dot" /><span>A note on care</span></div>
        <p>
          HowTo: Sleep is a <strong>magazine</strong>, not a <span className="it">prescription</span>. We don’t diagnose insomnia. We don’t diagnose apnea. We don’t recommend supplements, melatonin, or anything that comes in a bottle. If your sleep is asking a question this hub doesn’t answer, ask a clinician — then come back here for the long, plain-spoken read.
        </p>
      </div>
    </section>
  );
}
window.SCareNote = SCareNote;