/* global React */

const SOUL_L3 = {
  meditation: {
    name: "Meditation",
    crumb: "Soul - Sitting, noticing, returning",
    title: <>How to sit still<br/>without making it a <span className="it">performance</span>.</>,
    standfirst: "A plain meditation room for sitting, noticing, returning, distraction, discomfort, and the first practice that does not need a personality change.",
    image: "https://images.unsplash.com/photo-1545389336-cf090694435e?w=1800&q=80",
    note: "Meditation starts getting useful when it stops trying to impress you.",
    passage: "Most people meet meditation through a promise: less stress, more calm, a cleaner mind, a better self. That is too much pressure to put on a chair. The simpler version is better. Sit somewhere. Notice what is happening. Come back when the mind leaves. Repeat without making the leaving into a failure.",
    second: "This hub keeps the practice small enough to use. No grand spiritual performance. No pretending thoughts stop. Just a way to spend a few minutes without letting every signal in the day become an instruction.",
    practiceTitle: "The first seat",
    practice: [
      ["Sit", "Choose a place that does not require a costume, cushion, or new identity."],
      ["Settle", "Let the body be held by the chair, floor, bed, bench, or wall."],
      ["Notice", "Pick one anchor: breath, sound, hands, feet, or the light in the room."],
      ["Return", "When the mind leaves, come back without turning the return into a courtroom."],
      ["End", "Close with one ordinary action: stand, drink water, open the door, begin again."],
    ],
    rooms: [
      ["Restless", "Use shorter sits and a physical anchor."],
      ["Sleepy", "Sit upright, open the eyes, or choose a brighter room."],
      ["Distracted", "Count returning as the practice, not the interruption."],
      ["Emotional", "Keep the anchor simple and stop if the practice feels unsafe."],
      ["New", "Start with three minutes before making it a system."],
    ],
    guides: [
      ["01", "How to meditate for five minutes", "A first sit with one anchor and no performance.", "Start"],
      ["02", "How to meditate when your mind wanders", "Returning without treating wandering as failure.", "Return"],
      ["03", "How to choose a meditation anchor", "Breath, sound, hands, feet, light, and what to use when one feels wrong.", "Anchor"],
      ["04", "How to sit with discomfort during meditation", "Itches, boredom, restlessness, and knowing when to stop.", "Body"],
      ["05", "How to make meditation a daily practice", "A small repeatable seat without turning it into pressure.", "Habit"],
      ["06", "How to meditate without an app", "Timers, rooms, silence, notes, and keeping the practice yours.", "Solo"],
      ["07", "How to end a meditation session", "Closing the practice without snapping back into the day.", "Close"],
      ["08", "How to know when meditation is not the right tool", "Distress, panic, trauma, and when support matters more.", "Care"],
    ],
    care: "If sitting still makes you feel panicked, unsafe, flooded, dissociated, or worse, stop. A practice is not supposed to become a test of endurance. Ask for qualified support when distress is bigger than a habit.",
  },
  breath: {
    name: "Breath & Stillness",
    crumb: "Soul - Breath, pauses, and rhythm",
    title: <>How to use the <span className="it">breath</span><br/>as a doorway, not a cure.</>,
    standfirst: "Breath awareness, simple rhythms, pauses, longer exhales, stillness, and knowing when a breath practice should stay gentle.",
    image: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1800&q=80",
    note: "Breath is useful as a cue. It gets risky when the page starts promising medicine.",
    passage: "The breath is always close, which is why people overload it with claims. We are keeping it plainer. Breath can mark a pause. It can give attention somewhere to land. It can help a transition feel less abrupt. It can also feel uncomfortable, forced, dizzy, or wrong on a given day.",
    second: "This hub treats breath as a gentle practice, not a treatment plan. If a rhythm helps, use it. If it makes the room smaller, stop and return to ordinary breathing.",
    practiceTitle: "The gentle pause",
    practice: [
      ["Notice", "Begin by noticing the breath before changing it."],
      ["Soften", "Let the shoulders, jaw, and hands become less involved."],
      ["Lengthen", "Try a slightly longer exhale if it feels natural."],
      ["Pause", "Use one breath before the reply, the meeting, the door, or the next task."],
      ["Release", "Return to normal breathing when the practice feels finished or uncomfortable."],
    ],
    rooms: [
      ["Before work", "Use one breath to separate arrival from reaction."],
      ["Before sleep", "Keep the practice soft and stop chasing results."],
      ["During tension", "Let breath create a pause before the next sentence."],
      ["During movement", "Match breath to walking, stretching, or standing."],
      ["When dizzy", "Stop the technique and breathe normally."],
    ],
    guides: [
      ["01", "How to take ten quiet breaths", "A simple pause without forcing a rhythm.", "Pause"],
      ["02", "How to try box breathing gently", "Counting, comfort, and stopping if it feels wrong.", "Box"],
      ["03", "How to use a longer exhale", "A softer rhythm for transitions and tense moments.", "Exhale"],
      ["04", "How to breathe before a hard conversation", "One pause before the next sentence.", "Talk"],
      ["05", "How to use breath during a walk", "Steps, rhythm, attention, and not overthinking it.", "Walk"],
      ["06", "How to stop forcing your breath", "Returning to ordinary breathing when technique gets too loud.", "Ease"],
      ["07", "How to build stillness into a busy day", "Doorways, chairs, counters, cars, and one quiet minute.", "Stillness"],
      ["08", "How to know when breathwork is not helping", "Dizziness, panic, discomfort, and when to stop.", "Care"],
    ],
    care: "If breath practice causes dizziness, panic, chest discomfort, numbness, fear, or any unsafe feeling, stop and breathe normally. If symptoms persist or feel serious, seek qualified medical or emergency help.",
  },
  reflection: {
    name: "Reflection",
    crumb: "Soul - Journaling, prompts, and listening",
    title: <>How to write a few <span className="it">honest</span><br/>lines without putting yourself on trial.</>,
    standfirst: "Journaling, prompts, end-of-day notes, morning pages, questions, and listening to a thought without obeying every thought.",
    image: "https://images.unsplash.com/photo-1455390582262-044cdead277a?w=1800&q=80",
    note: "Reflection is not a courtroom. It is a place to hear what the day sounded like.",
    passage: "Writing things down can become useful quickly and unbearable just as quickly. The useful version gives the day shape. The unbearable version turns every feeling into evidence and every page into a verdict. Reflection works best when it stays modest.",
    second: "This hub is the notebook room: three lines, one question, one note before bed, one page after a hard conversation, one honest sentence that helps you hear yourself without making the notebook the judge.",
    practiceTitle: "The three-line note",
    practice: [
      ["Name", "Write what happened without turning it into a thesis."],
      ["Feel", "Write one mood word or body signal."],
      ["Learn", "Write one thing worth remembering."],
      ["Leave", "Do not keep digging just because the page is open."],
      ["Return", "Use old notes for patterns, not punishment."],
    ],
    rooms: [
      ["Morning", "One intention, one support, one thing to leave alone."],
      ["Evening", "What happened, what mattered, what can wait."],
      ["After conflict", "Facts, guesses, repair, release."],
      ["Before a decision", "Options, values, next smallest step."],
      ["When stuck", "Write the first true sentence and stop performing insight."],
    ],
    guides: [
      ["01", "How to journal when you do not know what to write", "A first sentence, three lines, and stopping before it turns into pressure.", "Start"],
      ["02", "How to write an end-of-day note", "Closing the day without prosecuting it.", "Evening"],
      ["03", "How to use journaling prompts without overthinking", "Questions that open a door instead of demanding a perfect answer.", "Prompts"],
      ["04", "How to reflect after a hard conversation", "Facts, impact, repair, and what to release.", "Repair"],
      ["05", "How to write when you feel stuck", "The first honest line and the smallest next thought.", "Stuck"],
      ["06", "How to notice patterns in your journal", "Looking back without turning the past into a weapon.", "Patterns"],
      ["07", "How to journal without spiraling", "Limits, timing, and knowing when to close the notebook.", "Limits"],
      ["08", "How to know when reflection needs support", "Rumination, distress, unsafe thoughts, and when to ask for help.", "Care"],
    ],
    care: "If reflection turns into rumination, panic, self-attack, unsafe thoughts, or a pattern that makes you feel worse, close the notebook and ask for support. The page is a tool, not a place to trap yourself.",
  },
  ritual: {
    name: "Ritual",
    crumb: "Soul - Repeated acts and transitions",
    title: <>How to make a small <span className="it">ritual</span><br/>that helps the day change rooms.</>,
    standfirst: "Morning rituals, evening rituals, transition cues, tiny repeated acts, meaning without grandness, and keeping practice practical.",
    image: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1800&q=80",
    note: "Ritual is just repetition with attention. It does not need to become precious.",
    passage: "A ritual can be as small as opening the curtains, washing a cup, stepping outside before work, writing one line, lighting a candle, turning off the kitchen light, or taking the long way around the block. The point is not magic. The point is marking a change.",
    second: "This hub is for people who need the day to have better thresholds. Begin, pause, end, return, grieve, celebrate, reset. A small ritual helps the body understand what the calendar already knows.",
    practiceTitle: "The threshold",
    practice: [
      ["Choose", "Pick one moment that needs a clearer beginning or ending."],
      ["Repeat", "Use one small act that can happen on an ordinary day."],
      ["Notice", "Let the act mark the shift without demanding a mood change."],
      ["Protect", "Keep it short enough that it survives a messy week."],
      ["Retire", "Let a ritual end when it stops serving the day."],
    ],
    rooms: [
      ["Morning", "Open light, water, one sentence, one direction."],
      ["Work start", "Clear the surface before the first task."],
      ["After work", "Close the laptop, change rooms, step outside."],
      ["Evening", "Dim the room, write one note, set tomorrow down."],
      ["After hard news", "Acknowledge the moment before moving too fast."],
    ],
    guides: [
      ["01", "How to create a morning ritual", "A small start that survives real mornings.", "Morning"],
      ["02", "How to create an evening ritual", "Closing the day without turning bedtime into a project.", "Evening"],
      ["03", "How to make a transition ritual after work", "Leaving work in one room before entering another.", "Work"],
      ["04", "How to make a ritual for hard days", "One repeated act that marks difficulty without pretending it is fixed.", "Hard days"],
      ["05", "How to keep a ritual from becoming another chore", "Short, flexible, and useful enough to repeat.", "Ease"],
      ["06", "How to use light as a daily ritual", "Curtains, lamps, sunrise, sunset, and attention.", "Light"],
      ["07", "How to retire a ritual that stopped working", "Letting a practice end cleanly.", "Retire"],
      ["08", "How to know when ritual is not enough", "When the week needs support, not symbolism.", "Care"],
    ],
    care: "If a ritual becomes compulsive, distressing, unsafe, or feels like something bad will happen unless you do it perfectly, step back and ask for qualified support.",
  },
  meaning: {
    name: "Meaning",
    crumb: "Soul - Values, awe, gratitude, and purpose",
    title: <>How to keep the big <span className="it">words</span><br/>plain enough for a Tuesday.</>,
    standfirst: "Values, awe, gratitude, purpose, nature, grief, attention, and small ways to remember what still matters without turning it into a slogan.",
    image: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=1800&q=80",
    note: "Meaning gets stronger when it gets smaller and more specific.",
    passage: "Purpose, gratitude, awe, grief, calling, values. These words can become huge and useless if the page lets them float away. The honest version is smaller: what matters enough to return to, what you want to protect, what you noticed when you finally looked up, what still deserves care after a hard thing.",
    second: "This hub keeps meaning practical. A walk, a note, a value, a service, a small act of gratitude, a way to honor something without pretending every loss has a lesson.",
    practiceTitle: "The small meaning",
    practice: [
      ["Notice", "Pick one thing that pulled your attention without asking."],
      ["Name", "Write the value underneath it."],
      ["Act", "Choose one small behavior that protects that value."],
      ["Thank", "Let gratitude be specific, not forced."],
      ["Honor", "Let hard things be hard without rushing them into lessons."],
    ],
    rooms: [
      ["Values", "What keeps asking to be protected?"],
      ["Awe", "What made you look up?"],
      ["Gratitude", "What was specific and real today?"],
      ["Purpose", "What small action points toward the life you mean?"],
      ["Grief", "What deserves tenderness without explanation?"],
    ],
    guides: [
      ["01", "How to figure out what matters to you", "Values without a grand personal manifesto.", "Values"],
      ["02", "How to take an awe walk", "Looking up on purpose without turning the walk into homework.", "Awe"],
      ["03", "How to practice gratitude without forcing it", "Specific thanks, no toxic positivity, no pretending.", "Gratitude"],
      ["04", "How to find meaning in an ordinary week", "Small acts, values, service, and attention.", "Ordinary"],
      ["05", "How to think about purpose without panic", "Purpose as direction, not a verdict on your life.", "Purpose"],
      ["06", "How to honor grief without rushing it", "Remembering, tenderness, support, and not making loss perform.", "Grief"],
      ["07", "How to reconnect with nature in ten minutes", "Sky, trees, weather, sound, and attention close to home.", "Nature"],
      ["08", "How to know when a search for meaning needs support", "Hopelessness, grief, distress, and qualified help.", "Care"],
    ],
    care: "If questions about meaning are tied to hopelessness, unsafe thoughts, severe grief, trauma, depression, or trouble functioning, ask for qualified support. Meaning is not a reason to carry pain alone.",
  },
  community: {
    name: "Community",
    crumb: "Soul - Belonging, service, and being known",
    title: <>How to stop doing every hard thing <span className="it">alone</span>.</>,
    standfirst: "Belonging, service, showing up, being known by name, low-pressure connection, and the quiet practice of returning to people.",
    image: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=1800&q=80",
    note: "Community is less about finding perfect people and more about returning somewhere often enough to become known.",
    passage: "Modern wellness loves the solo practice. The journal, the breath, the walk, the morning routine. Those can help. But a life cannot be entirely self-regulated in private. People need rooms where they are expected, useful, remembered, and missed when they disappear.",
    second: "This hub is about belonging in practical form: showing up, serving, joining, inviting, returning after absence, and building low-pressure connection without making friendship another optimization project.",
    practiceTitle: "The return",
    practice: [
      ["Choose", "Pick one room, group, class, service, walk, table, or recurring place."],
      ["Show", "Attend more than once before deciding nobody noticed."],
      ["Offer", "Bring one useful action, not a performance."],
      ["Invite", "Make one small invitation with a real time or place."],
      ["Return", "Let belonging grow through repetition."],
    ],
    rooms: [
      ["Neighbors", "Small recognition counts."],
      ["Friends", "Connection survives better with specific invitations."],
      ["Groups", "Repeated rooms make being known possible."],
      ["Service", "Helping can become belonging when it stays human."],
      ["After absence", "Return with one honest sentence."],
    ],
    guides: [
      ["01", "How to find a low-pressure community", "Classes, walks, groups, service, and places where repetition does the work.", "Find"],
      ["02", "How to make a small invitation", "Specific time, specific place, lower pressure.", "Invite"],
      ["03", "How to show up when you feel awkward", "Arriving, staying briefly, and returning again.", "Awkward"],
      ["04", "How to reconnect after disappearing", "One honest sentence and a small return.", "Return"],
      ["05", "How to serve without burning out", "Useful help, limits, and not turning service into self-erasure.", "Service"],
      ["06", "How to build belonging slowly", "Repetition, names, roles, and being seen over time.", "Belong"],
      ["07", "How to be alone without becoming isolated", "Solitude, contact points, and when alone has become too alone.", "Solitude"],
      ["08", "How to know when loneliness needs support", "Persistence, safety, mood, functioning, and qualified help.", "Care"],
    ],
    care: "If loneliness, isolation, grief, social fear, low mood, or unsafe thoughts are persistent or changing how you live, ask for qualified support. Community matters, but it does not replace care when care is needed.",
  },
};

