/* global React */

/* ============================================================
   Fitness.html — Layer-2 menu page components (dark mirror)
   ============================================================ */

const FIT_IMG = {
  // Hero (full-bleed): athletic, low-key, dark — strong silhouette
  hero: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=2400&q=80",
  // Sub-lane preview imagery
  train:   "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1400&q=80", // running / pulling
  move:    "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80", // mobility / yoga
  fuel:    "https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1400&q=80", // food
  diet:    "https://images.unsplash.com/photo-1498837167922-ddd27525d352?w=1400&q=80", // plate
  build:   "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?w=1400&q=80", // dumbbells
  recover: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1400&q=80", // stretch / rest

  feat1: "https://images.unsplash.com/photo-1574680096145-d05b474e2155?w=1600&q=80",   // barbell
  feat2: "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?w=1400&q=80",   // run
  feat3: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1400&q=80",   // recovery
};

/* ---------------- Breadcrumb ---------------- */
function FCrumb() {
  return (
    <div className="fcrumb">
      <div className="fcrumb-inner">
        <div className="fcrumb-trail">
          <a href="/en/">How To: Health &amp; Fitness</a>
          <span className="sep">/</span>
          <span className="here">Fitness</span>
        </div>
        <div>Lane 02 of 02 · Dark edition</div>
      </div>
    </div>
  );
}
window.FCrumb = FCrumb;

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

/* ---------------- Full-bleed Cinematic Hero ---------------- */
function FHero() {
  return (
    <section className="fhero" data-screen-label="01 Fitness Hero">
      <div className="bg" style={{ backgroundImage: `url(${FIT_IMG.hero})` }} />
      <div className="grain-grid" />
      <div className="frame">
        <div className="h-top">
          <div className="kicker"><span className="dot" />Lane 02 — Fitness · Vol. 08</div>
          <div className="h-spec">
            <strong>06</strong> sub-lanes<br/>
            <strong>206</strong> guides &amp; growing<br/>
            Updated weekly
          </div>
        </div>

        <div className="h-mid">
          <h1>
            How to <span className="it">build</span><br/>
            the body <span className="amp">&amp;</span><br/>
            <span className="it">habit</span> you want.
          </h1>
          <aside className="hero-aside">
            <div className="a-eye">From the Lane Editor</div>
            <p>
              “The basics, done well, for years. There’s no shortcut here — only the version of consistency that doesn’t make you hate your life.”
            </p>
            <div className="by">
              <span className="ava">J.</span>
              <span>By <strong>Jenna</strong> · Lane Editor, Fitness · Atlanta</span>
            </div>
          </aside>
        </div>

        <div className="h-bottom">
          <p className="lede">
            Six ways into the work itself — train, move, fuel, diet, build, recover. Programming and principles, plain-spoken. We share what holds up over years, not what trends this week. Not coaching. Not personal training. <span style={{opacity:0.7}}>Always check with a pro before changing what you do with your body.</span>
          </p>
          <div className="meta-row">
            <span>Cover · <strong>Atlanta</strong></span>
            <span className="sep">·</span>
            <span>April ’26</span>
            <span className="sep">·</span>
            <span><strong>General principles only.</strong></span>
          </div>
        </div>
      </div>
    </section>
  );
}
window.FHero = FHero;

