/* global React */

/* ============================================================
   fitness/fuel.html - Layer-2 Fitness sub-page
   Sub-cats: Pre-workout · Post-workout · Hydration · Supplements
   ============================================================ */

const FU_IMG = {
  hero: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=2400&q=80",
  protein: "https://images.unsplash.com/photo-1505253716362-afaea1d3d1af?w=1400&q=80",
  preworkout: "https://images.unsplash.com/photo-1511690743698-d9d85f2fbf38?w=1400&q=80",
  postworkout: "https://images.unsplash.com/photo-1505253716362-afaea1d3d1af?w=1400&q=80",
  hydration: "https://images.unsplash.com/photo-1548839140-29a749e1cf4d?w=1400&q=80",
  electrolytes: "https://images.unsplash.com/photo-1523362628745-0c100150b504?w=1400&q=80",
  supplements: "https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=1400&q=80",
  caffeine: "https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=1400&q=80",
  carbs: "https://images.unsplash.com/photo-1509440159596-0249088772ff?w=1400&q=80",
  mealtiming: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1498837167922-ddd27525d352?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1523901839036-a3030662f220?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?w=1400&q=80",
};

function FuCrumb() {
  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">Fuel</span>
        </div>
        <div>Lane 02 · Sub 03 of 06</div>
      </div>
    </div>
  );
}
window.FuCrumb = FuCrumb;