function SoulL3Data() {
  return SOUL_L3[window.SOUL_L3_TOPIC] || SOUL_L3.meditation;
}

function soulSlug(title) {
  return title.toLowerCase().replace(/^how to /, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
}

function SoulL3Header() {
  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>
  );
}

function SoulL3Masthead() {
  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>
  );
}

function SoulL3Crumb({ page }) {
  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/soul/">Soul</a><span className="sep">/</span>
          <span className="here">{page.name}</span>
        </div>
        <div>{page.crumb}</div>
      </div>
    </div>
  );
}

function SoulL3Hero({ page }) {
  return (
    <section className="sl-hero">
      <div className="sl-hero-inner">
        <div>
          <div className="sl-eyebrow"><span className="dot" /><span>Soul / {page.name}</span><span>- {page.guides.length} guides</span></div>
          <h1>{page.title}</h1>
          <p>{page.standfirst}</p>
        </div>
        <figure><img src={page.image} alt={`${page.name} practice image`} /></figure>
      </div>
    </section>
  );
}

function SoulL3Passage({ page }) {
  return (
    <section className="sl-passage">
      <div className="sl-passage-inner">
        <aside><span>Practice note</span><p>{page.note}</p></aside>
        <article>
          <p className="lede">{page.passage}</p>
          <p>{page.second}</p>
        </article>
      </div>
    </section>
  );
}

