/* global React */

const B_IMG = {
  hero: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=2400&q=80",
  lead: "https://images.unsplash.com/photo-1599058917765-a780eda07a3e?w=1600&q=80",
};

const B_BASE = "/en/fitness/train/beginner-training/";
const B_SLUG = (title) => window.howToArticleSlug(B_BASE, title);
const useBArticles = window.useHubArticles;

function withBeginnerFallback(article, fallback) {
  if (article && article.status === "published") return article;
  return {
    ...(article || {}),
    status: "stub",
    title: fallback?.h || article?.title || null,
    meta_description: fallback?.p || fallback?.d || article?.meta_description || "",
  };
}

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 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>
          <a href="/en/fitness/train/">Train</a>
          <span className="sep">/</span>
          <span className="here">Beginner Training</span>
        </div>
        <div>Fitness - Train - Beginner Training</div>
      </div>
    </div>
  );
}
window.BCrumb = BCrumb;

function BHero() {
  const idx = [
    { n: "01", nm: "Top Five", ct: "Start here" },
    { n: "02", nm: "Primer", ct: "5 min read" },
    { n: "03", nm: "Beginner Library", ct: "36 guides" },
    { n: "04", nm: "FAQ", ct: "10 questions" },
    { n: "05", nm: "First Week", ct: "4 reads" },
  ];
  return (
    <section className="whero" data-screen-label="01 Beginner Training Hero">
      <div className="whero-inner">
        <div>
          <div className="whero-eye">
            <span className="dot" />
            <span>Fitness - Train - Beginner Training</span>
          </div>
          <h1>How to <span className="it">start</span> training.</h1>
          <p className="lede">
            First gym days, first home sessions, first three-day weeks. Beginner training should feel clear enough to repeat, modest enough to recover from, and specific enough that you know what to do next time.
          </p>
          <div className="meta-row">
            <span><strong>36</strong> guides</span>
            <span className="sep">-</span>
            <span><strong>5</strong> sections</span>
            <span className="sep">-</span>
            <span>First weeks</span>
            <span className="sep">-</span>
            <span>General principles only.</span>
          </div>
        </div>
        <aside className="whero-index">
          <div className="ix-eye">
            <span>On this page</span>
            <span className="live">Start</span>
          </div>
          <ol>
            {idx.map((r) => (
              <li key={r.n}>
                <span className="n">{r.n}</span>
                <span className="nm">{r.nm}</span>
                <span className="ct">{r.ct}</span>
              </li>
            ))}
          </ol>
        </aside>
      </div>
    </section>
  );
}
window.BHero = BHero;

const B_TOP5 = [
  {
    n: "01",
    lead: true,
    h: "How to start training when you have no routine.",
    p: "Three simple sessions, one notebook rule, and a way to leave the first week feeling like you can come back. This is the place to start when the hard part is not effort, but knowing what counts as enough.",
    by: "Jenna",
    tag: "First week",
    time: "6 min read",
    reads: "Start here",
  },
  {
    n: "02",
    h: "How to use a gym for the first time.",
    p: "What to do before the first set, how to choose a corner, and the small script that makes asking for help less awkward.",
    by: "Torrie",
    tag: "Gym basics",
    time: "5 min read",
  },
  {
    n: "03",
    h: "How to train three days a week.",
    p: "The durable weekly floor: full-body sessions, one rest day between, and no fantasy calendar.",
    by: "Jenna",
    tag: "Routine",
    time: "5 min read",
  },
  {
    n: "04",
    h: "How to know if a beginner workout is too much.",
    p: "The soreness, sleep, appetite, and motivation checks that matter more than whether the workout felt impressive.",
    by: "Torrie",
    tag: "Recovery",
    time: "4 min read",
  },
  {
    n: "05",
    h: "How to keep going after the first missed week.",
    p: "Do not restart. Resume. The difference sounds small until it saves the habit.",
    by: "Jenna",
    tag: "Habit",
    time: "4 min read",
  },
];

