/* global React */

/* ============================================================
   fitness/diet.html - Layer-2 Fitness sub-page
   Sub-cats: Frameworks · Tracking · Plant-based · Fasting
   ============================================================ */

const D_IMG = {
  hero: "https://images.unsplash.com/photo-1498837167922-ddd27525d352?w=2400&q=80",
  frameworks: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1400&q=80",
  calories: "https://images.unsplash.com/photo-1556740758-90de374c12ad?w=1400&q=80",
  macros: "https://images.unsplash.com/photo-1498837167922-ddd27525d352?w=1400&q=80",
  mealplanning: "https://images.unsplash.com/photo-1543352634-873e17d2a088?w=1400&q=80",
  plantbased: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1400&q=80",
  fasting: "https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?w=1400&q=80",
  populardiettypes: "https://images.unsplash.com/photo-1466637574441-749b8f19452f?w=1400&q=80",

  feat1: "https://images.unsplash.com/photo-1543352634-873e17d2a088?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1466637574441-749b8f19452f?w=1400&q=80",
};

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

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

function DHero() {
  return (
    <section className="thero" data-screen-label="01 Diet Hero">
      <div className="thero-bg" style={{ backgroundImage: `url(${D_IMG.hero})` }} />
      <div className="thero-inner">
        <div>
          <div className="thero-eye">
            <span className="dot" />
            <span>Fitness · Sub-lane 04 - Diet</span>
          </div>
          <h1>How to <span className="it">read</span> a diet.</h1>
          <p className="lede">
            Frameworks, calories, macros, meal planning, plant-based eating, fasting, and popular diet types. We explain what a method is trying to do, what it tends to hide, and how to think before you adopt one.
          </p>
          <div className="meta-row">
            <span><strong>07</strong> sub-categories</span>
            <span className="sep">·</span>
            <span><strong>88</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>
            "Every diet is a tradeoff wearing a nicer outfit. Read the tradeoff before you buy the outfit."
          </p>
          <div className="by">
            <span className="ava">J.</span>
            <span>By <strong>Jenna</strong> · Lane Editor, Fitness · Atlanta</span>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.DHero = DHero;

const DIET_FOUR = [
  {
    n: "01", slug: "frameworks", img: "frameworks", name: "Frameworks",
    dek: "The map of the maps: why people choose eating rules, what those rules simplify, and what they tend to make harder.",
    tags: "Rules - Tradeoffs - Fit",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Frameworks", title: "How to read a diet without losing the plot.", dek: "What most frameworks share, what they simplify, and why the marketing is usually louder than the mechanism.", time: "9 min read" },
  },
  {
    n: "02", slug: "calories", img: "calories", name: "Calories",
    dek: "Energy balance without turning food into a courtroom. Numbers as context, not character judgment.",
    tags: "Energy - Portions - Context",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Calories", title: "How to understand calories without living inside the number.", dek: "A plain look at energy, estimates, and the parts of eating that numbers miss.", time: "7 min read" },
  },
  {
    n: "03", slug: "macros", img: "macros", name: "Macros",
    dek: "Protein, carbs, and fat as levers inside the plate before they become a tracking ritual.",
    tags: "Protein - Carbs - Fat",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Macros", title: "How to read macros without making every meal a puzzle.", dek: "What each lever changes, what it does not solve, and when to stop counting.", time: "7 min read" },
  },
  {
    n: "04", slug: "meal-planning", img: "mealplanning", name: "Meal Planning",
    dek: "Repeatable defaults, flexible backup plans, and eating that survives the actual week.",
    tags: "Defaults - Flexibility - Weeks",
    count: 12, time: "5-8 min reads",
    feat: { kicker: "Featured in Meal Planning", title: "How to plan meals without building a prison.", dek: "Anchors, fallbacks, leftovers, and enough room for real life.", time: "7 min read" },
  },
  {
    n: "05", slug: "plant-based", img: "plantbased", name: "Plant-Based",
    dek: "Vegetarian, vegan, mostly plants, and the practical questions: protein, planning, convenience, eating out, and keeping the food satisfying.",
    tags: "Plants - Protein - Practicality",
    count: 12, time: "5-9 min reads",
    feat: { kicker: "Featured in Plant-Based", title: "How to make plant-based eating easier to keep.", dek: "Protein, pantry defaults, restaurant decisions, and the quiet work of not making every meal a puzzle.", time: "8 min read" },
  },
  {
    n: "06", slug: "fasting", img: "fasting", name: "Fasting",
    dek: "Time-restricted eating, skipped breakfasts, late dinners, training windows, hunger, sleep, and the questions to ask before shrinking the eating day.",
    tags: "Time - Hunger - Caution",
    count: 12, time: "6-10 min reads",
    feat: { kicker: "Featured in Fasting", title: "How to think about fasting before you try it.", dek: "The appeal, the tradeoffs, the social friction, and the people who should ask a professional first.", time: "9 min read" },
  },
  {
    n: "07", slug: "popular-diet-types", img: "populardiettypes", name: "Popular Diet Types",
    dek: "High-protein, Mediterranean, keto, low-carb, paleo, whole-food, anti-inflammatory, and clean eating read through promises and costs.",
    tags: "Comparison - Labels - Tradeoffs",
    count: 16, time: "6-10 min reads",
    feat: { kicker: "Featured in Popular Diet Types", title: "How to compare diet types without joining a team.", dek: "A slower way to read labels, restrictions, social costs, and real-life fit.", time: "10 min read" },
  },
];

function DFour() {
  const [active, setActive] = React.useState(0);
  const cur = DIET_FOUR[active];
  return (
    <section id="four" className="tfour" data-screen-label="02 The Seven">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Seven chapters <span className="display italic" style={{color:"var(--accent)"}}>to read diets.</span></h2>
          <div className="meta">A plain book<br/>of tradeoffs</div>
        </div>
        <div className="tfour-grid">
          <div className="tfour-list">
            {DIET_FOUR.map((s, i) => (
              <a key={s.slug} href={`/en/fitness/diet/${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={D_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.DFour = DFour;

function DPrinciples() {
  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 diet.</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 - A framework is not a verdict.</div>
          <p>
            Diet is one of those words that makes people brace for judgment. We are not using it that way. Here, a diet is a framework: a set of rules, defaults, limits, or ideas about how eating should be organized. Some frameworks help. Some help for a while. Some mostly help the person selling the framework. Our job is not to crown a winner. Our job is to make the tradeoffs visible.
          </p>

          <div className="tedit-h">§ II - Every plan edits reality.</div>
          <p>
            Keto edits carbs. Fasting edits time. Plant-based eating edits food sources. Tracking edits attention. High-protein plans edit priority. None of that is automatically good or bad. The important question is what the edit costs you, what it gives you, and whether the exchange still works when life gets ordinary again.
          </p>
          <p>
            The trouble starts when a framework pretends its edit is the whole truth. Most diets work by making some decisions easier and others harder. That is not a scandal. It is the point.
          </p>

          <div className="tedit-pull">A diet is a set of tradeoffs. Read the tradeoffs.</div>

          <div className="tedit-h">§ III - Numbers can help, until they take over.</div>
          <p>
            Calories, macros, grams of protein, meal timing - numbers can make eating less mysterious. They can also become a way to outsource judgment to an app. We are interested in numbers as temporary tools: a flashlight, not a house.
          </p>

          <div className="tedit-h">§ IV - Some people should ask first.</div>
          <p>
            If you have a medical condition, take medication, have a history of disordered eating, are pregnant, are feeding a child, or feel anxiety around food rules, a diet framework is not something to casually copy from the internet. Ask a qualified professional first. That is not fine print. That is the actual point.
          </p>

          <div className="tedit-h">§ V - The keeper is usually boring.</div>
          <p>
            The version that lasts is usually less dramatic than the version that sells. More repeatable meals. More protein. More plants. Fewer decisions. A little planning. Less moral language. Enough flexibility to eat with other humans. Most of the good stuff looks like that.
          </p>
        </div>
      </div>
    </section>
  );
}
window.DPrinciples = DPrinciples;

const D_FEAT = [
  {
    img: "feat1", tag: "Diet · Frameworks",
    kicker: "The Long Read",
    h: "How to compare diets without turning food into a religion.",
    p: "Keto, fasting, plant-based, high-protein, clean eating. Different rules, similar promises, and a useful way to see what each one is really asking from your week.",
    time: "11 min read · Filed 05.03.26",
    by: "By Jenna",
    lead: true,
  },
  {
    img: "feat2", tag: "Tracking",
    kicker: "Field Notes",
    h: "The food log is a flashlight.",
    p: "Use the numbers to see the room. Do not move into the flashlight.",
    time: "6 min read",
    by: "By Jenna",
  },
  {
    img: "feat3", tag: "Plant-Based",
    kicker: "Practice",
    h: "Mostly plants, still enough protein.",
    p: "The practical middle between slogans and dinner.",
    time: "7 min read",
    by: "By Jenna",
  },
];

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

function DPull() {
  return (
    <section className="fpull" data-screen-label="05 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">"</span>
        <blockquote>
          Every diet makes something easier and something harder. The smart move is reading <span className="it">both sides.</span>
        </blockquote>
        <cite>From the Lane Editor - <a href="#four">Read the four</a></cite>
      </div>
    </section>
  );
}
window.DPull = DPull;

const D_START = [
  { n: "01", h: "read a diet framework", p: "What it changes, what it hides, and what it asks from your life.", time: "7 min" },
  { n: "02", h: "track food for a week", p: "Use the numbers as a flashlight, then put the flashlight down.", time: "6 min" },
  { n: "03", h: "make plant-based easier", p: "Protein, pantry defaults, restaurants, and normal dinners.", time: "7 min" },
  { n: "04", h: "think about fasting", p: "Appeal, tradeoffs, training windows, and who should ask first.", time: "8 min" },
];

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

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