/* global React */

/* ============================================================
   health/soul.html - Layer-2 Soul editorial page components
   Meditation, breathwork, reflection, ritual, meaning, community.
   No therapy, no diagnosis, no treatment claims.
   ============================================================ */

const SOUL_IMG = {
  hero: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1800&q=80",
  meditation: "https://images.unsplash.com/photo-1545389336-cf090694435e?w=1400&q=80",
  breath: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",
  reflection: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1400&q=80",
  ritual: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1400&q=80",
  meaning: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1400&q=80",
  community: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1519834785169-98be25ec3f84?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1400&q=80",
};

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;

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;

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>
          <span className="here">Soul</span>
        </div>
        <div>Sub-lane 03 of 06 - Light edition</div>
      </div>
    </div>
  );
}
window.SCrumb = SCrumb;

function SHero() {
  return (
    <section className="bhero" data-screen-label="01 Soul Hero">
      <div className="bhero-inner">
        <div>
          <div className="bhero-eyebrow">
            <span className="dot" />
            <span>Sub-lane 03 - Soul</span>
            <span className="crumblet">- Meditation - Breath - Meaning</span>
          </div>
          <h1>
            The quiet<br/>
            <span className="it">room</span> inside.
          </h1>
          <p className="standfirst">
            Not a religion. Not a cure. A place for attention, breath, reflection, and the small practices that make ordinary days feel less scattered.
          </p>
          <div className="meta-row">
            <span><strong>06</strong> sub-lanes</span>
            <span className="sep">-</span>
            <span><strong>48</strong> guides in Soul</span>
            <span className="sep">-</span>
            <span>Updated 05.03.26</span>
            <span className="sep">-</span>
            <span>No medical advice. <strong>Ever.</strong></span>
          </div>
        </div>
        <div className="bhero-photo">
          <img src={SOUL_IMG.hero} alt="Quiet meditation practice in warm light" />
          <span className="credit">Photo - Field notes for HowTo</span>
        </div>
      </div>
    </section>
  );
}
window.SHero = SHero;

function SEssay() {
  const [pin, setPin] = React.useState("meditation");
  const PINS = {
    meditation: { x: 50, y: 18, label: "Attention - Meditation", hint: "A small practice for noticing where the mind went." },
    breath: { x: 50, y: 36, label: "Breath - Rhythm", hint: "Breath as a cue, not a cure." },
    reflection: { x: 36, y: 50, label: "Reflection - Writing", hint: "A way to hear yourself without making every thought a verdict." },
    ritual: { x: 64, y: 50, label: "Ritual - Routine", hint: "Tiny repeated acts that help the day change rooms." },
    meaning: { x: 50, y: 67, label: "Meaning - Values", hint: "What you keep coming back to when the calendar gets loud." },
    community: { x: 50, y: 84, label: "Community - Belonging", hint: "The quiet health of not doing every hard thing alone." },
  };
  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 Sunday, DC</span>
            <span className="sep">-</span>
            <span>8 min read</span>
          </div>

          <p className="lede">
            Soul is the lane most likely to get embarrassing if we are not careful. The word invites incense, certainty, and people pretending they have solved being human. We are not doing that here. This is the quiet room: breath before the inbox, a walk without headphones, five honest lines in a notebook, ten minutes of sitting still without trying to become a new person.
          </p>

          <p>
            The standard is simple. A practice belongs here if it helps someone pay attention, return to themselves, mark a transition, sit with a feeling, make a small meaning, or remember that they are not alone. It does not belong here if it promises to treat anxiety, cure depression, replace therapy, fix trauma, or explain anyone's suffering with a slogan.
          </p>

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

          <p>
            We start with <span className="accent">Meditation</span>, because the basic move is smaller than people make it: sit, notice, return. Then <span className="accent">Breath</span>, handled carefully - breath as rhythm, pause, and attention, not as medicine. <span className="accent">Reflection</span> is the writing room: journaling, questions, end-of-day notes, and the useful difference between observing a thought and obeying it.
          </p>

          <p>
            <span className="accent">Ritual</span> is where we put the small repeated acts that help a day change shape. <span className="accent">Meaning</span> is values, purpose, awe, nature, grief, gratitude - the large words, kept plain. And <span className="accent">Community</span> is the reminder that spiritual wellness does not have to be solitary. Sometimes the practice is showing up somewhere on time and being known by name.
          </p>

          <div className="pull-line">
            We are not trying to make you serene. We are trying to help you make a little room.
          </div>

          <div className="crosshead">A note on the line</div>

          <p>
            If a hard season is bigger than a habit, we will say so. If panic, grief, compulsions, trauma, depression, substance use, or any other serious distress is in the room, the page should not pretend to be the room's expert. The right move is a qualified professional, a crisis resource, a trusted person, or local care - not another article.
          </p>

          <p>
            That still leaves a lot of honest ground. Most people do not need a grand spiritual system before breakfast. They need one minute where the day is not already driving. Pick a room below and start there.
          </p>
        </article>

        <aside className="anatomy" aria-label="Soul map">
          <div className="a-head">
            <span className="dot" />
            <span>Soul map - 06 rooms</span>
          </div>
          <h5>Hover a pin <span className="accent">- each one is a room.</span></h5>
          <div className="anatomy-fig">
            <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <defs>
                <linearGradient id="soulGrad" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0" stopColor="#16171a" stopOpacity="0.16"/>
                  <stop offset="1" stopColor="#16171a" stopOpacity="0.06"/>
                </linearGradient>
              </defs>
              <circle cx="50" cy="28" r="18" fill="url(#soulGrad)" stroke="#16171a" strokeOpacity="0.32" strokeWidth="0.5"/>
              <circle cx="50" cy="58" r="24" fill="url(#soulGrad)" stroke="#16171a" strokeOpacity="0.26" strokeWidth="0.5"/>
              <circle cx="50" cy="92" r="30" fill="url(#soulGrad)" stroke="#16171a" strokeOpacity="0.2" strokeWidth="0.5"/>
              <line x1="50" y1="12" x2="50" y2="122" stroke="#c43818" strokeOpacity="0.22" strokeWidth="0.4" strokeDasharray="1.2 2"/>
              <line x1="24" y1="58" x2="76" y2="58" stroke="#c43818" strokeOpacity="0.14" 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)}
                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.SEssay = SEssay;