function BTopFive() {
  const slugs = React.useMemo(() => B_TOP5.map((t) => B_SLUG(t.h)), []);
  const { articles } = useBArticles(slugs);

  return (
    <section id="top5" className="wtop" data-screen-label="02 Top 5">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">The five <span className="display italic" style={{color:"var(--accent)"}}>first</span> reads.</h2>
          <div className="meta">First month,<br/>not perfect</div>
        </div>
        <div className="wtop-grid">
          {articles.map((article, i) => (
            <FitnessArticleCard
              key={article.slug}
              article={withBeginnerFallback(article, B_TOP5[i])}
              rank={B_TOP5[i].n}
              tag={B_TOP5[i].tag}
              time={B_TOP5[i].time}
              lead={Boolean(B_TOP5[i].lead)}
              variant="top"
            />
          ))}
        </div>
      </div>
    </section>
  );
}
window.BTopFive = BTopFive;

function BPrimer() {
  return (
    <section className="wprimer" data-screen-label="03 Primer">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title">A short <span className="display italic" style={{color:"var(--accent)"}}>primer</span> on beginning.</h2>
          <div className="meta">If the room feels loud,<br/>read this first</div>
        </div>
        <div className="wprimer-body">
          <div className="wprimer-h first">I - The first goal is repeatability.</div>
          <p>
            Beginner training is not a personality test. It is a way to make next week easier to repeat. The first plan should be almost boring: a few movements, a few sets, a little walking, and enough restraint that you can do it again in two days.
          </p>

          <div className="wprimer-h">II - Build a floor before a ceiling.</div>
          <p>
            Three days a week is enough for most adults to learn the room, learn the movements, and build early strength. Four days can work later. Six days is usually a way to quit with better stationery. The floor matters because it survives busy weeks.
          </p>

          <div className="wprimer-h">III - Pick weights you can control.</div>
          <p>
            The right beginner weight is not the heaviest thing you can move. It is the heaviest thing you can move with clean reps, steady breathing, and one or two reps left in reserve. If every set turns into a negotiation, the weight is too heavy.
          </p>

          <div className="wprimer-h">IV - Soreness is not the scoreboard.</div>
          <p>
            Some soreness is normal when you start. Sharp pain, worsening pain, numbness, dizziness, or anything that feels wrong is different. Stop the session and get qualified help. A useful plan should make you more capable, not more worried about your body.
          </p>

          <div className="wprimer-h">V - The notebook beats the mirror.</div>
          <p>
            Write down the movement, the weight, and the reps. That is enough. The mirror will have opinions every morning. The notebook will tell you whether you showed up, repeated the work, and made one small improvement.
          </p>
        </div>
      </div>
    </section>
  );
}
window.BPrimer = BPrimer;

