/* global React */

const BODY_L3 = {
  hydration: {
    n: "02",
    slug: "hydration",
    name: "Hydration",
    title: <>How to read <span className="it">thirst</span><br/>before it gets loud.</>,
    promise: "Water, salt, sweat, heat, and the ordinary body signals that get mistaken for everything else.",
    guides: "08",
    updated: "05.08.26",
    image: "https://images.unsplash.com/photo-1523362628745-0c100150b504?w=1800&q=80",
    note: [
      "Hydration is one of those topics that got flattened into a number. Eight glasses. Half your body weight. A gallon jug with motivational timestamps printed on the side. The body is usually less theatrical than that.",
      "This hub is about reading context: weather, sweat, urine color, caffeine, alcohol, training, illness, travel, and the simple fact that thirst often arrives late. No dosage math. No electrolyte worship. Just a better way to notice what kind of day your body is having.",
    ],
    module: "hydration",
    guideIntro: "Start with the body signal, then match the day.",
    guidesList: [
      ["01", "How to tell if you need more water", "Thirst, color, dry mouth, headaches, and the signals that matter more than a bottle size.", "Signals"],
      ["02", "How to hydrate on hot days", "Heat, sweat, shade, salt, and the slower pace that keeps the day from getting stupid.", "Heat"],
      ["03", "How to use electrolytes without overdoing it", "When they help, when water is enough, and how to read a label without buying the whole promise.", "Labels"],
      ["04", "How to hydrate around workouts", "Before, during, and after training without turning every session into a science fair.", "Training"],
      ["05", "How to drink more water without tracking it", "Kitchen defaults, bottle placement, morning routines, and cues that survive a busy day.", "Habit"],
      ["06", "How coffee and alcohol change hydration", "What actually shifts, what gets exaggerated, and how to build the next glass into the rhythm.", "Context"],
      ["07", "How to hydrate while traveling", "Flights, hotels, salty meals, long walks, and the weird dryness of being away from home.", "Travel"],
      ["08", "How to know when thirst is not the whole story", "When dehydration is not the explanation and a clinician should be part of the conversation.", "Care"],
    ],
    care: "If thirst, dizziness, confusion, fainting, vomiting, diarrhea, or dark urine shows up fast or will not improve, stop treating it like a habit problem and ask a qualified medical professional.",
  },
  energy: {
    n: "03",
    slug: "energy",
    name: "Energy",
    title: <>How to understand <span className="it">energy</span><br/>without chasing it.</>,
    promise: "The daily curve, the afternoon dip, and the habits that make tired easier to read.",
    guides: "08",
    updated: "05.08.26",
    image: "https://images.unsplash.com/photo-1518609878373-06d740f60d8b?w=1800&q=80",
    note: [
      "Energy is not a personality trait. It is a pattern. Some days are low because sleep was short. Some are low because lunch was late, the room was dark, stress was high, or the body is asking for a quieter standard.",
      "This page is not here to turn you into a machine. It is here to help you read the curve: when you feel sharp, when you fade, what changed, and when tired stops being normal enough to ignore.",
    ],
    module: "energy",
    guideIntro: "Follow the curve before you reach for the fix.",
    guidesList: [
      ["01", "How to read your daily energy curve", "Morning, midday, afternoon, and evening patterns without turning your day into a spreadsheet.", "Pattern"],
      ["02", "How to handle the 3 PM dip", "Food, light, walking, breaks, and why a dip is not a moral failure.", "Afternoon"],
      ["03", "How daylight changes energy", "Why morning light helps more than most hacks and how to get it without making a production of it.", "Light"],
      ["04", "How food timing affects energy", "Breakfast, late lunches, snacks, heavy meals, and the difference between hungry and foggy.", "Food"],
      ["05", "How caffeine helps and backfires", "Use the cup without letting it borrow tomorrow.", "Caffeine"],
      ["06", "How to move when you feel sluggish", "Low-friction walks, stairs, short resets, and the line between waking up and draining more.", "Movement"],
      ["07", "How stress changes tired", "The wired-but-exhausted state, why rest feels hard, and how to lower the ask.", "Stress"],
      ["08", "How to know when fatigue needs care", "Persistence, sudden change, breathlessness, dizziness, low mood, and when to talk to a clinician.", "Care"],
    ],
    care: "If fatigue is sudden, persistent, unexplained, paired with pain, shortness of breath, fainting, major mood changes, or interferes with ordinary life, ask a qualified medical professional.",
  },
  posture: {
    n: "04",
    slug: "posture",
    name: "Posture & Movement",
    title: <>How to stop <span className="it">holding</span><br/>the same shape all day.</>,
    promise: "Desks, walks, necks, shoulders, hips, and the small resets that matter because they repeat.",
    guides: "08",
    updated: "05.08.26",
    image: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1800&q=80",
    note: [
      "Posture is not a pose you nail once and keep. It is a relationship with repetition. The desk wins because it gets eight hours. The walk wins when you give it a few chances to interrupt.",
      "This hub treats posture as movement literacy: what gets stiff, what gets weak, what needs a better setup, and what simply needs to stop being held in the same position for half a day.",
    ],
    module: "posture",
    guideIntro: "Fix the loop, not the photograph.",
    guidesList: [
      ["01", "How to set up a desk that does not punish you", "Screen height, feet, chair, keyboard, and the tiny changes that stop the daily collapse.", "Desk"],
      ["02", "How to reset your neck and shoulders", "Short, gentle resets for the shape most screens ask you to hold.", "Upper body"],
      ["03", "How to loosen hips after sitting", "Hip flexors, glutes, walks, and the difference between tight and underused.", "Hips"],
      ["04", "How to take movement snacks", "Thirty seconds, two minutes, ten minutes, and the reset you can actually repeat.", "Habit"],
      ["05", "How to stand without overcorrecting", "Ribs, pelvis, feet, and why forcing perfect posture usually makes everything worse.", "Standing"],
      ["06", "How walking helps posture", "The boring daily movement that gets the spine, hips, feet, and eyes back online.", "Walking"],
      ["07", "How to build posture-supporting strength", "Rows, carries, glutes, core, and simple strength that supports the day.", "Strength"],
      ["08", "How to know when pain needs help", "Numbness, weakness, radiating pain, trauma, persistence, and when to ask a professional.", "Care"],
    ],
    care: "If pain is sharp, radiating, paired with numbness or weakness, follows an injury, or will not improve, stop troubleshooting posture and consult a qualified medical professional.",
  },
  skin: {
    n: "05",
    slug: "skin",
    name: "Skin & Sun",
    title: <>How to live with <span className="it">sun</span><br/>without pretending it is simple.</>,
    promise: "Sunscreen, shade, hot showers, irritation, light, seasons, and the skin changes worth noticing.",
    guides: "08",
    updated: "05.08.26",
    image: "https://images.unsplash.com/photo-1509909756405-be0199881695?w=1800&q=80",
    note: [
      "Skin advice tends to split into two bad moods: fear of the sun, or worship of it. Real life lives in between. You need daylight. You also need protection. You need a routine. You probably do not need twelve products.",
      "This hub keeps the promises small: understand exposure, protect the easy parts, stop irritating your own skin, and notice changes early enough to ask someone who can actually look at them.",
    ],
    module: "skin",
    guideIntro: "Protect the daily surface before you chase the miracle.",
    guidesList: [
      ["01", "How to build a simple skin routine", "Cleanse, moisturize, protect, repeat. The version that survives real life.", "Routine"],
      ["02", "How to choose sunscreen you will use", "SPF, texture, face versus body, reapplying, and why the best one is the one you keep wearing.", "Sun"],
      ["03", "How to handle hot showers and dry skin", "Temperature, timing, moisturizer, and the habit nobody wants to hear about.", "Dryness"],
      ["04", "How to notice skin changes without spiraling", "Photos, dates, shape, color, growth, and what to bring to a clinician.", "Noticing"],
      ["05", "How to protect skin on active days", "Sweat, friction, sun, hats, clothing, and outdoor workouts.", "Activity"],
      ["06", "How sleep and stress show up on skin", "The face as a pattern, not a verdict.", "Lifestyle"],
      ["07", "How to avoid irritating your skin", "Scrubs, acids, fragrance, over-washing, and changing too many things at once.", "Irritation"],
      ["08", "How to know when skin needs a professional", "Changing spots, severe burns, infection signs, persistent rashes, and when to stop guessing.", "Care"],
    ],
    care: "If a mole or spot changes, a rash persists, a burn blisters severely, skin looks infected, or irritation spreads quickly, ask a qualified medical professional.",
  },
  symptoms: {
    n: "06",
    slug: "symptoms",
    name: "Symptoms Literacy",
    title: <>How to notice a <span className="it">symptom</span><br/>without diagnosing yourself.</>,
    promise: "A calmer way to track what changed, what matters, and when the next move is professional care.",
    guides: "07",
    updated: "05.08.26",
    image: "https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=1800&q=80",
    note: [
      "The internet turns symptoms into stories too fast. A headache becomes a search spiral. A stomach ache becomes a forum. A new pain becomes a private trial where you are judge, jury, and terrified defendant.",
      "Symptoms Literacy exists to slow that down. It will not tell you what you have. It will help you describe what changed, what to track, what questions to bring, and when reading should end because care should begin.",
    ],
    module: "symptoms",
    guideIntro: "Write down the pattern before you write the ending.",
    guidesList: [
      ["01", "How to describe a symptom clearly", "Location, timing, severity, change, triggers, and the words that make care easier.", "Language"],
      ["02", "How to track symptoms without obsessing", "What to write down, what to ignore, and how to stop the log from becoming the day.", "Tracking"],
      ["03", "How to know when a symptom is urgent", "Severe, sudden, spreading, neurological, breathing, chest, and other stop-reading patterns.", "Urgent"],
      ["04", "How to prepare for an appointment", "Questions, dates, photos, medication lists, supplements, and the short version of the story.", "Care"],
      ["05", "How to talk about pain", "Sharp, dull, burning, radiating, intermittent, constant, and why the words matter.", "Pain"],
      ["06", "How to avoid self-diagnosis spirals", "Search limits, trusted sources, notes for care, and what not to do at midnight.", "Calm"],
      ["07", "How to know when watchful waiting is not enough", "Persistence, worsening, recurrence, interference, and when to bring in a clinician.", "Care"],
    ],
    care: "If a symptom is sudden, severe, worsening, persistent, recurring, or affects breathing, chest pain, speech, movement, vision, consciousness, or safety, seek professional care promptly.",
  },
};