const SOUL_ROOMS = [
  {
    n: "01", slug: "meditation", name: "Meditation",
    dek: "Sitting, noticing, returning. The plain practice before the app turns it into a subscription.",
    count: 8, time: "3-9 min reads",
    img: "meditation",
    hero: true,
    ribbon: "Start here",
  },
  {
    n: "02", slug: "breath", name: "Breath & Stillness",
    dek: "Box breathing, longer exhales, pauses, and breath as a cue. We explain the practice without promising a cure.",
    count: 8, time: "3-7 min",
    img: "breath",
  },
  {
    n: "03", slug: "reflection", name: "Reflection",
    dek: "Journaling, prompts, end-of-day notes, and a less dramatic way to listen to yourself.",
    count: 8, time: "4-8 min",
    img: "reflection",
  },
  {
    n: "04", slug: "ritual", name: "Ritual",
    dek: "Small repeated acts that help a day begin, end, or change rooms without needing a full reinvention.",
    count: 8, time: "3-8 min",
    img: "ritual",
  },
  {
    n: "05", slug: "meaning", name: "Meaning",
    dek: "Values, gratitude, awe, grief, purpose, and the large words kept practical enough for a Tuesday.",
    count: 8, time: "5-10 min",
    img: "meaning",
  },
  {
    n: "06", slug: "community", name: "Community",
    dek: "Belonging, service, showing up, being known, and the practices that remind us not everything has to be solitary.",
    count: 8, time: "4-9 min",
    img: "community",
  },
];

function SMenu() {
  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)"}}>for quiet practice.</span></h2>
          <div className="meta">A plain index<br/>of where to start</div>
        </div>
        <div className="bmenu-grid">
          {SOUL_ROOMS.map((r) => (
            <a
              key={r.slug}
              href={`/en/health/soul/${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={SOUL_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.SMenu = SMenu;

const SFEAT = [
  {
    img: "feat1", tag: "Meditation - Soul",
    kicker: "The Long Read",
    h: "How to sit still without making it a performance.",
    p: "A plain first meditation practice: five minutes, one place to sit, and a kinder definition of noticing that your mind wandered.",
    time: "7 min - Filed 05.03.26",
    by: "By Torrie",
    href: "/en/health/soul/meditation/meditate-for-five-minutes/",
  },
  {
    img: "feat2", tag: "Reflection - Soul",
    kicker: "Field Notes",
    h: "Three lines before bed.",
    p: "A tiny writing ritual for closing the day without prosecuting it.",
    time: "4 min",
    by: "By Torrie",
    href: "/en/health/soul/reflection/write-an-end-of-day-note/",
  },
  {
    img: "feat3", tag: "Meaning - Soul",
    kicker: "Plain Guide",
    h: "How to take an awe walk.",
    p: "No tracking. No route. Just ten minutes of looking up on purpose.",
    time: "5 min",
    by: "By Torrie",
    href: "/en/health/soul/meaning/take-an-awe-walk/",
  },
];

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

const SOUL_LINES = [
  { n: "01", t: "If the practice makes you feel worse, smaller, panicked, or unsafe, stop." },
  { n: "02", t: "If distress is persistent, intense, or changing how you live, ask for professional help." },
  { n: "03", t: "If breath practices make you dizzy or uncomfortable, return to normal breathing." },
  { n: "04", t: "If a teacher, group, or practice asks you to ignore your own boundaries, leave." },
  { n: "05", t: "If you are in immediate danger or thinking about harming yourself, contact emergency help now." },
];

function SCall() {
  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 practice stops feeling <span className="it">safe,</span><br/>ask for help.</h2>
          <p className="bcall-lede">
            Soul pages can offer small practices. They cannot hold a crisis, diagnose a pattern, treat trauma, or replace care. 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">
          {SOUL_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.SCall = SCall;

const SSTART = [
  { n: "01", h: "sit for five minutes", p: "A first meditation that does not require becoming a meditation person.", time: "5 min", href: "/en/health/soul/meditation/meditate-for-five-minutes/" },
  { n: "02", h: "take ten honest breaths", p: "Breath as a pause, not a promise.", time: "3 min", href: "/en/health/soul/breath/take-ten-quiet-breaths/" },
  { n: "03", h: "write three lines", p: "The end-of-day note that keeps the day from becoming a blur.", time: "4 min", href: "/en/health/soul/reflection/write-an-end-of-day-note/" },
  { n: "04", h: "make a small ritual", p: "One repeated act that helps the day change rooms.", time: "5 min", href: "/en/health/soul/ritual/create-a-morning-ritual/" },
];

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

function SCareNote() {
  return (
    <section className="carenote" data-screen-label="07 Care Note">
      <div className="carenote-inner">
        <div className="label"><span className="dot" /><span>A note on soul</span></div>
        <p>
          HowTo: Soul is a <strong>magazine</strong>, not therapy, clergy, crisis care, or a treatment plan. Nothing here replaces a doctor, therapist, counselor, spiritual leader, emergency service, or your own good judgment. If a hard season is bigger than a habit, ask for real help first.
        </p>
      </div>
    </section>
  );
}
window.SCareNote = SCareNote;