const B_LIB = {
  first: [
    { n: "01", h: "How to start training when you have no routine.", d: "Three sessions, one notebook, and a sane first week.", by: "Jenna", tag: "Start", t: "6 min", featured: true },
    { n: "02", h: "How to do your first full-body workout.", d: "Push, pull, squat, hinge, carry, walk. Nothing extra.", by: "Torrie", tag: "Workout", t: "5 min" },
    { n: "03", h: "How to warm up without wasting twenty minutes.", d: "Five minutes that prepare you without turning into a second workout.", by: "Jenna", tag: "Warm-up", t: "4 min" },
    { n: "04", h: "How to choose your starting weights.", d: "A simple first-set test for dumbbells, machines, and barbells.", by: "Torrie", tag: "Weights", t: "5 min" },
    { n: "05", h: "How to know when the first week worked.", d: "Energy, soreness, confidence, and whether you can repeat it.", by: "Jenna", tag: "Check-in", t: "4 min" },
    { n: "06", h: "How to recover between beginner workouts.", d: "Walking, food, sleep, and the habit of doing less than you could.", by: "Torrie", tag: "Recovery", t: "5 min" },
    { n: "07", h: "How to avoid doing too much too soon.", d: "The early mistake that feels like discipline until Thursday.", by: "Jenna", tag: "Pacing", t: "4 min" },
  ],
  gym: [
    { n: "01", h: "How to use a gym for the first time.", d: "Where to go first, what to ignore, and how to leave with a plan.", by: "Torrie", tag: "Gym", t: "5 min", featured: true },
    { n: "02", h: "How to ask someone how a machine works.", d: "A short script for a normal human interaction.", by: "Jenna", tag: "Confidence", t: "3 min" },
    { n: "03", h: "How to use machines without feeling lost.", d: "Seats, pins, handles, range, and the first two sets.", by: "Torrie", tag: "Machines", t: "5 min" },
    { n: "04", h: "How to share equipment politely.", d: "Working in, wiping down, waiting, and when to move on.", by: "Jenna", tag: "Etiquette", t: "4 min" },
    { n: "05", h: "How to find a quiet corner and still train well.", d: "Dumbbells, cables, mats, and a session that fits one square of floor.", by: "Torrie", tag: "Crowded gym", t: "5 min" },
    { n: "06", h: "How to leave the gym without second-guessing everything.", d: "The two notes to write down before you walk out.", by: "Jenna", tag: "Routine", t: "3 min" },
    { n: "07", h: "How to start again after an awkward first visit.", d: "Almost everyone has one. It does not get a vote.", by: "Torrie", tag: "Reset", t: "4 min" },
  ],
  routine: [
    { n: "01", h: "How to train three days a week.", d: "The weekly floor that fits most adult lives.", by: "Jenna", tag: "3-day", t: "5 min", featured: true },
    { n: "02", h: "How to build a beginner full-body week.", d: "Three sessions, one rest day between, repeat.", by: "Torrie", tag: "Full-body", t: "6 min" },
    { n: "03", h: "How to make a two-day week still count.", d: "What to keep when the week gets compressed.", by: "Jenna", tag: "Busy week", t: "4 min" },
    { n: "04", h: "How to add a fourth day without breaking the plan.", d: "The extra day should support the week, not hijack it.", by: "Torrie", tag: "Add-on", t: "5 min" },
    { n: "05", h: "How to pair strength and easy cardio.", d: "Walks, bikes, incline treadmills, and the pace that helps recovery.", by: "Jenna", tag: "Cardio", t: "5 min" },
    { n: "06", h: "How to know when to change your beginner plan.", d: "Boredom is not enough. Stalling, pain, and schedule changes matter.", by: "Torrie", tag: "Progress", t: "5 min" },
    { n: "07", h: "How to keep a routine during travel.", d: "A hotel-room version that protects the habit.", by: "Jenna", tag: "Travel", t: "4 min" },
  ],
  form: [
    { n: "01", h: "How to learn one lift at a time.", d: "Pick the movement, pick the cue, repeat for a week.", by: "Torrie", tag: "Skill", t: "4 min", featured: true },
    { n: "02", h: "How to squat without guessing.", d: "Feet, knees, depth, and the range that stays controlled.", by: "Jenna", tag: "Squat", t: "5 min" },
    { n: "03", h: "How to hinge without turning it into a squat.", d: "Hips back, ribs down, weight close.", by: "Torrie", tag: "Hinge", t: "5 min" },
    { n: "04", h: "How to push up with your whole body.", d: "Hands, ribs, hips, and the incline that fits today.", by: "Jenna", tag: "Push-up", t: "4 min" },
    { n: "05", h: "How to row without shrugging everything.", d: "Back pockets, long neck, and where the elbow should travel.", by: "Torrie", tag: "Row", t: "4 min" },
    { n: "06", h: "How to stop when a movement hurts.", d: "What to swap, what to skip, and when to ask for help.", by: "Jenna", tag: "Pain", t: "4 min" },
    { n: "07", h: "How to film one set without overthinking it.", d: "One angle, one cue, one thing to improve.", by: "Torrie", tag: "Self-check", t: "3 min" },
  ],
  habit: [
    { n: "01", h: "How to keep going after the first missed week.", d: "Do not restart. Resume. The whole habit depends on that.", by: "Jenna", tag: "Habit", t: "4 min", featured: true },
    { n: "02", h: "How to make training feel less all-or-nothing.", d: "Minimum days, bonus days, and the difference between both.", by: "Torrie", tag: "Mindset", t: "4 min" },
    { n: "03", h: "How to train when motivation disappears.", d: "Shrink the session until it is small enough to do.", by: "Jenna", tag: "Low energy", t: "4 min" },
    { n: "04", h: "How to choose a time of day you will keep.", d: "Morning, lunch, evening, and the friction each one hides.", by: "Torrie", tag: "Schedule", t: "5 min" },
    { n: "05", h: "How to make progress without chasing soreness.", d: "The early signs that matter more than feeling wrecked.", by: "Jenna", tag: "Progress", t: "4 min" },
    { n: "06", h: "How to train with a friend who is more advanced.", d: "Share the room, not the weights.", by: "Torrie", tag: "Partner", t: "5 min" },
    { n: "07", h: "How to make your second month easier.", d: "Keep the plan, add tiny progress, protect the routine.", by: "Jenna", tag: "Month two", t: "5 min" },
    { n: "08", h: "How to know when you are no longer a beginner.", d: "Not a title. A pattern of showing up and adjusting honestly.", by: "Torrie", tag: "Next step", t: "5 min" },
  ],
};

