/* global React */
const FUEL_IMG = {
protein: "https://images.unsplash.com/photo-1505253716362-afaea1d3d1af?w=2400&q=80",
"pre-workout": "https://images.unsplash.com/photo-1511690743698-d9d85f2fbf38?w=2400&q=80",
"post-workout": "https://images.unsplash.com/photo-1498837167922-ddd27525d352?w=2400&q=80",
hydration: "https://images.unsplash.com/photo-1548839140-29a749e1cf4d?w=2400&q=80",
electrolytes: "https://images.unsplash.com/photo-1523362628745-0c100150b504?w=2400&q=80",
supplements: "https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=2400&q=80",
caffeine: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=2400&q=80",
carbs: "https://images.unsplash.com/photo-1509440159596-0249088772ff?w=2400&q=80",
"meal-timing": "https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=2400&q=80",
};
const FUEL_L3 = {
protein: {
n: "01",
title: "Protein",
label: "Protein Shelf",
accent: "daily protein",
lede: "Daily targets, easy meals, snacks, powders, plant options, and the practical protein choices that help training without turning food into homework.",
meta: ["15 guides", "Meals", "Snacks", "Powders"],
quote: "Protein works best when it is ordinary enough to show up more than once.",
sections: [
["Start with the day", "Protein is easier to solve across breakfast, lunch, dinner, and snacks than in one dramatic meal."],
["Use simple defaults", "Eggs, yogurt, beans, fish, chicken, tofu, lentils, powders, and leftovers all belong on the same practical shelf."],
["Let timing be normal", "Training matters, but the daily total and repeatable meals usually matter more than chasing a perfect minute."],
],
map: {
name: "Protein shelf",
word: "SHELF",
title: "The protein shelf",
meta: "Meals, snacks\nand simple defaults",
rules: ["Breakfast", "Lunch", "Dinner", "Snack", "Powder"],
checks: [
["Count the day", "Look at the whole day before trying to fix one meal."],
["Choose the anchor", "Give each meal one reliable protein source so the rest of the plate has a job."],
["Keep a fallback", "A backup option helps when the training day gets crowded."],
],
cards: [
{ h: "Meal anchor", p: "A main protein source that makes the plate feel settled.", d: ["eggs", "tofu", "fish"] },
{ h: "Snack backup", p: "Small options that keep a late workout from turning into a scramble.", d: ["yogurt", "shake", "beans"] },
{ h: "Plant shelf", p: "Plant-forward options that still care about total protein.", d: ["lentils", "soy", "grains"] },
],
},
tabs: [
{ id: "daily", nm: "Daily", ct: 5 },
{ id: "meals", nm: "Meals", ct: 5 },
{ id: "options", nm: "Options", ct: 5 },
],
library: {
daily: [
["01", "How to know if you are eating enough protein.", "A practical look at meals, snacks, hunger, and recovery cues.", "Daily", "5 min"],
["02", "How to spread protein across the day.", "Breakfast, lunch, dinner, and snacks without turning it into math class.", "Timing", "4 min"],
["03", "How to build a high-protein breakfast.", "Simple morning anchors for training days and regular days.", "Breakfast", "4 min"],
["04", "How to add protein without eating more food than you want.", "Small swaps, portions, and add-ons that do not hijack the plate.", "Portion", "5 min"],
["05", "How to use protein after a workout.", "What matters after training and what can wait for dinner.", "After", "4 min"],
],
meals: [
["06", "How to build a protein-forward lunch.", "A simple plate that survives work, errands, and leftovers.", "Lunch", "4 min"],
["07", "How to make dinner support recovery.", "Protein, carbs, fluids, and a meal that helps tomorrow.", "Dinner", "5 min"],
["08", "How to choose high-protein snacks.", "Portable options that do not turn into a product shelf.", "Snack", "4 min"],
["09", "How to use leftovers for protein.", "Making yesterday's meal do today's training a favor.", "Leftovers", "3 min"],
["10", "How to plan protein for busy weeks.", "A few defaults that lower the number of food decisions.", "Plan", "5 min"],
],
options: [
["11", "How to choose a protein powder.", "Ingredients, serving size, testing marks, and when powder is just convenient.", "Powder", "6 min"],
["12", "How to get protein from plant foods.", "Beans, lentils, tofu, tempeh, grains, and practical combinations.", "Plant", "5 min"],
["13", "How to compare meat, fish, eggs, and dairy.", "Everyday choices without turning the page into a moral scoreboard.", "Foods", "5 min"],
["14", "How to read protein labels.", "Serving size, protein per serving, sugar, additives, and fine print.", "Label", "5 min"],
["15", "How to avoid overcomplicating protein.", "Enough useful structure without turning every meal into a project.", "Simple", "4 min"],
],
},
},
"pre-workout": {
n: "02",
title: "Pre-Workout",
label: "Before Training",
accent: "ready energy",
lede: "Food timing, simple carbs, light meals, caffeine questions, stomach comfort, and the choices that help a session start clean.",
meta: ["15 guides", "Timing", "Carbs", "Comfort"],
quote: "The best pre-workout is the one that lets you train without negotiating with your stomach.",
sections: [
["Start with comfort", "A useful pre-workout choice gives you energy without stealing attention from the session."],
["Match the clock", "A full meal, a small snack, or just water can all be right depending on the timing."],
["Keep the routine plain", "The less dramatic the ritual, the easier it is to repeat on normal days."],
],
map: {
name: "Timing sheet",
word: "BEFORE",
title: "The pre-workout sheet",
meta: "Clock, comfort\nand simple energy",
rules: ["3 hours", "90 min", "30 min", "Water", "Caffeine"],
checks: [
["Check the clock", "The closer the workout is, the simpler the food usually needs to be."],
["Choose easy fuel", "Carbs and familiar foods beat novelty when a session is coming soon."],
["Avoid stomach drama", "Grease, fiber, volume, and nerves all get a vote."],
],
cards: [
{ h: "Full meal", p: "A balanced plate when training is still a few hours away.", d: ["protein", "carbs", "fluid"] },
{ h: "Small snack", p: "A quick option when you need energy without fullness.", d: ["banana", "toast", "yogurt"] },
{ h: "Late session", p: "A light fallback for after-work training that starts tired.", d: ["simple", "portable", "familiar"] },
],
},
tabs: [
{ id: "timing", nm: "Timing", ct: 5 },
{ id: "foods", nm: "Foods", ct: 5 },
{ id: "comfort", nm: "Comfort", ct: 5 },
],
library: {
timing: [
["01", "How to eat before a workout.", "A plain timing guide for meals, snacks, and normal training days.", "Start", "5 min"],
["02", "How long to wait after eating before training.", "Meal size, intensity, nerves, and stomach comfort.", "Clock", "4 min"],
["03", "How to fuel an early morning workout.", "What to do when breakfast and training are too close together.", "Morning", "4 min"],
["04", "How to fuel an evening workout.", "A simple bridge between work, dinner, and training.", "Evening", "5 min"],
["05", "How to train when you missed a meal.", "Smaller options and when to lower the ambition.", "Missed meal", "4 min"],
],
foods: [
["06", "How to choose pre-workout carbs.", "Easy energy without turning the snack into a science project.", "Carbs", "4 min"],
["07", "How to build a light pre-workout meal.", "Protein, carbs, low drama, and enough time to digest.", "Meal", "5 min"],
["08", "How to choose a pre-workout snack.", "Portable options that work when the day gets tight.", "Snack", "4 min"],
["09", "How to use fruit before training.", "Bananas, apples, berries, dried fruit, and what each changes.", "Fruit", "4 min"],
["10", "How to use coffee before training.", "Caffeine timing without turning the workout into a buzz test.", "Coffee", "4 min"],
],
comfort: [
["11", "How to avoid stomach trouble during workouts.", "Volume, fiber, fat, nerves, and why familiar food wins.", "Comfort", "5 min"],
["12", "How to fuel before hard cardio.", "Intensity, timing, carbs, and when less food is smarter.", "Cardio", "5 min"],
["13", "How to fuel before lifting.", "Enough energy for effort without overbuilding the ritual.", "Lifting", "4 min"],
["14", "How to choose between food and a drink.", "When a bottle helps and when a snack makes more sense.", "Drink", "4 min"],
["15", "How to keep pre-workout simple.", "A few repeatable defaults for normal training weeks.", "Simple", "3 min"],
],
},
},
"post-workout": {
n: "03",
title: "Post-Workout",
label: "After Training",
accent: "recovery meal",
lede: "Protein, carbs, fluids, regular meals, late sessions, and the practical recovery choices that keep tomorrow from paying for today.",
meta: ["15 guides", "Recovery", "Meals", "Fluids"],
quote: "Recovery usually starts with a normal meal that actually happens.",
sections: [
["Eat like tomorrow matters", "Post-workout fuel is less about panic timing and more about helping the week continue."],
["Bring back the basics", "Protein, carbs, fluids, and salt cover more ground than most recovery products."],
["Fit the real schedule", "A late workout, a commute, or a family dinner changes the best answer."],
],
map: {
name: "Recovery plate",
word: "AFTER",
title: "The recovery plate",
meta: "Protein, carbs\nfluids and timing",
rules: ["Protein", "Carbs", "Fluid", "Salt", "Sleep"],
checks: [
["Refill the basics", "Start with food and fluids before making the plan more elaborate."],
["Match the session", "Long, hot, hard, and late sessions ask for more attention."],
["Do not chase panic", "The perfect recovery window matters less than eating enough across the day."],
],
cards: [
{ h: "Dinner recovery", p: "A normal meal that covers protein, carbs, and fluids.", d: ["plate", "water", "salt"] },
{ h: "Late workout", p: "A smaller after-training option when bedtime is close.", d: ["light", "familiar", "repeat"] },
{ h: "Hard day", p: "More attention for long, sweaty, or unusually intense sessions.", d: ["carbs", "fluid", "rest"] },
],
},
tabs: [
{ id: "meals", nm: "Meals", ct: 5 },
{ id: "recovery", nm: "Recovery", ct: 5 },
{ id: "timing", nm: "Timing", ct: 5 },
],
library: {
meals: [
["01", "How to eat after a workout.", "A practical recovery meal without a panic window.", "Start", "5 min"],
["02", "How to build a post-workout plate.", "Protein, carbs, vegetables, fluids, and enough salt.", "Plate", "5 min"],
["03", "How to recover with dinner.", "The normal meal that helps tomorrow feel possible.", "Dinner", "5 min"],
["04", "How to choose a post-workout snack.", "A bridge when the real meal is still a few hours away.", "Snack", "4 min"],
["05", "How to use a protein shake after training.", "Convenience, timing, and when a shake is just a tool.", "Shake", "4 min"],
],
recovery: [
["06", "How to replace fluids after a sweaty workout.", "Water, thirst, salt, and sessions that need more attention.", "Fluids", "5 min"],
["07", "How to use carbs after hard training.", "Refilling energy without making every meal a calculation.", "Carbs", "5 min"],
["08", "How to recover after evening workouts.", "Food, digestion, sleep, and a quieter end to the day.", "Evening", "5 min"],
["09", "How to eat after long cardio.", "Carbs, fluids, salt, and a meal that matches the session.", "Cardio", "5 min"],
["10", "How to eat after heavy lifting.", "Protein, carbs, appetite, and keeping recovery ordinary.", "Lifting", "4 min"],
],
timing: [
["11", "How soon to eat after training.", "What matters now, what can wait, and what depends on the day.", "Clock", "4 min"],
["12", "How to recover when you are not hungry.", "Small options that help until appetite catches up.", "Appetite", "4 min"],
["13", "How to handle missed post-workout meals.", "Resume the rhythm without turning one miss into a reset.", "Missed meal", "4 min"],
["14", "How to plan post-workout meals ahead.", "Defaults for the days you know will run late.", "Plan", "4 min"],
["15", "How to avoid overthinking recovery food.", "A few rules that keep the meal useful and boring enough to repeat.", "Simple", "3 min"],
],
},
},
};
Object.assign(FUEL_L3, {
hydration: makeFuelPage("04", "Hydration", "Fluid Label", "steady fluids", "Water, sweat, heat, long sessions, thirst cues, and simple hydration habits that help training without turning every sip into a metric.", ["Water", "Sweat", "Heat"], "HYDRATE", ["Water", "Sweat", "Heat", "Bottle", "Thirst"]),
electrolytes: makeFuelPage("05", "Electrolytes", "Sweat Sheet", "salt and sweat", "Salt, sweat rate, heat, long workouts, cramps, labels, and the situations where electrolytes deserve more attention.", ["Salt", "Sweat", "Heat"], "SALT", ["Sodium", "Sweat", "Heat", "Duration", "Label"]),
supplements: makeFuelPage("06", "Supplements", "Label Check", "read the shelf", "Label literacy, claims, serving sizes, testing marks, costs, questions, and the difference between useful support and product theater.", ["Labels", "Claims", "Testing"], "LABEL", ["Claim", "Dose", "Test", "Cost", "Ask"]),
caffeine: makeFuelPage("07", "Caffeine", "Caffeine Clock", "use the buzz", "Coffee, pre-workout caffeine, timing, tolerance, sleep, jitters, and how to use stimulation without letting it run the week.", ["Coffee", "Timing", "Sleep"], "CLOCK", ["Dose", "Clock", "Tolerance", "Sleep", "Jitters"]),
carbs: makeFuelPage("08", "Carbs", "Carb Shelf", "training energy", "Carbs before, during, and after training; simple foods, long sessions, energy dips, and why carbs are not a moral category.", ["Energy", "Meals", "Long sessions"], "CARBS", ["Fruit", "Grains", "Meals", "Long", "After"]),
"meal-timing": makeFuelPage("09", "Meal Timing", "Meal Clock", "food rhythm", "Meal spacing, training windows, late workouts, early sessions, snacks, and the food rhythm that makes training easier to keep.", ["Schedule", "Snacks", "Routine"], "TIMING", ["Morning", "Midday", "Evening", "Snack", "Dinner"]),
});
function makeFuelPage(n, title, label, accent, lede, metaRest, word, rules) {
const lower = title.toLowerCase();
const slug = lower.replace(/\s+/g, "-");
return {
n,
title,
label,
accent,
lede,
meta: ["15 guides", ...metaRest],
quote: `${title} gets easier when the useful choice is already on the shelf.`,
sections: [
["Keep the default simple", `A good ${lower} plan starts with repeatable choices before it starts adding rules.`],
["Read the situation", "Heat, timing, appetite, session length, sleep, and the rest of the day all change the best answer."],
["Stay practical", "The goal is not perfection. The goal is fewer decisions and better support for the next session."],
],
map: {
name: label,
word,
title: `The ${label.toLowerCase()}`,
meta: "Simple choices\nfor training days",
rules,
checks: [
["Start with context", "Look at the session, the clock, and the body in front of you."],
["Choose the simple option", "A familiar choice beats a complicated one that only works in theory."],
["Watch the tradeoff", "Energy, comfort, sleep, cost, and safety all matter."],
],
cards: [
{ h: "Training day", p: `The ${lower} choice that supports the session without taking over the day.`, d: ["before", "during", "after"] },
{ h: "Busy day", p: "A fallback that works when the schedule gets crowded.", d: ["portable", "familiar", "quick"] },
{ h: "Long day", p: "A little more attention when duration, heat, or effort climbs.", d: ["water", "food", "recovery"] },
],
},
tabs: [
{ id: "start", nm: "Start", ct: 5 },
{ id: "choices", nm: "Choices", ct: 5 },
{ id: "checks", nm: "Checks", ct: 5 },
],
library: makeFuelLibrary(title, slug),
};
}
function makeFuelLibrary(title, slug) {
const lower = title.toLowerCase();
return {
start: [
["01", `How to start with ${lower}.`, `A plain first pass at ${lower} for normal training weeks.`, "Start", "4 min"],
["02", `How to use ${lower} before training.`, "What matters before the session and what usually does not.", "Before", "4 min"],
["03", `How to use ${lower} after training.`, "A simple recovery-minded version for the hours after the work.", "After", "4 min"],
["04", `How to plan ${lower} for busy days.`, "A fallback that survives work, errands, and late sessions.", "Busy", "4 min"],
["05", `How to keep ${lower} simple.`, "A few defaults that lower the number of decisions.", "Simple", "3 min"],
],
choices: [
["06", `How to compare ${lower} options.`, "Labels, timing, cost, comfort, and the choice that actually fits.", "Compare", "5 min"],
["07", `How to use ${lower} with meals.`, "Where it belongs on the plate, in the bottle, or in the routine.", "Meals", "4 min"],
["08", `How to use ${lower} on long training days.`, "More duration usually asks for more attention.", "Long", "5 min"],
["09", `How to adjust ${lower} in hot weather.`, "Heat changes the assignment before motivation does.", "Heat", "4 min"],
["10", `How to pack ${lower} for later.`, "Portable choices for the days that do not happen at home.", "Pack", "4 min"],
],
checks: [
["11", `How to know if ${lower} is helping.`, "Energy, comfort, recovery, and the signs worth noticing.", "Check", "4 min"],
["12", `How to avoid overdoing ${lower}.`, "When the helpful thing starts creating a new problem.", "Restraint", "4 min"],
["13", `How to read labels for ${lower}.`, "Serving size, claims, fine print, and what to ignore.", "Label", "5 min"],
["14", `How to talk to a professional about ${lower}.`, "Questions for medication, medical conditions, pregnancy, or uncertainty.", "Ask", "5 min"],
["15", `How to make ${lower} repeatable.`, "The quiet default that keeps working after the first week.", "Repeat", "3 min"],
],
};
}
const fuelPageKey = window.FUEL_L3_PAGE || "protein";
const FUEL_PAGE = FUEL_L3[fuelPageKey] || FUEL_L3.protein;
const FUEL_BASE = `/en/fitness/fuel/${fuelPageKey}/`;
const FUEL_SLUG = (title) => window.howToArticleSlug(FUEL_BASE, title);
const useFuelArticles = window.useHubArticles || ((slugs) => ({
articles: slugs.map((slug) => ({ slug, status: "stub", title: null })),
}));
function fuelFallbackArticle(article, row) {
if (article && article.status === "published") return article;
return {
...(article || {}),
status: "stub",
title: row?.[1] || null,
meta_description: row?.[2] || "",
};
}
function FuelEmLast({ text }) {
const words = text.split(" ");
if (words.length < 2) return {text};
return {words.slice(0, -1).join(" ")} {words.slice(-1)};
}
function FuelL3Header() {
return (
);
}
window.FuelL3Header = FuelL3Header;
function FuelL3Crumb() {
return (