/* global React */

/* ============================================================
   fitness/build.html - Layer-2 Fitness sub-page
   Sub-cats: Muscle · Progressive overload · Body composition · Physique
   ============================================================ */

const B_IMG = {
  hero: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?w=2400&q=80",
  musclegrowth: "https://images.unsplash.com/photo-1574680096145-d05b474e2155?w=1400&q=80",
  hypertrophy: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1400&q=80",
  overload: "https://images.unsplash.com/photo-1517963879433-6ad2b056d712?w=1400&q=80",
  bulking: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1400&q=80",
  cutting: "https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?w=1400&q=80",
  recomp: "https://images.unsplash.com/photo-1605296867304-46d5465a13f1?w=1400&q=80",
  composition: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1400&q=80",
  physique: "https://images.unsplash.com/photo-1526506118085-60ce8714f8c5?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1517344800994-80b20d62960e?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1605296867304-46d5465a13f1?w=1400&q=80",
};

function BCrumb() {
  return (
    <div className="tcrumb">
      <div className="tcrumb-inner">
        <div className="tcrumb-trail">
          <a href="/en/">How To: Health &amp; Fitness</a>
          <span className="sep">/</span>
          <a href="/en/fitness/">Fitness</a>
          <span className="sep">/</span>
          <span className="here">Build</span>
        </div>
        <div>Lane 02 · Sub 05 of 06</div>
      </div>
    </div>
  );
}
window.BCrumb = BCrumb;