const B_TABS = [
  { id: "first", nm: "First Week", ct: 7 },
  { id: "gym", nm: "Gym Basics", ct: 7 },
  { id: "routine", nm: "Three Days", ct: 7 },
  { id: "form", nm: "Form Basics", ct: 7 },
  { id: "habit", nm: "Staying With It", ct: 8 },
];

function BLibrary() {
  const [tab, setTab] = React.useState("first");
  const rows = B_LIB[tab];
  const slugs = React.useMemo(() => rows.map((r) => B_SLUG(r.h)), [tab]);
  const { articles } = useBArticles(slugs);
  const total = B_TABS.reduce((sum, t) => sum + t.ct, 0);
  const active = B_TABS.find((t) => t.id === tab);

  return (
    <section id="library" className="wlib" data-screen-label="04 Beginner Library">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 03</div>
          <h2 className="title">The beginner <span className="display italic" style={{color:"var(--accent)"}}>library.</span></h2>
          <div className="meta">{total} guides<br />by first problem</div>
        </div>
        <div className="wlib-tabs" role="tablist" aria-label="Beginner training guide sections">
          {B_TABS.map((t) => (
            <button
              key={t.id}
              className={`wlib-tab ${tab === t.id ? "active" : ""}`}
              onClick={() => setTab(t.id)}
              type="button">
              {t.nm}<span className="ct">{t.ct}</span>
            </button>
          ))}
        </div>
        <div className="wlib-list">
          {articles.map((article, i) => (
            <FitnessArticleCard
              key={article.slug}
              article={withBeginnerFallback(article, rows[i])}
              rank={rows[i].n}
              tag={rows[i].tag}
              time={rows[i].t}
              featured={Boolean(rows[i].featured)}
              variant="library"
            />
          ))}
        </div>
        <div className="wlib-foot">
          <span>Showing <strong>{rows.length}</strong> of <strong>{total}</strong> guides in <strong>{active.nm}</strong></span>
          <span>General training principles</span>
        </div>
      </div>
    </section>
  );
}
window.BLibrary = BLibrary;