/* ---------------- The Six (Fitness) ---------------- */
const FSIX = [
  {
    n: "01", slug: "train", name: "Train",
    dek: "Workouts, programming, strength, cardio. The structure of the thing — what to do on a Monday, what to do on a Thursday, and why three days will get you further than seven.",
    tags: "Workouts · Programming · Strength · Cardio",
    count: 48, time: "4–10 min reads",
    feat: { kicker: "Featured in Train", title: "How to build a week you can actually keep.", dek: "Three sessions, two priorities, one rule: don’t miss twice. Why this beats elaborate splits, every time.", time: "7 min read", img: "train" },
  },
  {
    n: "02", slug: "move", name: "Move",
    dek: "Yoga, mobility, flexibility, low-impact. The work that keeps you doing the other work — joints, range, posture. The least glamorous half of the gym, the half you’ll need at fifty.",
    tags: "Yoga · Mobility · Flexibility · Low-impact",
    count: 33, time: "3–8 min reads",
    feat: { kicker: "Featured in Move", title: "How to find ten honest minutes of mobility.", dek: "Five movements, one mat, no app. The shortlist that beats the long list — every single morning.", time: "5 min read", img: "move" },
  },
  {
    n: "03", slug: "fuel", name: "Fuel",
    dek: "Performance nutrition, supplements, hydration. What you eat and drink to do the work — not what you eat and drink to look a certain way. Two different conversations.",
    tags: "Performance nutrition · Supplements · Hydration",
    count: 29, time: "5–10 min reads",
    feat: { kicker: "Featured in Fuel", title: "How to drink enough water without thinking about it.", dek: "A boring guide to a boring habit that quietly fixes a lot. No bottles to buy, no app to track.", time: "4 min read", img: "fuel" },
  },
  {
    n: "04", slug: "diet", name: "Diet",
    dek: "Eating frameworks — keto, fasting, plant-based, and everything between. We won’t tell you which is right. We will tell you what each one is actually doing, in plain English.",
    tags: "Frameworks · Keto · Fasting · Plant-based",
    count: 34, time: "6–12 min reads",
    feat: { kicker: "Featured in Diet", title: "How to read a diet without losing the plot.", dek: "What every framework has in common — and what they all conveniently leave out of the marketing.", time: "9 min read", img: "diet" },
  },
  {
    n: "05", slug: "build", name: "Build",
    dek: "Muscle, body composition, physique goals. The honest version: it takes longer than the internet says, the basics matter more than the ‘advanced’ stuff, and consistency beats intensity.",
    tags: "Muscle · Body composition · Physique",
    count: 31, time: "5–12 min reads",
    feat: { kicker: "Featured in Build", 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", img: "build" },
  },
  {
    n: "06", slug: "recover", name: "Recover",
    dek: "Rest, sleep, foam rolling, injury prevention. The half of training that happens when you’re not training. Skip this and the rest of the work compounds against you.",
    tags: "Rest · Sleep · Foam rolling · Injury prevention",
    count: 31, time: "4–10 min reads",
    feat: { kicker: "Featured in Recover", title: "How to take a real rest day, on purpose.", dek: "Less guilt, more couch. Why the days you don’t train are quietly making you stronger.", time: "5 min read", img: "recover" },
  },
];

function FSix() {
  const [active, setActive] = React.useState(0);
  const cur = FSIX[active];
  return (
    <section id="fsix" className="fsix" data-screen-label="02 The Six (Fitness)">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Six ways <span className="display italic" style={{color:"var(--accent)"}}>into the work.</span></h2>
          <div className="meta">A plain table<br/>of contents</div>
        </div>
        <div className="fsix-grid">
          <div className="fsix-list">
            {FSIX.map((s, i) => (
              <a key={s.slug} href={s.slug === "train" ? "/en/fitness/train/" : `/en/fitness/${s.slug}/`} className="fsix-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="fsix-rail">
            <div className="r-eye">
              <span className="dot" />
              <span>{cur.feat.kicker}</span>
            </div>
            <div className="r-img">
              <img src={FIT_IMG[cur.feat.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.FSix = FSix;

/* ---------------- Principles (SEO meat) ---------------- */
const PRIN = [
  { n: "01", h: "Show up three days, not seven.", p: "Most plans fail because they’re too ambitious. Pick three sessions you can keep on a bad week — and let the good weeks be the bonus, not the baseline.", tag: "Principle · Programming" },
  { n: "02", h: "Compound moves first, fancy moves last.", p: "Squat, hinge, push, pull, carry. Most of what works for most people, most of the time. The interesting variations are mostly variations of these.", tag: "Principle · Movement" },
  { n: "03", h: "Eat enough protein. Eat enough food.", p: "The number-one nutrition mistake we see: under-eating in the name of leaning out, then wondering why nothing’s building. Protein is the lever — full stop.", tag: "Principle · Fuel" },
  { n: "04", h: "Sleep is the supplement.", p: "Nothing in a bottle outperforms eight hours, in any study we’ve read. Treat your sleep like training and you’ll need fewer of the other levers.", tag: "Principle · Recovery" },
  { n: "05", h: "Rest days are training days.", p: "The work compounds when you’re not in the gym, not when you’re in it. Train hard. Rest harder. Skip neither.", tag: "Principle · Recovery" },
  { n: "06", h: "Boring beats clever, every time.", p: "Six weeks of the same boring program will outperform six weeks of variety. Your body responds to consistency. Your ego responds to novelty. Pick one.", tag: "Principle · Mindset" },
];

function FPrinciples() {
  return (
    <section id="principles" className="fprin" data-screen-label="03 Principles">
      <div className="frame fprin-inner">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title">Six things we <span className="display italic" style={{color:"var(--accent)"}}>keep saying.</span></h2>
          <div className="meta">The general principles<br/>—if you read nothing else</div>
        </div>
        <div className="fprin-grid">
          {PRIN.map((p) => (
            <article key={p.n} className="fprin-cell">
              <div className="n">{p.n}</div>
              <h4>{p.h.split(" ").slice(0, 2).join(" ")} <span className="it">{p.h.split(" ").slice(2).join(" ")}</span></h4>
              <p>{p.p}</p>
              <div className="tag">{p.tag}</div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FPrinciples = FPrinciples;

/* ---------------- Featured guides ---------------- */
const FFEAT = [
  {
    img: "feat1", tag: "Train · Build",
    kicker: "The Long Read",
    h: "How to build a body that lasts longer than the program.",
    p: "We followed three lifters through a year of the same boring routine. None of them were optimizing. All of them were getting stronger. We asked them what they’d quit doing first if they had to — and what they’d die before quitting. The answers were less surprising than you’d think, and that was the whole point.",
    time: "11 min read · Filed 04.22.26",
    by: "By Jenna",
    lead: true,
  },
  {
    img: "feat2", tag: "Train · Move",
    kicker: "Field Notes",
    h: "Zone two, in plain English.",
    p: "What it is, what it isn’t, and why the runners we trust keep coming back to it.",
    time: "6 min read",
    by: "By Jenna",
  },
  {
    img: "feat3", tag: "Recover",
    kicker: "Practice",
    h: "Ten minutes of mobility, before the day starts.",
    p: "The shortest morning practice we’ve seen actually hold — for actual humans.",
    time: "5 min read",
    by: "By Jenna",
  },
];

function FFeatured() {
  return (
    <section id="ffeatured" 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">
          {FFEAT.map((f, i) => (
            <a key={i} className={`ffeat-card ${f.lead ? "lead" : ""}`} href="#">
              <div className="f-img">
                <img src={FIT_IMG[f.img]} alt="" />
                <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.FFeatured = FFeatured;

/* ---------------- Pull quote ---------------- */
function FPull() {
  return (
    <section className="fpull" data-screen-label="05 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">“</span>
        <blockquote>
          The basics, done <span className="it">well, for years.</span> Anyone selling you a shortcut is selling.
        </blockquote>
        <cite>From the Lane Editor — <a href="#fsix">Read the six</a></cite>
      </div>
    </section>
  );
}
window.FPull = FPull;

/* ---------------- Start here ---------------- */
const FSTART = [
  { n: "01", h: "warm up in five minutes", p: "The short list that beats the long one — every single time.", time: "4 min" },
  { n: "02", h: "start lifting at home", p: "Two pieces of equipment. One short list of moves. No excuses.", time: "5 min" },
  { n: "03", h: "build a weekly routine", p: "How to pick three days, stick to them, and let the rest go.", time: "5 min" },
  { n: "04", h: "walk ten thousand steps", p: "Without standing on a treadmill staring at the wall.", time: "4 min" },
];

function FStart() {
  return (
    <section id="fstart" 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">
          {FSTART.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.FStart = FStart;

/* ---------------- Contributors (quiet pair) ---------------- */
function FContribs() {
  const assetBase = window.HOWTO_ASSET_BASE || "";
  const pair = [
    {
      first: "Jenna", lane: "Lane Editor — Fitness", city: "Atlanta",
      role: "Strength, programming, and the case for boring consistency.",
      portrait: `${assetBase}assets/jenna.png`,
      tag: "Lane 02 — Fitness",
      href: "/en/fitness/",
    },
    {
      first: "Torrie", lane: "Lane Editor — Health", city: "Washington DC",
      role: "Sleep, breath, and the long view on a healthy life.",
      portrait: `${assetBase}assets/torrie.png`,
      tag: "Lane 01 — Health",
      href: "/en/health/",
    },
  ];
  return (
    <section id="fcontribs" className="fcontribs" data-screen-label="08 Contributors">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 05</div>
          <h2 className="title">The <span className="display italic" style={{color:"var(--accent)"}}>two voices</span> behind it.</h2>
          <div className="meta">Atlanta + DC<br/>—one shared standard</div>
        </div>
        <div className="fcontribs-grid">
          {pair.map((p) => (
            <a key={p.first} className="fcontribs-card" href={p.href}>
              <div className="portrait">
                {p.portrait
                  ? <img src={p.portrait} alt={p.first} />
                  : <div className="placeholder">{p.first}<br/>{p.city}</div>}
              </div>
              <div className="body">
                <div className="eye"><span className="dot" /><span>{p.tag}</span></div>
                <h3 className="name">{p.first}<span className="it">.</span></h3>
                <p className="role">{p.role}</p>
                <div className="meta">
                  <span>{p.lane}</span>
                  <span className="sep">·</span>
                  <span>{p.city}</span>
                </div>
                <span className="cta">Read profile <span className="arr">→</span></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FContribs = FContribs;

/* ---------------- Care note (training, not medical) ---------------- */
function FCareNote() {
  return (
    <section className="fcarenote" data-screen-label="07 Care Note">
      <div className="fcarenote-inner">
        <div className="label"><span className="dot" /><span>A note on training</span></div>
        <p>
          HowTo: Fitness is a <strong>magazine</strong>, not a <span className="it">coach</span>. Nothing here is personal training, physical therapy, or nutrition counseling. Programs are general principles — not prescriptions for your body. If you’re returning from an injury, in pain, or starting after a long break, talk to someone with credentials before you talk to us.
        </p>
      </div>
    </section>
  );
}
window.FCareNote = FCareNote;