/* global React */

/* ============================================================
   fitness/workouts.html — Layer-4 SEO leaf hub
   Bylines: Jenna (Lane Editor) + Torrie (Contributor)
   ============================================================ */

const W_IMG = {
  hero:  "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=2400&q=80",
  top1:  "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?w=1600&q=80",
  top2:  "https://images.unsplash.com/photo-1574680096145-d05b474e2155?w=1200&q=80",
  top3:  "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1200&q=80",
  top4:  "https://images.unsplash.com/photo-1517344800994-80b20d62960e?w=1200&q=80",
  top5:  "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?w=1200&q=80",
};

const W_BASE = "/en/fitness/train/workouts/";
const W_SLUG = (title) => window.howToArticleSlug(W_BASE, title);
const useWArticles = window.useHubArticles;

function withWorkoutFallback(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 || "",
  };
}

/* ---------------- Header (Fitness active) ---------------- */
function WHeader() {
  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.WHeader = WHeader;

/* ---------------- Breadcrumb (4 levels) ---------------- */
function WCrumb() {
  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">Workouts</span>
        </div>
        <div>Lane 02 · Train · 01 of 04</div>
      </div>
    </div>
  );
}
window.WCrumb = WCrumb;

/* ---------------- Hero ---------------- */
function WHero() {
  const idx = [
    { n: "01", nm: "Top 5 How-Tos", ct: "Reader picks" },
    { n: "02", nm: "Primer", ct: "5 min read" },
    { n: "03", nm: "Full guide library", ct: "48 guides" },
    { n: "04", nm: "Meet the writers", ct: "Jenna · Torrie" },
    { n: "05", nm: "FAQ", ct: "10 questions" },
  ];
  return (
    <section className="whero" data-screen-label="01 Workouts Hero">
      <div className="whero-inner">
        <div>
          <div className="whero-eye">
            <span className="dot" />
            <span>Fitness · Train · Workouts</span>
          </div>
          <h1>How to <span className="it">do</span> the workout.</h1>
          <p className="lede">
            Pull days, push days, full-body sessions, conditioning, finishers. The actual <em>workouts</em> — not the philosophy. Forty-eight written how-to guides, indexed and honest, from two contributors who keep the same training week we recommend you keep.
          </p>
          <div className="meta-row">
            <span><strong>48</strong> guides</span>
            <span className="sep">·</span>
            <span><strong>5</strong> categories</span>
            <span className="sep">·</span>
            <span><strong>2</strong> contributors</span>
            <span className="sep">·</span>
            <span>Updated 04.18.26</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">● live</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.WHero = WHero;

/* ---------------- TOP 5 — the SEO money shot ---------------- */
const TOP5 = [
  {
    n: "01", lead: true,
    h: "How to do a pull day, easy.",
    p: "Forty-five minutes, five movements, one rule: leave a rep in the tank on every set. The exact session two of our contributors keep on their busiest weeks — written out, set by set, with the small decisions that usually go unsaid. If you read one workout guide on this site, read this one.",
    by: "Jenna", tag: "Pull · Beginner OK", time: "5 min read", reads: "62k reads",
  },
  {
    n: "02",
    h: "How to do a push day without wrecking your shoulders.",
    p: "The setup, the order, and the two cues that fix more shoulder grumbles than any program change.",
    by: "Torrie", tag: "Push · Intermediate", time: "6 min read",
  },
  {
    n: "03",
    h: "How to run a full-body session in 30 minutes.",
    p: "Three movements, three sets, no junk volume. The minimum effective dose for a busy week.",
    by: "Torrie", tag: "Full-body · All levels", time: "4 min read",
  },
  {
    n: "04",
    h: "How to add a conditioning finisher that actually finishes you.",
    p: "Eight minutes at the end of the session. The math on why short, hard, and intentional beats long and vague.",
    by: "Jenna", tag: "Conditioning · Intermediate", time: "5 min read",
  },
  {
    n: "05",
    h: "How to deload a week without losing a year.",
    p: "What to keep, what to cut, and the line between resting on purpose and just not training.",
    by: "Jenna", tag: "Recovery · All levels", time: "7 min read",
  },
];

function WTopFiveLive() {
  const slugs = React.useMemo(() => TOP5.map((t) => W_SLUG(t.h)), []);
  const { articles } = useWArticles(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)"}}>most-read</span> how-tos.</h2>
          <div className="meta">By honest reads,<br/>not vanity hits</div>
        </div>
        <div className="wtop-grid">
          {articles.map((article, i) => (
            <FitnessArticleCard
              key={article.slug}
              article={withWorkoutFallback(article, TOP5[i])}
              rank={TOP5[i].n}
              tag={TOP5[i].tag}
              time={TOP5[i].time}
              lead={Boolean(TOP5[i].lead)}
              variant="top"
            />
          ))}
        </div>
      </div>
    </section>
  );
}
window.WTopFive = WTopFiveLive;

/* ---------------- Primer (SEO body) ---------------- */
function WPrimer() {
  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 workouts.</h2>
          <div className="meta">If you read nothing<br/>else on this page</div>
        </div>
        <div className="wprimer-body">
          <div className="wprimer-h first">§ I — What a workout is, plainly.</div>
          <p>
            A workout is a session, not a religion. Sixty minutes, give or take, in which you pick up something heavy, move your body in a few different directions, get your heart rate up, and then go back to the rest of your life. Every framework you’ve read about — splits, push/pull/legs, upper/lower, full-body — is just a way of organizing what you do <em>across</em> sessions. The session itself is simpler than people make it.
          </p>

          <div className="wprimer-h">§ II — The two questions to ask first.</div>
          <p>
            Before any program, ask: how many days a week can I honestly train? And: which of those days are real, and which are aspirational? A real day is one you’d still do if your kid was sick or your boss was a nightmare. An aspirational day is one you do when life is cooperating. Build for the real days. The aspirational days are bonuses, not the plan.
          </p>

          <div className="wprimer-h">§ III — The five session types we publish here.</div>
          <p>
            <em>Pull</em> sessions train the back of the body — rows, pulldowns, hinges. <em>Push</em> trains the front — presses, dips, push-ups. <em>Full-body</em> sessions hit a little of everything in 30–45 minutes; they’re what to do when life is loud. <em>Conditioning</em> raises your heart rate on purpose. <em>Finishers</em> are the eight minutes you bolt to the end of a strength session when you have eight minutes left and want to feel like you earned the shower.
          </p>

          <div className="wprimer-h">§ IV — How to use the library below.</div>
          <p>
            The forty-eight guides on this page are organized by session type. Pick the type you’re short on this week. Read one guide. Try it. Come back. Almost everything on the internet about training is overcomplicated; we try, sometimes successfully, not to be.
          </p>
        </div>
      </div>
    </section>
  );
}
window.WPrimer = WPrimer;