const B_FAQ = [
  { q: "How many days a week should a beginner train?", a: "Three days is the best starting point for most adults. It gives you enough practice to learn the movements and enough rest to recover. Two days can still work. Four days is a later upgrade, not the entry fee.", by: "Jenna", time: "1 min answer" },
  { q: "Should I start with machines or free weights?", a: "Either can work. Machines are useful because they reduce the number of things you have to control at once. Free weights are useful because they teach balance and setup. The better choice is the one you can do safely and repeat.", by: "Torrie", time: "1 min answer" },
  { q: "How heavy should the first weights be?", a: "Choose a weight you could lift for one or two clean reps more than the plan asks for. If your form changes halfway through the set, go lighter. Early training should teach control before it tests bravery.", by: "Jenna", time: "1 min answer" },
  { q: "Is soreness good or bad?", a: "A little soreness can be normal. Severe soreness that changes how you move, lasts for days, or comes with sharp pain is a sign to back off and get help if needed. Soreness is feedback, not a trophy.", by: "Torrie", time: "1 min answer" },
  { q: "Do I need supplements to start training?", a: "No. Sleep, food, water, walking, and a plan you can repeat matter far more at the start. Supplements can wait until the routine exists.", by: "Jenna", time: "1 min answer" },
  { q: "What should I do if the gym feels intimidating?", a: "Pick a small plan, choose one area of the room, and finish the plan without adding extra tasks. Confidence comes from completing repeatable visits, not mastering the whole building on day one.", by: "Torrie", time: "1 min answer" },
  { q: "How long should a beginner workout take?", a: "Most beginner sessions should land between 35 and 55 minutes. If it takes much longer, the plan probably has too many exercises, too much rest, or too many decisions.", by: "Jenna", time: "1 min answer" },
  { q: "Should I do cardio too?", a: "Yes, but keep it easy at first. Walks, easy cycling, or conversational-pace cardio can help conditioning without stealing recovery from strength sessions.", by: "Torrie", time: "1 min answer" },
  { q: "When should I change the plan?", a: "Change the plan when your schedule changes, a movement consistently hurts, or progress stalls for several weeks. Do not change it every time you get bored. Repetition is part of learning.", by: "Jenna", time: "1 min answer" },
  { q: "What if I miss a week?", a: "Resume with the easiest version of the last plan you completed. Do not punish yourself with extra work. The habit gets stronger when missed weeks become normal interruptions instead of endings.", by: "Torrie", time: "1 min answer" },
];

function BFAQ() {
  return (
    <section id="faq" className="wfaq" data-screen-label="05 FAQ">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 04</div>
          <h2 className="title">Ten beginner <span className="display italic" style={{color:"var(--accent)"}}>questions.</span></h2>
          <div className="meta">Short answers,<br />plain language</div>
        </div>
        <div className="wfaq-list">
          {B_FAQ.map((f, i) => (
            <div key={f.q} className="wfaq-item">
              <div className="q-num">Q - {String(i + 1).padStart(2, "0")}</div>
              <div className="q-body">
                <h4>{f.q.split(" ").slice(0, 2).join(" ")} <span className="it">{f.q.split(" ").slice(2).join(" ")}</span></h4>
                <p>{f.a}</p>
                <div className="a-meta">Answered by <strong>{f.by}</strong> - {f.time}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.BFAQ = BFAQ;

function BPull() {
  return (
    <section className="fpull" data-screen-label="06 Pull Quote">
      <div className="fpull-inner">
        <span className="fpull-mark">"</span>
        <blockquote>
          The best beginner plan is the one that makes <span className="it">the next visit</span> feel possible.
        </blockquote>
        <cite>From the Beginner Training guide - <a href="#top5">Start with the first five</a></cite>
      </div>
    </section>
  );
}
window.BPull = BPull;

const B_START = [
  { n: "01", h: "start with no routine", p: "Read the first guide, then do the simplest full-body session this week.", time: "6 min" },
  { n: "02", h: "train three days", p: "Use the weekly floor before you add a fourth day.", time: "5 min" },
  { n: "03", h: "learn the first lifts", p: "Squat, hinge, push, row, carry. One cue at a time.", time: "5 min" },
  { n: "04", h: "resume after a miss", p: "Protect the habit by making the next session smaller, not harsher.", time: "4 min" },
];

function BStart() {
  return (
    <section id="start" className="fstart" data-screen-label="07 Start Here">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 05</div>
          <h2 className="title">If you are <span className="display italic" style={{color:"var(--accent)"}}>starting today.</span></h2>
          <div className="meta">Four short reads<br />in order</div>
        </div>
        <div className="fstart-grid">
          {B_START.map((s) => (
            <a key={s.n} className="fstart-tile" href="#library">
              <div className="s-num"><span>No. {s.n}</span><span className="arr">Read</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>Begin</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.BStart = BStart;

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