function SoulL3Practice({ page }) {
  return (
    <section className="sl-practice">
      <div className="sl-inner">
        <div className="sl-head"><span>01</span><h2><em>{page.practiceTitle}</em>.</h2></div>
        <div className="sl-practice-grid">
          {page.practice.map(([name, text], i) => (
            <article key={name}>
              <span>{String(i + 1).padStart(2, "0")}</span>
              <h3>{name}</h3>
              <p>{text}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SoulL3Rooms({ page }) {
  return (
    <section className="sl-rooms">
      <div className="sl-inner sl-room-layout">
        <div className="sl-head"><span>02</span><h2>Rooms where this <em>practice</em> changes.</h2></div>
        <div className="sl-room-list">
          {page.rooms.map(([room, text]) => (
            <article key={room}><h3>{room}</h3><p>{text}</p></article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SoulL3Guides({ page }) {
  const topic = window.SOUL_L3_TOPIC || "meditation";
  return (
    <section className="sl-guides">
      <div className="sl-inner">
        <div className="sl-head"><span>03</span><h2>The <em>guide shelf</em>.</h2></div>
        <div className="sl-guide-grid">
          {page.guides.map(([n, title, dek, tag]) => (
            <a className="sl-guide" href={`/en/health/soul/${topic}/${soulSlug(title)}/`} key={n}>
              <div><span>No. {n}</span><span>{tag}</span></div>
              <h3>{title}</h3>
              <p>{dek}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function SoulL3Care({ page }) {
  return (
    <section className="sl-care">
      <div className="sl-care-inner">
        <h2>If the practice stops feeling <em>safe,</em> stop.</h2>
        <p>{page.care}</p>
      </div>
    </section>
  );
}

function SoulL3App() {
  const page = SoulL3Data();
  return (
    <React.Fragment>
      <SoulL3Masthead />
      <SoulL3Header />
      <SoulL3Crumb page={page} />
      <SoulL3Hero page={page} />
      <SoulL3Passage page={page} />
      <SoulL3Practice page={page} />
      <SoulL3Rooms page={page} />
      <SoulL3Guides page={page} />
      <SoulL3Care page={page} />
      <Footer />
    </React.Fragment>
  );
}

window.SoulL3App = SoulL3App;