/* global React, IMAGES */

/* ============================================================
   LANES — Health + Fitness equal split
   ============================================================ */
const HEALTH_CATS = [
  { n: "01", name: "Body" },
  { n: "02", name: "Mind" },
  { n: "03", name: "Soul" },
  { n: "04", name: "Prevention" },
  { n: "05", name: "Care" },
  { n: "06", name: "Recovery" },
];
const FITNESS_CATS = [
  { n: "01", name: "Train" },
  { n: "02", name: "Move" },
  { n: "03", name: "Fuel" },
  { n: "04", name: "Diet" },
  { n: "05", name: "Build" },
  { n: "06", name: "Recover" },
];

function Lanes() {
  const lbl = { a: "Health", b: "Fitness" };
  return (
    <section id="lanes" className="section" data-screen-label="03 Lanes">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Two lanes, <span className="display italic" style={{ color: "var(--accent)" }}>one handbook.</span></h2>
          <div className="meta">Equal weight<br/>—different rhythms</div>
        </div>
        <div className="lanes">
          <div className="lane-card health">
            <div className="lane-num">01</div>
            <div className="lane-eyebrow"><span className="dot" /><span>Lane 01 — {lbl.a}</span></div>
            <h3 className="lane-title">For your <span className="it">whole self.</span></h3>
            <p className="lane-lede">Sleep, breath, mood, the long view. Habits that compound, not hacks. Six ways in — pick where you are today.</p>
            <div className="lane-cats">
              {HEALTH_CATS.map((c) => (
                <a key={c.n} className="lane-cat" href="/en/health/#six">
                  <span className="cat-num">{c.n}</span>
                  <span className="cat-name">{c.name}</span>
                </a>
              ))}
            </div>
            <a className="lane-cta" href="/en/health/">Open the {lbl.a} lane <span className="arr">→</span></a>
          </div>
          <div className="lane-card fitness">
            <div className="lane-num">02</div>
            <div className="lane-eyebrow"><span className="dot" /><span>Lane 02 — {lbl.b}</span></div>
            <h3 className="lane-title">For the <span className="it">work itself.</span></h3>
            <p className="lane-lede">Programming, mobility, fuel, recovery. General principles, not personal prescriptions. The basics, done well, for years.</p>
            <div className="lane-cats">
              {FITNESS_CATS.map((c) => (
                <a key={c.n} className="lane-cat" href="/en/fitness/#fsix">
                  <span className="cat-num">{c.n}</span>
                  <span className="cat-name">{c.name}</span>
                </a>
              ))}
            </div>
            <a className="lane-cta" href="/en/fitness/">Open the {lbl.b} lane <span className="arr">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Lanes = Lanes;

/* ============================================================
   EDITOR'S LETTER — JT's "Skinny Elephant" article
   ============================================================ */
function Letter() {
  const assetBase = window.HOWTO_ASSET_BASE || "";
  const [expanded, setExpanded] = React.useState(false);
  return (
    <section id="letter" className="letter" data-screen-label="02 Letter">
      <div className="frame">
        <div className="letter-inner">
          <div className="letter-head">
            <div className="letter-headshot">
              <img src={`${assetBase}assets/jt.png`} alt="JT, Founder of The How To Network" />
            </div>
            <div className="letter-byline-inline">
              <div className="eyebrow" style={{display:"flex",alignItems:"center",gap:8,marginBottom:6}}>
                <span style={{width:6,height:6,borderRadius:"50%",background:"var(--accent)",display:"inline-block"}}/>
                <span>Editor’s Letter — Issue 08</span>
              </div>
              By <strong>JT</strong> · Founder, The How To Network · Atlanta
            </div>
            <div className="letter-meta-inline">
              6 min read<br/>Filed 04.26.26
            </div>
          </div>

          <h2 className="letter-title">The <span className="it">(skinny)</span> elephant in the room.</h2>

          <div className={`letter-body ${expanded ? "expanded" : ""}`}>
            <p>
              <span style={{
                fontFamily: "var(--f-display)", fontStyle: "italic",
                fontSize: "5em", float: "left", lineHeight: 0.85,
                padding: "0.05em 0.12em 0 0", color: "var(--accent)"
              }}>I</span>f you’re going to build a How-To network, it probably makes sense to start with the number-one How-To search of all time. <em>We didn’t.</em>
            </p>
            <p>
              “How to lose weight” — and every variation of it — is the most-searched How-To on the internet. It’s not particularly close. Diet, workouts, macros, fasting, whatever angle you come at it from — it all points to the same question, and people are asking it constantly.
            </p>
            <p>
              So why is Health the eighth edition to launch instead of the first? Two reasons. First, I’m just not that smart. Second — and this one actually holds up — anything touching health, fitness, or the human body carries real liability. If we send you somewhere in Uruguay and you don’t have a good time, that’s on you. If we tell you five ways to clear your skin and something goes wrong, that’s a different conversation entirely.
            </p>
            <p>We’ve been cautious. <em>Intentionally.</em> But we’ve dodged it long enough, so here’s where we stand.</p>

            <p style={{
              fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.28em",
              textTransform: "uppercase", color: "var(--ink-mute)", margin: "32px 0 12px"
            }}>§ I — What we believe about weight loss.</p>
            <p>
              The consensus is pretty simple: burn more than you take in. Most doctors will tell you that. Most science will back it up. And most doctors will also tell you to talk to them before you do anything dramatic — so we’ll say the same thing here.
            </p>
            <p>
              Beyond that, it gets complicated fast. What works for one person doesn’t work for the next. Some people run and the weight drops. Some people just change what they eat and that’s enough. Some people do everything right and nothing moves. Some bodies can’t process carbs without it affecting everything. I’ve worked with someone who ate candy all day and was thin as paper. It just varies that much.
            </p>
            <p className="full-width" style={{
              fontFamily: "var(--f-display)", fontStyle: "italic",
              fontSize: "clamp(24px, 2.4vw, 34px)", lineHeight: 1.25,
              color: "var(--accent)", margin: "32px auto", maxWidth: "32ch"
            }}>There is no universal answer. Anyone telling you otherwise is selling something.</p>

            <p style={{
              fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.28em",
              textTransform: "uppercase", color: "var(--ink-mute)", margin: "32px 0 12px"
            }}>§ II — What this site is, and what it isn’t.</p>
            <p>
              HowTo: Health is meant to be useful. It’s meant to be interesting. It is <em>not</em> the final word on anything. It is not medical advice. It is not a substitute for your doctor, your nutritionist, or your own good judgment.
            </p>
            <p>
              Think of it the way you’d think of a conversation with someone who reads a lot and pays attention. Worth hearing. Worth considering. Not worth betting your health on without doing your own homework.
            </p>
            <p>
              We’ve tuned <em>Iris</em> — the AI that powers this site — tighter here than anywhere else in the network, with the possible exception of Beauty. If you’re searching for something and she’s telling you she can’t help with it, that’s not a glitch. <em>That’s a decision.</em> There are things we simply won’t publish because the risk isn’t worth it from our end, and more importantly, isn’t worth it from yours.
            </p>
            <p>
              Our only real goal here is that you walk away knowing something you didn’t know before — and that you’re around long enough to use it.
            </p>
            <p style={{ marginTop: 28 }}>
              Be well. Be safe. Live fully.
            </p>
          </div>
          <button className="letter-more" onClick={() => setExpanded(e => !e)}>
            {expanded ? "Collapse" : "See more"} →
          </button>
        </div>
      </div>
    </section>
  );
}
window.Letter = Letter;

/* ============================================================
   QUICK HOW-TO TILES
   ============================================================ */
const TILES = [
  { lane: "health",  q: "take a real rest day",         a: "Less guilt, more couch. The case for doing nothing on purpose." },
  { lane: "fitness", q: "warm up in five minutes",      a: "The short list that beats the long one — every time." },
  { lane: "health",  q: "fall asleep faster",           a: "What we’ve seen work. What we won’t pretend works for everyone." },
  { lane: "fitness", q: "start lifting at home",        a: "Two pieces of equipment. One short list of moves. No excuses." },
  { lane: "health",  q: "stretch at a desk",            a: "Six small movements you can do without standing up." },
  { lane: "fitness", q: "build a weekly routine",       a: "How to pick three days, stick to them, and let the rest go." },
  { lane: "health",  q: "drink enough water",           a: "A boring guide to a boring habit that quietly fixes a lot." },
  { lane: "fitness", q: "walk ten thousand steps",      a: "Without standing on a treadmill staring at the wall." },
];

function Tiles() {
  return (
    <section id="tiles" className="section section-rule" data-screen-label="04 Tiles">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title"><span className="display italic" style={{color:"var(--accent)"}}>Quick</span> answers.</h2>
          <div className="meta">Eight things you<br/>can read in five minutes</div>
        </div>
        <div className="tiles-grid">
          {TILES.map((t, i) => (
            <article key={i} className={`tile ${t.lane}`}>
              <div className="tile-lane">{t.lane === "health" ? "Health" : "Fitness"} · No. {String(i+1).padStart(2,"0")}</div>
              <h3 className="tile-q">How to <span className="it">{t.q}.</span></h3>
              <p className="tile-a">{t.a}</p>
              <div className="tile-foot">
                <span>3 min</span>
                <span className="arr">Read →</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Tiles = Tiles;

/* ============================================================
   PROGRAMMING — weekly schedule (mon-sun)
   ============================================================ */
const PROGRAM = [
  { day: "Mon", num: "27", lane: "fitness", title: "Pull day, easy.",        meta: "45 min · general strength · pulling patterns" },
  { day: "Tue", num: "28", lane: "health",  title: "Mobility, ten minutes.", meta: "10 min · hips, shoulders, ankles" },
  { day: "Wed", num: "29", lane: "fitness", title: "Easy zone-two run.",     meta: "30–40 min · conversational pace" },
  { day: "Thu", num: "30", lane: "health",  title: "Breath + walk.",         meta: "20 min walk · 4-7-8 breathing on the way back", today: true },
  { day: "Fri", num: "01", lane: "fitness", title: "Push day, sharp.",       meta: "45 min · pressing, low rep" },
  { day: "Sat", num: "02", lane: "fitness", title: "Long, slow effort.",     meta: "60+ min · whatever you enjoy outside" },
  { day: "Sun", num: "03", lane: "rest",    title: "Rest day. Mean it.",     meta: "Couch · book · long shower · early night" },
];

function Program() {
  return (
    <section id="program" className="section section-rule" data-screen-label="05 Program">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 03</div>
          <h2 className="title">This <span className="display italic" style={{color:"var(--accent)"}}>week</span> at a glance.</h2>
          <div className="meta">A general suggestion<br/>—not a prescription</div>
        </div>
        <div className="program">
          <div className="program-head">
            <h3>Week of <span className="it">April 27.</span></h3>
            <div className="pill-row">
              <span className="active">General fitness</span>
              <span>Beginner</span>
              <span>Endurance</span>
              <span>Strength</span>
            </div>
          </div>
          <div className="program-grid">
            {PROGRAM.map((d, i) => (
              <div key={i} className={`program-day ${d.lane === "rest" ? "rest" : ""} ${d.today ? "today" : ""}`}>
                <div className="day-name">{d.day}</div>
                <div className={`day-num ${d.today ? "today" : ""}`}>{d.num}</div>
                <div className="day-tag">{d.lane === "rest" ? "Rest" : d.lane === "health" ? "Health" : "Fitness"}</div>
                <h4 className="day-title">{d.title}</h4>
                <p className="day-meta">{d.meta}</p>
                <div className="day-foot">
                  <span>{d.today ? "Today" : ""}</span>
                  <span style={{color:"var(--accent)"}}>→</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Program = Program;

/* ============================================================
   TICKER
   ============================================================ */
function Ticker() {
  const items = [
    { lane: "health",  t: "How to fall asleep faster" },
    { lane: "fitness", t: "Warm-up in five minutes" },
    { lane: "health",  t: "Stretch when you’re stuck at a desk" },
    { lane: "fitness", t: "Pull day for beginners" },
    { lane: "health",  t: "Drink enough water without thinking" },
    { lane: "fitness", t: "Walk ten thousand steps without trying" },
    { lane: "health",  t: "Take a real rest day" },
    { lane: "fitness", t: "Eat enough protein, finally" },
  ];
  const repeated = [...items, ...items, ...items];
  return (
    <div className="ticker" data-screen-label="Ticker">
      <div className="ticker-track">
        {repeated.map((x, i) => (
          <span key={i} className="ticker-item">
            <span className={`lane-mark ${x.lane}`} />
            {x.t}
            <span className="dot" />
          </span>
        ))}
      </div>
    </div>
  );
}
window.Ticker = Ticker;