/* ---------------- LIBRARY — 5 tabs, ~10 guides each ---------------- */
const LIB = {
  pull: [
    { n: "01", h: "How to do a 45-minute pull day, easy.", d: "The default session. Five movements. Beginner-safe.", by: "Jenna", tag: "Beginner", t: "5 min", featured: true },
    { n: "02", h: "How to row without rounding your back.", d: "Three setup cues that survive heavy weight.", by: "Torrie", tag: "Form", t: "4 min" },
    { n: "03", h: "How to do your first pull-up.", d: "The three-step ladder that worked for our test group of forty-six.", by: "Torrie", tag: "Skill", t: "8 min" },
    { n: "04", h: "How to do a heavy pull day without leaving wrecked.", d: "Set caps, rest rules, and the lift order that makes the difference.", by: "Jenna", tag: "Intermediate", t: "6 min" },
    { n: "05", h: "How to add face-pulls without it feeling like homework.", d: "Two minutes a session. The shoulder insurance you’ll wish you’d started earlier.", by: "Jenna", tag: "Accessory", t: "3 min" },
    { n: "06", h: "How to swap pull-ups when you don’t have a bar.", d: "Ring rows, banded pulldowns, and one bodyweight option that nobody likes.", by: "Torrie", tag: "Substitution", t: "5 min" },
    { n: "07", h: "How to program two pull days in one week.", d: "Hard day, easy day. The pattern almost every lifter we trust uses.", by: "Jenna", tag: "Programming", t: "7 min" },
    { n: "08", h: "How to fix a stalled deadlift by not deadlifting.", d: "What we learned from a year of accessory-only deadlift work.", by: "Torrie", tag: "Long read", t: "11 min" },
    { n: "09", h: "How to warm up for a heavy pull in five minutes.", d: "The short list that beats the long one — every single time.", by: "Jenna", tag: "Warm-up", t: "4 min" },
    { n: "10", h: "How to hold a hook grip without crying.", d: "Three weeks to a grip that survives a heavy day.", by: "Torrie", tag: "Skill", t: "5 min" },
  ],
  push: [
    { n: "01", h: "How to bench without wrecking your shoulders.", d: "The setup, the order, the two cues that fix more grumbles than any program change.", by: "Torrie", tag: "Form", t: "6 min", featured: true },
    { n: "02", h: "How to run a 40-minute push session.", d: "Four movements, three working sets, one finisher. Done by 7:00.", by: "Jenna", tag: "Beginner", t: "5 min" },
    { n: "03", h: "How to overhead press without arching like a banana.", d: "Bracing rules from a strength coach who hates the word ‘core’.", by: "Torrie", tag: "Form", t: "5 min" },
    { n: "04", h: "How to do dips when you have wrist issues.", d: "Three substitutions, one warm-up, and the angle that fixes it for most people.", by: "Jenna", tag: "Substitution", t: "4 min" },
    { n: "05", h: "How to do twenty good push-ups.", d: "An honest twelve-week ladder, with photos of every checkpoint.", by: "Torrie", tag: "Skill", t: "9 min" },
    { n: "06", h: "How to add tricep work that doesn’t feel like filler.", d: "Two movements that earn their place; three that don’t.", by: "Jenna", tag: "Accessory", t: "4 min" },
    { n: "07", h: "How to bench at home without a power rack.", d: "Two safer setups, one we’d skip, and what to do when you fail a rep alone.", by: "Torrie", tag: "Home", t: "6 min" },
    { n: "08", h: "How to warm up for a heavy press in five minutes.", d: "Same logic as pull-day warm-ups, different muscles.", by: "Jenna", tag: "Warm-up", t: "4 min" },
    { n: "09", h: "How to recover between heavy press days.", d: "Sleep, walks, and one ego-bruising rule about Tuesday volume.", by: "Torrie", tag: "Recovery", t: "5 min" },
    { n: "10", h: "How to break a press plateau without changing the program.", d: "What we changed first — and what we shouldn’t have.", by: "Jenna", tag: "Long read", t: "10 min" },
  ],
  fullbody: [
    { n: "01", h: "How to run a 30-minute full-body session.", d: "Three movements, three sets, no junk volume. The minimum effective dose.", by: "Torrie", tag: "Beginner", t: "4 min", featured: true },
    { n: "02", h: "How to do a full-body session at home with one kettlebell.", d: "The four movements that cover almost everything.", by: "Jenna", tag: "Home", t: "5 min" },
    { n: "03", h: "How to do a hotel gym workout that doesn’t feel like one.", d: "Twelve movements, no machines required, written for the dumbbell rack you’re going to find.", by: "Torrie", tag: "Travel", t: "6 min" },
    { n: "04", h: "How to keep training when you can only do three days a week.", d: "Why three full-body days beats six split days for most adults.", by: "Jenna", tag: "Programming", t: "7 min" },
    { n: "05", h: "How to do a full-body day after a long flight.", d: "Mobility first, intensity second. The session we keep on repeat for jet lag.", by: "Jenna", tag: "Recovery", t: "4 min" },
    { n: "06", h: "How to design your own full-body template.", d: "The five-slot framework that survives years of use.", by: "Torrie", tag: "Programming", t: "8 min" },
    { n: "07", h: "How to do a full-body session with a friend who’s newer than you.", d: "The honest answer is: you both deload. Here’s how.", by: "Jenna", tag: "Beginner", t: "5 min" },
    { n: "08", h: "How to warm up for a full-body day, fast.", d: "Three minutes. No excuses.", by: "Torrie", tag: "Warm-up", t: "3 min" },
    { n: "09", h: "How to swap movements when something hurts.", d: "The substitution table we keep on a sticky note above the rack.", by: "Jenna", tag: "Substitution", t: "5 min" },
    { n: "10", h: "How to know when a full-body week is enough.", d: "Bodyweight check, energy check, sleep check. The three signs we trust.", by: "Torrie", tag: "All levels", t: "4 min" },
  ],
  conditioning: [
    { n: "01", h: "How to add a conditioning finisher that actually finishes you.", d: "Eight minutes. Why short, hard, intentional beats long and vague.", by: "Jenna", tag: "Intermediate", t: "5 min", featured: true },
    { n: "02", h: "How to do zone two without an app, a watch, or a plan.", d: "Conversational pace, in plain English.", by: "Torrie", tag: "Beginner", t: "6 min" },
    { n: "03", h: "How to do a 12-minute interval session.", d: "The protocol we keep coming back to. Painful, but only briefly.", by: "Jenna", tag: "Advanced", t: "4 min" },
    { n: "04", h: "How to start running again after a year off.", d: "Eight weeks, run-walk, no shame. What our test group did, what we’d change.", by: "Torrie", tag: "Long read", t: "10 min" },
    { n: "05", h: "How to do conditioning in a hotel room.", d: "Three protocols. None of them are burpees, you’re welcome.", by: "Torrie", tag: "Travel", t: "4 min" },
    { n: "06", h: "How to row a 2k without wrecking your week.", d: "Pacing, breathing, and the strategy that beats going out hard.", by: "Jenna", tag: "Intermediate", t: "5 min" },
    { n: "07", h: "How to use cardio to recover, not punish.", d: "Easy days are training, too. The cadence we follow most weeks.", by: "Jenna", tag: "Recovery", t: "5 min" },
    { n: "08", h: "How to bike instead of run when your knees won’t.", d: "Substitution math, in calories and in heart-rate minutes.", by: "Torrie", tag: "Substitution", t: "4 min" },
    { n: "09", h: "How to know how hard zone two should feel.", d: "Three field tests. None of them require equipment.", by: "Jenna", tag: "Skill", t: "4 min" },
  ],
  finishers: [
    { n: "01", h: "How to finish a strength session in eight minutes.", d: "The default finisher. Two movements, four rounds, one ego.", by: "Torrie", tag: "All levels", t: "4 min", featured: true },
    { n: "02", h: "How to add a sled finisher without owning a sled.", d: "Three sled-substitute movements, in order of how much we like them.", by: "Jenna", tag: "Substitution", t: "4 min" },
    { n: "03", h: "How to finish leg day without ruining tomorrow.", d: "The line between productive smoked and recovery debt.", by: "Torrie", tag: "Programming", t: "5 min" },
    { n: "04", h: "How to do a kettlebell finisher in ten minutes.", d: "Three swings, two cleans, one rule.", by: "Jenna", tag: "Home", t: "4 min" },
    { n: "05", h: "How to finish push day without trashing your shoulders.", d: "Two finishers we trust; one we used to recommend, no longer.", by: "Torrie", tag: "Form", t: "4 min" },
    { n: "06", h: "How to know when a finisher is too much.", d: "If you can’t talk after, you went too hard. Other field tests inside.", by: "Jenna", tag: "All levels", t: "4 min" },
    { n: "07", h: "How to design your own finisher template.", d: "Two pulls, two pushes, two carries. Pick.", by: "Torrie", tag: "Programming", t: "5 min" },
    { n: "08", h: "How to finish a full-body day on tired legs.", d: "Upper-body only, on purpose. The one rule we keep breaking and shouldn’t.", by: "Jenna", tag: "Recovery", t: "4 min" },
    { n: "09", h: "How to use a finisher as the whole workout.", d: "What twenty minutes of intent gets you when life takes the rest of the hour.", by: "Torrie", tag: "Travel", t: "5 min" },
  ],
};

