/* global React */

/* ============================================================
   health/mind.html - Layer-2 Mind editorial page components
   Focus, stress literacy, mood literacy, boundaries, hard weeks, help.
   No therapy, diagnosis, medication, or treatment guidance.
   ============================================================ */

const MIND_IMG = {
  hero: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1800&q=80",
  focus: "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1400&q=80",
  stress: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1400&q=80",
  mood: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1400&q=80",
  boundaries: "https://images.unsplash.com/photo-1519834785169-98be25ec3f84?w=1400&q=80",
  hardweeks: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1400&q=80",
  help: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1400&q=80",
};

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

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

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

function MindHero() {
  return (
    <section className="bhero" data-screen-label="01 Mind Hero">
      <div className="bhero-inner">
        <div>
          <div className="bhero-eyebrow">
            <span className="dot" />
            <span>Sub-lane 02 - Mind</span>
            <span className="crumblet">- Focus - Stress - Mood</span>
          </div>
          <h1>
            The room where<br/>
            the <span className="it">day</span> lands.
          </h1>
          <p className="standfirst">
            Focus, stress, burnout, anxiety, mood, boundaries, and asking for help. Plain language for ordinary pressure, with a hard line around anything that needs real care.
          </p>
          <div className="meta-row">
            <span><strong>14</strong> sub-lanes</span>
            <span className="sep">-</span>
            <span><strong>100+</strong> guides in Mind</span>
            <span className="sep">-</span>
            <span>Updated 05.03.26</span>
            <span className="sep">-</span>
            <span>No therapy claims. <strong>Ever.</strong></span>
          </div>
        </div>
        <div className="bhero-photo">
          <img src={MIND_IMG.hero} alt="A quiet workspace with warm light" />
          <span className="credit">Photo - Mind desk notes</span>
        </div>
      </div>
    </section>
  );
}
window.MindHero = MindHero;

const MIND_ROOMS = [
  {
    n: "01", slug: "focus-attention", name: "Focus & Attention",
    dek: "Attention, distraction, task switching, breaks, and the practical art of doing one thing in a room built to interrupt you.",
    count: 8, time: "4-9 min reads",
    img: "focus",
    tag: "Attention - Distraction - Breaks",
    ribbon: "Start here",
  },
  {
    n: "02", slug: "digital-attention", name: "Digital Attention",
    dek: "Phone habits, scrolling, notifications, tabs, screen breaks, and the way a device keeps asking to become the room.",
    count: 8, time: "5-10 min",
    img: "focus",
    tag: "Screens - Scrolling - Notifications",
  },
  {
    n: "03", slug: "stress-overload", name: "Stress & Overload",
    dek: "Pressure, load, recovery, warning signs, and the difference between a demanding week and a week that needs support.",
    count: 8, time: "5-10 min",
    img: "stress",
    tag: "Pressure - Load - Recovery",
  },
  {
    n: "04", slug: "burnout", name: "Burnout",
    dek: "Exhaustion, depletion, cynicism, care load, work strain, recovery debt, and rebuilding capacity slowly.",
    count: 8, time: "6-11 min",
    img: "hardweeks",
    tag: "Exhaustion - Capacity - Recovery",
  },
  {
    n: "05", slug: "anxiety-worry", name: "Anxiety & Worry",
    dek: "Worry loops, nervous anticipation, body alarms, reassurance cycles, grounding, and when support matters.",
    count: 8, time: "6-12 min",
    img: "mood",
    tag: "Worry - Spirals - Grounding",
  },
  {
    n: "06", slug: "social-anxiety-confidence", name: "Social Anxiety & Social Confidence",
    dek: "Parties, meetings, calls, awkward moments, post-conversation spirals, and getting back into the room.",
    count: 8, time: "5-11 min",
    img: "help",
    tag: "Social rooms - Calls - Confidence",
  },
  {
    n: "07", slug: "low-mood-depression-literacy", name: "Low Mood & Depression Literacy",
    dek: "Low days, loss of interest, patterns, persistence, language for support, and when care should enter.",
    count: 8, time: "6-12 min",
    img: "mood",
    tag: "Low mood - Patterns - Help",
  },
  {
    n: "08", slug: "mood-literacy", name: "Mood Literacy",
    dek: "Naming the weather without diagnosing the climate. Low days, irritability, patterns, and when persistence means ask for help.",
    count: 8, time: "5-11 min",
    img: "mood",
    tag: "Low days - Patterns - Language",
  },
  {
    n: "09", slug: "emotional-intelligence", name: "Emotional Intelligence",
    dek: "Reading yourself, reading a room, responding instead of reacting, repair after tension, and better self-language.",
    count: 8, time: "5-11 min",
    img: "boundaries",
    tag: "Self-read - Room read - Repair",
  },
  {
    n: "10", slug: "emotional-regulation", name: "Emotional Regulation",
    dek: "Anger, spiraling, shutting down, cooling off, grounding, and returning to baseline after a hard moment.",
    count: 8, time: "5-11 min",
    img: "stress",
    tag: "Anger - Spirals - Grounding",
  },
  {
    n: "11", slug: "boundaries", name: "Boundaries",
    dek: "Saying no, capacity, recovery time, hard conversations, and the small sentence that keeps a week from collapsing.",
    count: 8, time: "4-9 min",
    img: "boundaries",
    tag: "Capacity - No - Conversations",
  },
  {
    n: "12", slug: "confidence-self-talk", name: "Confidence & Self-Talk",
    dek: "Inner critic, comparison, self-trust, confidence after setbacks, and the voice that narrates the day.",
    count: 8, time: "5-10 min",
    img: "focus",
    tag: "Inner critic - Trust - Setbacks",
  },
  {
    n: "13", slug: "hard-weeks", name: "Hard Weeks",
    dek: "The days you cannot quite name. Triage, smaller standards, getting through the week without pretending it is normal.",
    count: 8, time: "5-10 min",
    img: "hardweeks",
    tag: "Triage - Baseline - Support",
  },
  {
    n: "14", slug: "asking-for-help", name: "Asking for Help",
    dek: "How to tell someone, what to write down before a session, what to ask a therapist, and when the next step is urgent.",
    count: 8, time: "5-12 min",
    img: "help",
    tag: "Support - Therapy prep - Crisis lines",
  },
];