function FuHeader() {
  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.FuHeader = FuHeader;

function FuHero() {
  return (
    <section className="thero" data-screen-label="01 Fuel Hero">
      <div className="thero-bg" style={{ backgroundImage: `url(${FU_IMG.hero})` }} />
      <div className="thero-inner">
        <div>
          <div className="thero-eye">
            <span className="dot" />
            <span>Fitness · Sub-lane 03 - Fuel</span>
          </div>
          <h1>How to <span className="it">fuel</span> the work.</h1>
          <p className="lede">
            Protein, pre-workout food, post-workout meals, hydration, electrolytes, supplements, caffeine, carbs, and timing. The practical shelf for what goes in the body before training, after training, and on the days between.
          </p>
          <div className="meta-row">
            <span><strong>09</strong> sub-categories</span>
            <span className="sep">·</span>
            <span><strong>135</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>
            "Most people do not need a more complicated plan. They need enough food, enough water, and fewer decisions at 5 PM."
          </p>
          <div className="by">
            <span className="ava">J.</span>
            <span>By <strong>Jenna</strong> · Lane Editor, Fitness · Atlanta</span>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.FuHero = FuHero;

const FUEL_FOUR = [
  {
    n: "01", slug: "protein", img: "protein", name: "Protein",
    dek: "Daily targets, easy meals, snacks, powders, plant options, and practical protein choices that help training without turning food into homework.",
    tags: "Meals - Snacks - Powders - Plant options",
    count: 15, time: "4-6 min reads",
    feat: { kicker: "Featured in Protein", title: "How to know if you are eating enough protein.", dek: "A practical look at meals, snacks, hunger, and recovery cues.", time: "5 min read" },
  },
  {
    n: "02", slug: "pre-workout", img: "preworkout", name: "Pre-Workout",
    dek: "Food before training, without the ritual theater. Timing, comfort, simple carbs, light meals, and how to avoid starting flat.",
    tags: "Timing - Light meals - Carbs - Comfort",
    count: 15, time: "4-8 min reads",
    feat: { kicker: "Featured in Pre-Workout", title: "How to eat before a workout.", dek: "A plain timing guide for meals, snacks, and normal training days.", time: "5 min read" },
  },
  {
    n: "03", slug: "post-workout", img: "postworkout", name: "Post-Workout",
    dek: "Protein, carbs, regular meals, fluids, and the boring truth that recovery usually starts with eating like tomorrow matters.",
    tags: "Protein - Carbs - Meals - Fluids",
    count: 15, time: "4-9 min reads",
    feat: { kicker: "Featured in Post-Workout", title: "How to recover with dinner.", dek: "The normal meal that helps tomorrow feel possible.", time: "5 min read" },
  },
  {
    n: "04", slug: "hydration", img: "hydration", name: "Hydration",
    dek: "Water, sweat, salt, heat, long sessions, thirst cues, and simple habits that help training without tracking every sip.",
    tags: "Water - Sweat - Heat - Thirst",
    count: 15, time: "3-7 min reads",
    feat: { kicker: "Featured in Hydration", title: "How to start with hydration.", dek: "A plain first pass at hydration for normal training weeks.", time: "4 min read" },
  },
  {
    n: "05", slug: "electrolytes", img: "electrolytes", name: "Electrolytes",
    dek: "Salt, sweat rate, heat, long workouts, cramps, labels, and the situations where electrolytes deserve more attention.",
    tags: "Salt - Sweat - Heat - Labels",
    count: 15, time: "4-7 min reads",
    feat: { kicker: "Featured in Electrolytes", title: "How to start with electrolytes.", dek: "A plain first pass at electrolytes for normal training weeks.", time: "4 min read" },
  },
  {
    n: "06", slug: "supplements", img: "supplements", name: "Supplements",
    dek: "Label literacy, claims, serving sizes, testing marks, costs, and the difference between useful support and product theater.",
    tags: "Labels - Claims - Testing - Cost",
    count: 15, time: "5-10 min reads",
    feat: { kicker: "Featured in Supplements", title: "How to read labels for supplements.", dek: "Serving size, claims, fine print, and what to ignore.", time: "5 min read" },
  },
  {
    n: "07", slug: "caffeine", img: "caffeine", name: "Caffeine",
    dek: "Coffee, pre-workout caffeine, timing, tolerance, sleep, jitters, and using stimulation without letting it run the week.",
    tags: "Coffee - Timing - Sleep - Jitters",
    count: 15, time: "3-6 min reads",
    feat: { kicker: "Featured in Caffeine", title: "How to start with caffeine.", dek: "A plain first pass at caffeine for normal training weeks.", time: "4 min read" },
  },
  {
    n: "08", slug: "carbs", img: "carbs", name: "Carbs",
    dek: "Carbs before, during, and after training; simple foods, long sessions, energy dips, and why carbs are not a moral category.",
    tags: "Energy - Meals - Long sessions",
    count: 15, time: "4-7 min reads",
    feat: { kicker: "Featured in Carbs", title: "How to start with carbs.", dek: "A plain first pass at carbs for normal training weeks.", time: "4 min read" },
  },
  {
    n: "09", slug: "meal-timing", img: "mealtiming", name: "Meal Timing",
    dek: "Meal spacing, training windows, late workouts, early sessions, snacks, and the food rhythm that makes training easier to keep.",
    tags: "Schedule - Snacks - Routine",
    count: 15, time: "4-7 min reads",
    feat: { kicker: "Featured in Meal Timing", title: "How to start with meal timing.", dek: "A plain first pass at meal timing for normal training weeks.", time: "4 min read" },
  },
];
function FuFour() {
  const [active, setActive] = React.useState(0);
  const cur = FUEL_FOUR[active];
  return (
    <section id="four" className="tfour" data-screen-label="02 The Nine">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Nine shelves <span className="display italic" style={{color:"var(--accent)"}}>to fuel.</span></h2>
          <div className="meta">Timing, labels<br/>and repeatable defaults</div>
        </div>
        <div className="tfour-grid">
          <div className="tfour-list">
            {FUEL_FOUR.map((s, i) => (
              <a key={s.slug} href={`/en/fitness/fuel/${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={FU_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.FuFour = FuFour;

function FuPrinciples() {
  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 fuel.</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 - Food before optimization.</div>
          <p>
            Fuel is the part of fitness where people most quickly confuse precision with usefulness. A spreadsheet can be helpful. So can a shake, a bottle, a label, or a routine. But the base layer is still ordinary food, enough water, and a training week that does not rely on panic decisions. Before the clever stuff, we ask the boring question: did you give your body enough to do the job?
          </p>

          <div className="tedit-h">§ II - Timing is a comfort tool.</div>
          <p>
            Pre-workout food is not a personality test. It is mostly about showing up with enough energy and without a stomach that argues with you. Some people like a real meal a few hours out. Some people like something small closer to training. The useful answer is the one that lets you train consistently and feel normal afterward.
          </p>
          <p>
            Post-workout food gets overcomplicated for the same reason. Recovery is not a single magic window. It is the rhythm of eating enough across the day, then doing it again tomorrow.
          </p>

          <div className="tedit-pull">The best fuel plan is the one that still exists on a Tuesday.</div>

          <div className="tedit-h">§ III - Hydration is not a lifestyle brand.</div>
          <p>
            Water matters. Heat matters. Sweat matters. Long sessions matter. So does the fact that most people do not need to turn hydration into a full-time tracking job. We care about simple cues, context, and repeatable habits - especially when the weather, duration, or intensity changes the day.
          </p>

          <div className="tedit-h">§ IV - Supplements are a literacy topic first.</div>
          <p>
            We are not here to tell you what to take. We are here to help you read the shelf without getting played by it. Claims, serving sizes, testing marks, fine print, interactions, and cost all belong in the conversation. If you have a medical condition, take medication, are pregnant, or have any real uncertainty, the correct next step is a clinician, not a comment section.
          </p>

          <div className="tedit-h">§ V - Make fewer decisions.</div>
          <p>
            The real win is not the perfect meal. It is having a few dependable defaults: the breakfast that works, the bottle you refill, the snack that saves a late workout, the dinner that does not require a new identity. Fuel should make training easier to keep, not harder to begin.
          </p>
        </div>
      </div>
    </section>
  );
}
window.FuPrinciples = FuPrinciples;

const FU_FEAT = [
  {
    img: "feat1", tag: "Fuel · Meals",
    kicker: "The Long Read",
    h: "How to make food support training without tracking every crumb.",
    p: "The quiet architecture of useful fueling: repeatable meals, enough protein, enough carbs, enough water, and fewer heroic decisions when the day gets loud.",
    time: "9 min read · Filed 05.03.26",
    by: "By Jenna",
    lead: true,
  },
  {
    img: "feat2", tag: "Hydration",
    kicker: "Field Notes",
    h: "The bottle is not the habit.",
    p: "A plain look at water, sweat, heat, and why a normal cup still counts.",
    time: "4 min read",
    by: "By Jenna",
  },
  {
    img: "feat3", tag: "Supplements",
    kicker: "Practice",
    h: "Read the label before the promise.",
    p: "The five places we look before believing anything on the front of the tub.",
    time: "6 min read",
    by: "By Jenna",
  },
];

function FuFeatured() {
  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">
          {FU_FEAT.map((f, i) => (
            <a key={i} className={`ffeat-card ${f.lead ? "lead" : ""}`} href="#">
              <div className="f-img">
                <img src={FU_IMG[f.img]} alt={`${f.h} fuel 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.FuFeatured = FuFeatured;

function FuPull() {
  return (
    <section className="fpull" data-screen-label="05 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">"</span>
        <blockquote>
          Fuel is not about eating perfectly. It is about making the next session <span className="it">more possible.</span>
        </blockquote>
        <cite>From the Lane Editor - <a href="#four">Read the four</a></cite>
      </div>
    </section>
  );
}
window.FuPull = FuPull;

const FU_START = [
  { n: "01", h: "eat before a workout", p: "Simple timing that helps the session feel less chaotic.", time: "5 min" },
  { n: "02", h: "recover with dinner", p: "The meal after training does not need a rebrand.", time: "6 min" },
  { n: "03", h: "drink enough water", p: "A few cues that work without tracking your life.", time: "4 min" },
  { n: "04", h: "read a supplement label", p: "Claims, serving sizes, testing marks, and fine print.", time: "6 min" },
];

function FuStart() {
  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">
          {FU_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.FuStart = FuStart;

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