function B3Data() {
  return BODY_L3[window.BODY_L3_TOPIC] || BODY_L3.hydration;
}

function B3Header() {
  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 B3Masthead() {
  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 B3Crumb({ 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/body/">Body</a>
          <span className="sep">/</span>
          <span className="here">{page.name}</span>
        </div>
        <div>Topic {page.n} of 06 - Body</div>
      </div>
    </div>
  );
}

function B3Hero({ page }) {
  return (
    <section className="b3hero" data-screen-label={`01 ${page.name} Hero`}>
      <div className="b3hero-inner">
        <div className="b3copy">
          <div className="b3-eyebrow">
            <span className="dot" />
            <span>Body / Topic {page.n} - {page.name}</span>
            <span className="dim">- Hub - {page.guides} guides</span>
          </div>
          <h1>{page.title}</h1>
          <div className="b3-meta">
            <div className="cell promise">
              <div className="lbl">The promise</div>
              <div className="val">{page.promise}</div>
            </div>
            <div className="cell">
              <div className="lbl">Guides</div>
              <div className="val"><span className="it">{page.guides}</span> in this hub</div>
            </div>
            <div className="cell">
              <div className="lbl">Updated</div>
              <div className="val">{page.updated}</div>
            </div>
          </div>
        </div>
        <figure className="b3-photo">
          <img src={page.image} alt={`${page.name} body health image`} />
        </figure>
      </div>
    </section>
  );
}

function B3Note({ page }) {
  return (
    <section className="b3note">
      <div className="b3note-inner">
        <div className="by">
          <span>By <strong>Torrie</strong> - Lane Editor, Health</span>
          <span className="sep">-</span>
          <span>Filed 05.08.26</span>
        </div>
        {page.note.map((p, i) => <p key={i}>{p}</p>)}
      </div>
    </section>
  );
}

function HydrationModule() {
  const days = [
    ["Desk day", "You are not sweating much. The risk is forgetting to drink until your head hurts.", "Put water at the first meal and the first work block. Do not force a gallon because a bottle told you to."],
    ["Hot outside day", "Heat changes the math before exercise does. Sweat, shade, pace, and salt all matter.", "Drink earlier, eat normally salted food, and slow down before thirst becomes the only signal left."],
    ["Training day", "A short lift and a long run are not the same hydration problem.", "Start the session not-behind, sip during longer or hotter work, and let sweat level guide the rest."],
    ["Travel day", "Flights, hotel rooms, salty meals, long walks, and dry air quietly stack up.", "Pair water with transitions: airport, arrival, first meal, bedside. Simple beats perfect."],
    ["Sick day", "Fever, vomiting, diarrhea, and poor appetite can move this out of habit territory.", "Do not try to tough it out with wellness math. Watch for dizziness, confusion, and worsening signs."],
  ];
  return (
    <section className="b3module hydration-module">
      <div className="b3module-inner">
        <div className="b3-section-head">
          <div className="num">No. 01</div>
          <h2>What kind of <span className="it">day</span> is this?</h2>
          <div className="meta">Hydration changes with context</div>
        </div>
        <div className="hydration-brief">
          <div className="brief-lede">
            <span>Reader test</span>
            <p>If the day changed, the hydration plan changes. The useful question is not how much water a stranger drinks. It is what your body is losing, ignoring, or asking for today.</p>
          </div>
          <div className="brief-list">
            {days.map(([day, risk, move], i) => (
              <article key={day}>
                <div className="brief-num">{String(i + 1).padStart(2, "0")}</div>
                <h3>{day}</h3>
                <p><strong>What changes:</strong> {risk}</p>
                <p><strong>First move:</strong> {move}</p>
              </article>
            ))}
          </div>
        </div>
        <div className="hydration-rule">
          <span>Better rule</span>
          <p>Anchor water to meals, heat, sweat, travel, and symptoms. Fixed targets are less useful than a rhythm that notices the day.</p>
        </div>
      </div>
    </section>
  );
}

function EnergyModule() {
  const types = [
    ["Sleepy", "Your body wants actual sleep, not motivation.", "Short night, late caffeine, inconsistent bedtime, heavy evening.", "Protect tonight first. Use daylight and a walk, not a heroic workload."],
    ["Foggy", "You are awake, but the room feels full of cotton.", "Low light, long screen blocks, delayed meal, dehydration, stress residue.", "Change the environment: light, water, food, one smaller task."],
    ["Crashing", "Energy drops fast instead of fading slowly.", "Big meal, skipped meal, hard training, poor sleep, caffeine timing.", "Look backward three hours. The clue is usually there."],
    ["Wired tired", "Your body is activated, but not useful.", "Stress, deadlines, too much caffeine, no decompression, late scrolling.", "Lower input before adding output. Quiet beats another stimulant."],
    ["Heavy", "Everything feels physically expensive.", "Illness coming on, under-recovery, low mood, poor sleep streak.", "Reduce the ask. If it persists or arrives suddenly, bring in care."],
  ];
  return (
    <section className="b3module energy-module">
      <div className="b3module-inner">
        <div className="b3-section-head">
          <div className="num">No. 01</div>
          <h2>What kind of <span className="it">tired</span> is it?</h2>
          <div className="meta">Name the state before chasing the fix</div>
        </div>
        <div className="energy-diagnostic">
          <div className="diag-head"><span>Type</span><span>What it usually means</span><span>First checks</span><span>Better first move</span></div>
          {types.map(([type, means, checks, move]) => (
            <article key={type}>
              <h3>{type}</h3>
              <p>{means}</p>
              <p>{checks}</p>
              <p>{move}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function PostureModule() {
  const places = [
    ["Desk", "Neck forward, ribs collapsed, hips parked.", "Raise the screen, lower the shoulders, stand before you feel stiff."],
    ["Phone", "Head down, thumbs close, breath shallow.", "Bring the phone up or put it down. The neck should not pay the whole bill."],
    ["Car", "Hips tucked, arms reaching, low back passive.", "Move the seat closer, empty the pockets, walk two minutes after long drives."],
    ["Couch", "Comfort becomes a shape you hold for hours.", "Change positions before the show changes episodes."],
    ["Gym", "Training cannot fix a day that never moves.", "Rows, carries, glutes, and walking support posture better than forced stiffness."],
  ];
  return (
    <section className="b3module posture-module">
      <div className="b3module-inner">
        <div className="b3-section-head">
          <div className="num">No. 01</div>
          <h2>Where the day <span className="it">gets stuck.</span></h2>
          <div className="meta">Posture is repetition, not a pose</div>
        </div>
        <div className="stuck-timeline">
          {places.map(([place, cost, move], i) => (
            <article key={place}>
              <div className="place-num">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <h3>{place}</h3>
                <p><strong>What it tends to do:</strong> {cost}</p>
                <p><strong>What breaks the pattern:</strong> {move}</p>
              </div>
            </article>
          ))}
        </div>
        <div className="movement-prescription">
          <span>The better frame</span>
          <p>Do not hunt for perfect posture. Interrupt the position that keeps winning.</p>
        </div>
      </div>
    </section>
  );
}

function SkinModule() {
  const ledger = [
    ["Sun", "Useful light becomes skin load when exposure is long, direct, or repeated.", "Shade, clothing, sunscreen you will actually reapply."],
    ["Heat", "Hot rooms, hot showers, and hot days can leave skin drier and more reactive.", "Shorter heat, gentler water, moisturizer while skin is still slightly damp."],
    ["Sweat", "Sweat is not dirty, but sitting in it can add friction and irritation.", "Rinse when you can, change fabric, protect high-friction spots."],
    ["Friction", "Straps, waistbands, shaving, masks, and workouts can all rub the same places.", "Notice the repeated contact before adding more products."],
    ["Products", "More steps can mean more chances to irritate the barrier.", "Change one thing at a time and give skin enough days to answer."],
    ["Change", "A new or changing mark is not a skincare puzzle.", "Take a clear photo, note the date, and ask a professional when it changes."],
  ];
  return (
    <section className="b3module skin-module">
      <div className="b3module-inner">
        <div className="b3-section-head">
          <div className="num">No. 01</div>
          <h2>The exposure <span className="it">ledger.</span></h2>
          <div className="meta">What the day adds to your skin</div>
        </div>
        <div className="skin-ledger">
          <div className="ledger-head"><span>Exposure</span><span>What it adds</span><span>What helps</span></div>
          {ledger.map(([item, adds, helps], i) => (
            <article key={item}>
              <div className="ledger-num">{String(i + 1).padStart(2, "0")}</div>
              <h3>{item}</h3>
              <p>{adds}</p>
              <p>{helps}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SymptomsModule() {
  const intake = [
    ["Start", "When did it begin? Was it sudden, gradual, after an injury, after food, after travel, after a new medication or supplement?"],
    ["Change", "Is it improving, worsening, spreading, recurring, or staying exactly the same?"],
    ["Severity", "What can you still do? What can you not do? What wakes you up or stops the day?"],
    ["Company", "What else came with it: fever, dizziness, rash, shortness of breath, weakness, mood change, bleeding, swelling?"],
    ["Evidence", "Photos, dates, temperature, medication list, supplement list, and the questions you want answered."],
  ];
  return (
    <section className="b3module symptoms-module">
      <div className="b3module-inner">
        <div className="b3-section-head">
          <div className="num">No. 01</div>
          <h2>The care <span className="it">intake sheet.</span></h2>
          <div className="meta">Describe the pattern, not the diagnosis</div>
        </div>
        <div className="symptom-intake">
          <div className="intake-lede">
            <span>Use this before the appointment</span>
            <p>The goal is not to solve the symptom on the page. The goal is to show up with a clearer story so a qualified professional can help faster.</p>
          </div>
          {intake.map(([h, p], i) => (
            <article key={h}>
              <div className="intake-num">{String(i + 1).padStart(2, "0")}</div>
              <h3>{h}</h3>
              <p>{p}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function B3Module({ page }) {
  if (page.module === "hydration") return <HydrationModule />;
  if (page.module === "energy") return <EnergyModule />;
  if (page.module === "posture") return <PostureModule />;
  if (page.module === "skin") return <SkinModule />;
  return <SymptomsModule />;
}

function B3Guides({ page }) {
  return (
    <section className="b3guides">
      <div className="frame">
        <div className="b3-section-head">
          <div className="num">No. 02</div>
          <h2>Guide shelf <span className="it">for {page.name}.</span></h2>
          <div className="meta">{page.guideIntro}</div>
        </div>
        <div className="b3-guide-grid">
          {page.guidesList.map(([n, h, p, tag]) => (
            <a key={n} className="b3-guide" href="#">
              <div className="top"><span>{n}</span><span>{tag}</span></div>
              <h3>{h}</h3>
              <p>{p}</p>
              <div className="foot"><span>Guide</span><span>Read</span></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function B3Care({ page }) {
  return (
    <section className="b3care">
      <div className="b3care-inner">
        <div>
          <div className="label"><span className="dot" /><span>When to put down the magazine</span></div>
          <h2>Know where this page <span className="it">stops.</span></h2>
        </div>
        <p>{page.care}</p>
      </div>
    </section>
  );
}

function BodyL3App() {
  const page = B3Data();
  return (
    <React.Fragment>
      <B3Masthead />
      <B3Header />
      <B3Crumb page={page} />
      <B3Hero page={page} />
      <B3Note page={page} />
      <B3Module page={page} />
      <B3Guides page={page} />
      <B3Care page={page} />
      <Footer />
    </React.Fragment>
  );
}

window.BodyL3App = BodyL3App;