function MindEssay() {
  const [active, setActive] = React.useState(0);
  const cur = MIND_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 Sunday, DC</span>
            <span className="sep">-</span>
            <span>9 min read</span>
          </div>

          <p className="lede">
            Mind is the lane where the ordinary language gets slippery fast. One person says stress and means a full calendar. Another says stress and means they cannot sleep, cannot eat, and cannot make the day behave. So we are going to be careful with words. We can write about attention, pressure, mood, boundaries, and the architecture of a hard week. We cannot pretend an article is care.
          </p>

          <p>
            The useful version of this lane is not inspirational. It is practical and humble. How do you notice that your attention is shredded before you blame yourself for it? How do you read a low day without turning it into a diagnosis? How do you know when a hard week needs a smaller standard, a real conversation, or professional help?
          </p>

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

          <p>
            We start with <span className="accent">Focus &amp; Attention</span>, because attention is where the day becomes possible or impossible. Then <span className="accent">Digital Attention</span>, <span className="accent">Stress &amp; Overload</span>, <span className="accent">Burnout</span>, and <span className="accent">Anxiety &amp; Worry</span>, because these are some of the biggest ordinary-life ways the mind starts asking for language.
          </p>

          <p>
            <span className="accent">Mood Literacy</span>, <span className="accent">Emotional Intelligence</span>, and <span className="accent">Emotional Regulation</span> give the page language for what is happening without pretending to diagnose it. <span className="accent">Boundaries</span>, <span className="accent">Hard Weeks</span>, and <span className="accent">Asking for Help</span> keep the practical line clear: smaller standards, better sentences, and real support when the week is bigger than a habit.
          </p>

          <div className="pull-line">
            We are not here to treat the mind. We are here to help you notice when a habit is enough - and when help should be closer.
          </div>

          <div className="crosshead">How to use this desk</div>

          <p>
            Mind gets fourteen folders, each with a different kind of day inside it. Start with the one that feels closest to the pressure you can name. If the week feels unsafe, persistent, or bigger than a habit, skip the sorting and ask for real help.
          </p>
        </article>

        <aside className="mind-board" aria-label="Mind rooms">
          <div className="a-head">
            <span className="dot" />
          <span>Mind desk - 14 folders</span>
          </div>
          <h5>Choose a folder <span className="accent">- not a diagnosis.</span></h5>
          <div className="mind-folder-list">
            {MIND_ROOMS.map((room, i) => (
              <a
                key={room.slug}
                className={`mind-folder${active === i ? " on" : ""}`}
                href={`/en/health/mind/${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.MindEssay = MindEssay;

function MindMenu() {
  return (
    <section className="bmenu" data-screen-label="03 The Mind Rooms">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Mind rooms <span className="display italic" style={{color:"var(--accent)"}}>for the week inside your head.</span></h2>
          <div className="meta">A plain index<br/>of where to start</div>
        </div>
        <div className="bmenu-grid">
          {MIND_ROOMS.map((r) => (
            <a
              key={r.slug}
              href={`/en/health/mind/${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={MIND_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.MindMenu = MindMenu;

const MINDFEAT = [
  {
    img: "feat1", tag: "Focus - Mind",
    kicker: "The Long Read",
    h: "How to get one real hour back.",
    p: "A plain attention reset: fewer tabs, a smaller task, one timer, and permission to stop pretending focus arrives by force.",
    time: "8 min - Filed 05.03.26",
    by: "By Torrie",
    href: "/en/health/mind/focus-attention/get-one-focused-hour/",
  },
  {
    img: "feat2", tag: "Stress Literacy - Mind",
    kicker: "Field Notes",
    h: "The load is not just in your calendar.",
    p: "Pressure, noise, decisions, recovery, and the small signs a week is carrying too much.",
    time: "6 min",
    by: "By Torrie",
    href: "/en/health/mind/stress-overload/",
  },
  {
    img: "feat3", tag: "Asking for Help - Mind",
    kicker: "Plain Guide",
    h: "What to write down before you ask for help.",
    p: "A short prep note for a therapist, doctor, trusted person, or first appointment.",
    time: "5 min",
    by: "By Torrie",
    href: "/en/health/mind/asking-for-help/",
  },
];

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

const MIND_LINES = [
  { n: "01", t: "If you are thinking about harming yourself or someone else, seek emergency help now." },
  { n: "02", t: "If distress is persistent, intense, or changing how you live, ask a qualified professional." },
  { n: "03", t: "If sleep, food, work, school, relationships, or safety are being affected, the next step is real support." },
  { n: "04", t: "If substance use, panic, trauma, compulsions, or grief feel bigger than a habit, do not troubleshoot it alone." },
  { n: "05", t: "If you are not sure whether it is serious, that is enough reason to ask someone with training." },
];

function MindCall() {
  return (
    <section className="bcall" data-screen-label="05 When to ask for help">
      <div className="bcall-inner">
        <div>
          <div className="label">
            <span className="dot" />
            <span>When to put down the magazine</span>
          </div>
          <h2>If the week is bigger <span className="it">than a habit,</span><br/>ask for help.</h2>
          <p className="bcall-lede">
            Mind pages can name patterns and offer small practices. They cannot diagnose, treat, prescribe, or hold a crisis. These are the lines we do not cross.
          </p>
          <a href="/en/health/" className="bcall-cta">Back to Health →</a>
        </div>
        <div className="bcall-list">
          {MIND_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.MindCall = MindCall;

const MINDSTART = [
  { n: "01", h: "get one focused hour", p: "A smaller task, fewer inputs, and a timer that does not turn into a personality.", time: "5 min", href: "/en/health/mind/focus-attention/get-one-focused-hour/" },
  { n: "02", h: "read a stressful week", p: "Load, recovery, warning signs, and the line where support should enter.", time: "6 min", href: "/en/health/mind/stress-overload/" },
  { n: "03", h: "name a low day", p: "Weather, pattern, signal - without diagnosing yourself from the couch.", time: "5 min", href: "/en/health/mind/mood-literacy/" },
  { n: "04", h: "ask for help plainly", p: "What to say, what to write down, and who belongs in the room.", time: "5 min", href: "/en/health/mind/asking-for-help/" },
];

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

function MindCareNote() {
  return (
    <section className="carenote" data-screen-label="07 Care Note">
      <div className="carenote-inner">
        <div className="label"><span className="dot" /><span>A note on mind</span></div>
        <p>
          HowTo: Mind is a <strong>magazine</strong>, not therapy, psychiatric care, crisis care, diagnosis, medication guidance, or a treatment plan. Nothing here replaces a doctor, therapist, counselor, emergency service, or your own good judgment. If something feels unsafe, urgent, persistent, or bigger than a habit, ask for real help first.
        </p>
      </div>
    </section>
  );
}
window.MindCareNote = MindCareNote;