function BHeader() {
  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/">Health</a>
          <a href="/en/fitness/" className="active">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.BHeader = BHeader;

function BHero() {
  return (
    <section className="thero" data-screen-label="01 Build Hero">
      <div className="thero-bg" style={{ backgroundImage: `url(${B_IMG.hero})` }} />
      <div className="thero-inner">
        <div>
          <div className="thero-eye">
            <span className="dot" />
            <span>Fitness · Sub-lane 05 - Build</span>
          </div>
          <h1>How to <span className="it">build</span> slowly.</h1>
          <p className="lede">
            Muscle growth, hypertrophy, overload, bulking, cutting, recomposition, body composition, and physique goals. The honest version: body change takes longer than the internet says, and most of the useful stuff is boring on purpose.
          </p>
          <div className="meta-row">
            <span><strong>08</strong> sub-categories</span>
            <span className="sep">·</span>
            <span><strong>96</strong> guides &amp; growing</span>
            <span className="sep">·</span>
            <span>Updated weekly</span>
            <span className="sep">·</span>
            <span>General principles only.</span>
          </div>
        </div>
        <aside className="thero-aside">
          <div className="a-eye">From the Lane Editor</div>
          <p>
            "The body changes slower than your feed refreshes. That is not a flaw. That is the whole deal."
          </p>
          <div className="by">
            <span className="ava">J.</span>
            <span>By <strong>Jenna</strong> · Lane Editor, Fitness · Atlanta</span>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.BHero = BHero;

const BUILD_FOUR = [
  {
    n: "01", slug: "muscle", img: "muscle", name: "Muscle",
    dek: "Hypertrophy without the fog machine. Volume, effort, exercise selection, protein, sleep, and why the basics keep showing up.",
    tags: "Hypertrophy · Volume · Effort · Protein",
    count: 9, time: "5-12 min reads",
    feat: { kicker: "Featured in Muscle", title: "How to add muscle without making it your personality.", dek: "Two lifts, two days, one decade. The unglamorous case for not doing more than you have to.", time: "8 min read" },
  },
  {
    n: "02", slug: "progressive-overload", img: "overload", name: "Progressive Overload",
    dek: "How training gets harder without getting reckless. Reps, load, sets, tempo, range, and the quiet art of changing one thing at a time.",
    tags: "Load · Reps · Sets · Tempo · Range",
    count: 8, time: "4-10 min reads",
    feat: { kicker: "Featured in Progressive Overload", title: "How to make a workout harder without making it stupid.", dek: "One knob at a time. More weight is only one of the knobs, and often not the first one.", time: "7 min read" },
  },
  {
    n: "03", slug: "body-composition", img: "composition", name: "Body Composition",
    dek: "A plain-language room for muscle, fat loss language, recomposition, timelines, and the measurements that can help or quietly ruin the mood.",
    tags: "Recomp · Measurements · Timelines · Habits",
    count: 7, time: "6-12 min reads",
    feat: { kicker: "Featured in Body Composition", title: "How to measure progress without letting it measure you.", dek: "Scale, photos, clothes, lifts, energy, and the line between useful feedback and a bad room to live in.", time: "9 min read" },
  },
  {
    n: "04", slug: "physique", img: "physique", name: "Physique",
    dek: "Aesthetic goals, honestly discussed. What training can influence, what genetics influences, and why comparison is the worst coach in the room.",
    tags: "Aesthetics · Shape · Genetics · Comparison",
    count: 7, time: "5-11 min reads",
    feat: { kicker: "Featured in Physique", title: "How to set a physique goal that does not eat the rest of your life.", dek: "Specific enough to train for, loose enough to stay human. That is the line we like.", time: "8 min read" },
  },
];

const BUILD_EIGHT = [
  {
    n: "01", slug: "muscle-growth", img: "musclegrowth", name: "Muscle Growth",
    dek: "The broad room for building muscle slowly: hard sets, food support, recovery, patience, and expectations that do not need a fantasy timeline.",
    tags: "Effort - Recovery - Time",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Muscle Growth", title: "How to add muscle without making it your personality.", dek: "The unglamorous case for doing the useful work long enough that it finally becomes visible.", time: "8 min read" },
  },
  {
    n: "02", slug: "hypertrophy", img: "hypertrophy", name: "Hypertrophy",
    dek: "Growth-focused training logic: sets, reps, effort, exercise choice, range, and fatigue managed well enough to continue.",
    tags: "Sets - Reps - Effort - Fatigue",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Hypertrophy", title: "How to train for growth without chasing every method.", dek: "Volume, effort, range, fatigue, and the quiet discipline of repeating what works.", time: "8 min read" },
  },
  {
    n: "03", slug: "progressive-overload", img: "overload", name: "Progressive Overload",
    dek: "How training gets harder without getting reckless. Reps, load, sets, tempo, range, and the quiet art of changing one thing at a time.",
    tags: "Load - Reps - Sets - Tempo",
    count: 12, time: "4-9 min reads",
    feat: { kicker: "Featured in Progressive Overload", title: "How to make a workout harder without making it stupid.", dek: "One knob at a time. More weight is only one of the knobs, and often not the first one.", time: "7 min read" },
  },
  {
    n: "04", slug: "bulking", img: "bulking", name: "Bulking",
    dek: "A gaining phase discussed without hype: why it might make sense, what changes, what it costs, and how to keep the exit visible.",
    tags: "Gain - Training - Tradeoffs",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Bulking", title: "How to think about a bulk before you start one.", dek: "Reason, rate, training, appetite, and why a phase needs an exit.", time: "8 min read" },
  },
  {
    n: "05", slug: "cutting", img: "cutting", name: "Cutting",
    dek: "A careful fat-loss phase with training still in the picture: energy, recovery, strength, pressure, and when to ask first.",
    tags: "Deficit - Training - Recovery",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Cutting", title: "How to cut without turning the whole week mean.", dek: "A sober look at the recovery cost, the warning signs, and the exit ramp.", time: "8 min read" },
  },
  {
    n: "06", slug: "body-recomposition", img: "recomp", name: "Body Recomposition",
    dek: "The hope of gaining muscle and losing fat at the same time, with honest expectations and better ways to read quiet progress.",
    tags: "Muscle - Fat Loss - Patience",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Body Recomposition", title: "How to know if recomp is actually happening.", dek: "Scale noise, strength, photos, measurements, and the slow feedback that matters.", time: "8 min read" },
  },
  {
    n: "07", slug: "body-composition", img: "composition", name: "Body Composition",
    dek: "Measurement literacy: scale, photos, tape, clothes, strength, water swings, timelines, and not over-reading noise.",
    tags: "Scale - Photos - Timelines",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Body Composition", title: "How to measure progress without letting it measure you.", dek: "Scale, photos, clothes, lifts, energy, and the line between useful feedback and a bad room to live in.", time: "9 min read" },
  },
  {
    n: "08", slug: "physique-goals", img: "physique", name: "Physique Goals",
    dek: "Aesthetic goals, honestly discussed: what training can influence, what genetics influences, and why comparison is the worst coach in the room.",
    tags: "Aesthetics - Genetics - Comparison",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Physique Goals", title: "How to set a physique goal that does not eat the rest of your life.", dek: "Specific enough to train for, loose enough to stay human. That is the line we like.", time: "8 min read" },
  },
];

function BFour() {
  const [active, setActive] = React.useState(0);
  const cur = BUILD_EIGHT[active];
  return (
    <section id="four" className="tfour" data-screen-label="02 The Eight">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Eight rooms <span className="display italic" style={{color:"var(--accent)"}}>to build.</span></h2>
          <div className="meta">A workshop<br/>of outcomes</div>
        </div>
        <div className="tfour-grid">
          <div className="tfour-list">
            {BUILD_EIGHT.map((s, i) => (
              <a key={s.slug} href={`/en/fitness/build/${s.slug}/`} className="tfour-row"
                 onMouseEnter={() => setActive(i)}>
                <div className="num">{s.n}</div>
                <div className="body">
                  <h3 className="name">{s.name}<span className="it">.</span></h3>
                  <p className="dek">{s.dek}</p>
                  <div className="tags">{s.tags}</div>
                </div>
                <div className="meta">
                  <div className="ct"><strong>{s.count}</strong> guides</div>
                  <div>{s.time}</div>
                  <div className="arr">→</div>
                </div>
              </a>
            ))}
          </div>
          <aside className="tfour-rail">
            <div className="r-eye"><span className="dot" /><span>{cur.feat.kicker}</span></div>
            <div className="r-img">
              <img src={B_IMG[cur.img]} alt={cur.name} />
            </div>
            <h4>How to <span className="it">{cur.feat.title.replace(/^How to /, "")}</span></h4>
            <p>{cur.feat.dek}</p>
            <div className="r-foot">
              <span>{cur.feat.time}</span>
              <span className="arr">Read →</span>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}
window.BFour = BFour;

function BPrinciples() {
  return (
    <section id="editorial" className="tedit" data-screen-label="03 Editorial">
      <div className="frame tedit-inner">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title">What we <span className="display italic" style={{color:"var(--accent)"}}>actually mean</span> by build.</h2>
          <div className="meta">A short essay<br/>- if you read nothing else</div>
        </div>

        <div className="tedit-body">
          <div className="tedit-h first">§ I - Slow is not a bug.</div>
          <p>
            Build is the room where patience becomes the main equipment. Muscle comes slowly. Body composition changes slowly. Visible differences usually arrive after the habits have stopped feeling interesting. That makes the whole subject vulnerable to nonsense, because nonsense is always willing to promise speed. We are not.
          </p>

          <div className="tedit-h">§ II - The basics are not beginner work.</div>
          <p>
            Useful building still comes back to the same ordinary levers: enough hard sets, enough food, enough protein, enough sleep, enough time, enough consistency to let any of it matter. Advanced work is not escaping the basics. Advanced work is knowing which basic you are neglecting.
          </p>
          <p>
            That is why most of our Build pages sound calmer than the topic usually sounds online. The body does not care how elaborate the plan looks. It cares what you repeat.
          </p>

          <div className="tedit-pull">The body changes slower than the fantasy. Train for the body.</div>

          <div className="tedit-h">§ III - Progress needs a knob.</div>
          <p>
            Progressive overload does not only mean adding weight. It can mean more reps, cleaner reps, more range, more control, another set, shorter rest, or the same work feeling less impossible. The point is not to make every session heroic. The point is to give the body a reason to adapt without making recovery pay the invoice.
          </p>

          <div className="tedit-h">§ IV - Measurements are tools, not bosses.</div>
          <p>
            Scale weight, photos, measurements, clothes, energy, and performance can all tell part of the story. None of them deserves the whole room. If tracking your body starts making your life smaller, meaner, or more anxious, that is information too. Ask for help early. You do not have to wait for it to get dramatic.
          </p>

          <div className="tedit-h">§ V - A physique goal still has to live with you.</div>
          <p>
            A good goal should make training clearer, not make every meal and mirror more charged. We like goals that are specific enough to guide the week and loose enough to survive being a person. The work matters. The rest of your life matters too.
          </p>
        </div>
      </div>
    </section>
  );
}
window.BPrinciples = BPrinciples;

const B_FEAT = [
  {
    img: "feat1", tag: "Build · Muscle",
    kicker: "The Long Read",
    h: "How to add muscle without chasing every new method.",
    p: "Volume, effort, food, sleep, and the case for doing the obvious work long enough that it finally becomes visible.",
    time: "10 min read · Filed 05.03.26",
    by: "By Jenna",
    lead: true,
  },
  {
    img: "feat2", tag: "Progressive Overload",
    kicker: "Field Notes",
    h: "One knob at a time.",
    p: "Make the work harder without turning every session into a referendum on your character.",
    time: "6 min read",
    by: "By Jenna",
  },
  {
    img: "feat3", tag: "Physique",
    kicker: "Practice",
    h: "The goal that stays human.",
    p: "Specific enough to train. Flexible enough to live.",
    time: "7 min read",
    by: "By Jenna",
  },
];

function BFeatured() {
  return (
    <section id="featured" className="ffeat" data-screen-label="04 Featured">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 03</div>
          <h2 className="title"><span className="display italic" style={{color:"var(--accent)"}}>Featured</span> reading.</h2>
          <div className="meta">Three pieces<br/>worth your morning</div>
        </div>
        <div className="ffeat-grid">
          {B_FEAT.map((f, i) => (
            <a key={i} className={`ffeat-card ${f.lead ? "lead" : ""}`} href="#">
              <div className="f-img">
                <img src={B_IMG[f.img]} alt={`${f.h} build 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.BFeatured = BFeatured;

function BPull() {
  return (
    <section className="fpull" data-screen-label="05 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">"</span>
        <blockquote>
          The boring work is only boring until it starts <span className="it">working.</span>
        </blockquote>
        <cite>From the Lane Editor - <a href="#four">Read the four</a></cite>
      </div>
    </section>
  );
}
window.BPull = BPull;

const B_START = [
  { n: "01", h: "add muscle slowly", p: "The basic levers that keep showing up for a reason.", time: "8 min" },
  { n: "02", h: "make training harder safely", p: "Progressive overload without the ego tax.", time: "6 min" },
  { n: "03", h: "measure progress sanely", p: "Feedback without letting the feedback run your life.", time: "7 min" },
  { n: "04", h: "set a physique goal", p: "Specific enough to train for, loose enough to stay human.", time: "7 min" },
];

function BStart() {
  return (
    <section id="start" className="fstart" data-screen-label="06 Start Here">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 04</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="fstart-grid">
          {B_START.map((s) => (
            <a key={s.n} className="fstart-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.BStart = BStart;

function BFooter() {
  const SharedFooter = window.HowToFooter;
  return SharedFooter ? <SharedFooter screenLabel="08 Footer" /> : null;
}
window.BFooter = BFooter;