const LIB_TABS = [
  { id: "pull", nm: "Pull", ct: 10 },
  { id: "push", nm: "Push", ct: 10 },
  { id: "fullbody", nm: "Full-Body", ct: 10 },
  { id: "conditioning", nm: "Conditioning", ct: 9 },
  { id: "finishers", nm: "Finishers", ct: 9 },
];

function WLibraryLive() {
  const [tab, setTab] = React.useState("pull");
  const rows = LIB[tab];
  const slugs = React.useMemo(() => rows.map((r) => W_SLUG(r.h)), [tab]);
  const { articles } = useWArticles(slugs);
  const total = LIB_TABS.reduce((a,b)=>a+b.ct, 0);
  return (
    <section id="library" className="wlib" data-screen-label="04 Library">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 03</div>
          <h2 className="title">The full <span className="display italic" style={{color:"var(--accent)"}}>library.</span></h2>
          <div className="meta">{total} guides<br/>indexed by type</div>
        </div>
        <div className="wlib-tabs" role="tablist">
          {LIB_TABS.map((t) => (
            <button
              key={t.id}
              className={`wlib-tab ${tab === t.id ? "active" : ""}`}
              onClick={() => setTab(t.id)}>
              {t.nm}<span className="ct">{t.ct}</span>
            </button>
          ))}
        </div>
        <div className="wlib-list">
          {articles.map((article, i) => (
            <FitnessArticleCard
              key={article.slug}
              article={withWorkoutFallback(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>{LIB_TABS.find(t=>t.id===tab).nm}</strong></span>
          <span>Sorted by reads - Updated 04.18.26</span>
        </div>
      </div>
    </section>
  );
}
window.WLibrary = WLibraryLive;

/* ---------------- Bylines — Jenna + Torrie ---------------- */
function WBylines() {
  return (
    <section id="bylines" className="wby" data-screen-label="05 Bylines">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 04</div>
          <h2 className="title">The two <span className="display italic" style={{color:"var(--accent)"}}>writers</span> on this page.</h2>
          <div className="meta">Jenna and Torrie<br/>split the work</div>
        </div>
        <div className="wby-grid">
          <div className="wby-card">
            <div className="ava">J.</div>
            <div className="body">
              <div className="role">Lane Editor · Fitness</div>
              <h4>Jenna<span className="it">.</span></h4>
              <p>
                Edits the Fitness lane. Strength-leaning generalist. Writes most of the pull-day, programming, and recovery guides, and edits everything else on this page. Lifts at home, runs in the morning, refuses to wear a heart-rate monitor.
              </p>
              <div className="by-stats">
                <span><strong>26</strong> guides</span>
                <span className="sep">·</span>
                <span><strong>Atlanta</strong></span>
                <span className="sep">·</span>
                <span>Joined Edition 03</span>
              </div>
            </div>
          </div>
          <div className="wby-card">
            <div className="ava">T.</div>
            <div className="body">
              <div className="role">Contributor · Fitness</div>
              <h4>Torrie<span className="it">.</span></h4>
              <p>
                Contributing writer. Former strength coach, now a writer who still coaches a couple of friends. Owns the push-day, full-body, and finisher guides, and most of the substitution tables on the site. Prefers coffee black, sessions short.
              </p>
              <div className="by-stats">
                <span><strong>22</strong> guides</span>
                <span className="sep">·</span>
                <span><strong>Brooklyn</strong></span>
                <span className="sep">·</span>
                <span>Joined Edition 06</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.WBylines = WBylines;

/* ---------------- FAQ — schema-friendly ---------------- */
const FAQ = [
  { q: "How long should a workout actually be?", a: "Long enough to get the work done; short enough that you’ll still do it on a bad week. For most adults that’s 35–55 minutes, three to four times a week. Anything past 75 minutes is usually a sign you’re resting too long, programming too much, or both." , by: "Jenna", time: "1 min answer" },
  { q: "Can I get strong with bodyweight only?", a: "To a real point, yes. After that point, you need either external load or a great deal of patience for harder unilateral variations. Most people we know who train at home eventually buy one barbell or one heavy kettlebell, and don’t regret it.", by: "Torrie", time: "1 min answer" },
  { q: "How many days a week should I train?", a: "Three is the floor we recommend almost everyone start at. Four is great if life cooperates. Five is rare. Six is rarer. The number that beats all of these is the number you actually keep for a year.", by: "Jenna", time: "1 min answer" },
  { q: "Should I do cardio on the same day as lifting?", a: "If you’ve got the time and energy, yes — lift first, condition second, finish with a five-minute walk. If you don’t, pick one. The order is non-negotiable; the doing of both is.", by: "Torrie", time: "1 min answer" },
  { q: "Do I need to warm up?", a: "Yes, but probably not for as long as you’ve been told. Five honest minutes — heart rate up, joints moving, one warm-up set per main lift — beats fifteen minutes of foam-rolling every time.", by: "Jenna", time: "1 min answer" },
  { q: "How do I know if I’m doing enough volume?", a: "If you can do the same session next week with slightly more weight or one more rep, you did about the right amount. If you can’t, you did too much.", by: "Torrie", time: "1 min answer" },
  { q: "Can beginners do split routines?", a: "They can; it’s just that full-body sessions tend to teach more, faster, with less risk. We recommend most beginners spend their first six months doing full-body three times a week before splitting.", by: "Jenna", time: "1 min answer" },
  { q: "How long until I see results?", a: "Strength: about three weeks. Endurance: about six. Visible body composition change: three to six months, depending on diet and starting point. Anyone selling you a faster timeline is selling you a faster timeline.", by: "Torrie", time: "1 min answer" },
  { q: "Is it okay to skip leg day?", a: "Once in a while, sure. As a habit, no — and not because the internet says so. Lower-body work is the highest-leverage thing most adults can do for long-term function. Skip it once. Don’t skip it twice.", by: "Jenna", time: "1 min answer" },
  { q: "Should I lift to failure?", a: "Almost never on compound lifts. Sometimes on isolation work, at the end of the session, on the last set. The cost-to-benefit math on training to failure is much worse than the internet would have you believe.", by: "Torrie", time: "1 min answer" },
];

function WFAQ() {
  return (
    <section id="faq" className="wfaq" data-screen-label="06 FAQ">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 05</div>
          <h2 className="title">Ten <span className="display italic" style={{color:"var(--accent)"}}>questions</span> readers ask.</h2>
          <div className="meta">Short answers,<br/>no qualifiers</div>
        </div>
        <div className="wfaq-list">
          {FAQ.map((f, i) => (
            <div key={i} 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> &nbsp;·&nbsp; {f.time}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WFAQ = WFAQ;

/* ---------------- Pull quote ---------------- */
function WPull() {
  return (
    <section className="fpull" data-screen-label="07 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">“</span>
        <blockquote>
          The workout you can do <span className="it">on your worst week</span> is the one to build the year around.
        </blockquote>
        <cite>From Jenna &amp; Torrie — <a href="#top5">Read the top five</a></cite>
      </div>
    </section>
  );
}
window.WPull = WPull;

/* ---------------- Start here ---------------- */
const WSTART = [
  { n: "01", h: "do your first pull day", p: "Five movements, 45 minutes, no equipment you don’t already have.", time: "5 min" },
  { n: "02", h: "do a full-body day in 30 minutes", p: "Three movements, three sets, no junk. The minimum effective dose.", time: "4 min" },
  { n: "03", h: "warm up in five minutes", p: "The short list that beats the long one — every single time.", time: "4 min" },
  { n: "04", h: "add a finisher you’ll keep", p: "Eight minutes at the end of the session. The one we recommend most.", time: "4 min" },
];

function WStart() {
  return (
    <section id="start" className="fstart" data-screen-label="08 Start Here">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 06</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">
          {WSTART.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.WStart = WStart;

/* ---------------- Care note + Footer ---------------- */
function WFooter() {
  const SharedFooter = window.HowToFooter;
  return SharedFooter ? <SharedFooter screenLabel="10 Footer" /> : null;
}
window.WFooter = WFooter;