/* global React */

/* ============================================================
   fitness/train.html - Layer-2 Train page
   Wide L3 index: routines, splits, form, tools, conditioning
   ============================================================ */

const T_IMG = {
  hero: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?w=2400&q=80",
  workouts: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=1400&q=80",
  beginner: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=1400&q=80",
  splits: "https://images.unsplash.com/photo-1517963879433-6ad2b056d712?w=1400&q=80",
  form: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1400&q=80",
  strength: "https://images.unsplash.com/photo-1574680096145-d05b474e2155?w=1400&q=80",
  dumbbells: "https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=1400&q=80",
  cardio: "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?w=1400&q=80",
  feat1: "https://images.unsplash.com/photo-1571902943202-507ec2618e8f?w=1600&q=80",
  feat2: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=1400&q=80",
  feat3: "https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=1400&q=80",
};

function TCrumb() {
  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">Train</span>
        </div>
        <div>Lane 02 - Sub 01 of 06</div>
      </div>
    </div>
  );
}
window.TCrumb = TCrumb;

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

function THero() {
  return (
    <section className="thero" data-screen-label="01 Train Hero">
      <div className="thero-bg" style={{ backgroundImage: `url(${T_IMG.hero})` }} />
      <div className="thero-inner">
        <div>
          <div className="thero-eye">
            <span className="dot" />
            <span>Fitness - Sub-lane 01 - Train</span>
          </div>
          <h1>How to <span className="it">train</span> on purpose.</h1>
          <p className="lede">
            Routines, splits, form, strength, tools, cardio. The place to decide what to do next, how to do it better, and what to stop overcomplicating.
          </p>
          <div className="meta-row">
            <span><strong>20</strong> training doors</span>
            <span className="sep">-</span>
            <span><strong>Grouped</strong> by question</span>
            <span className="sep">-</span>
            <span>More being edited</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>
            "Pick the door that matches today's question. The rest can wait."
          </p>
          <div className="by">
            <span className="ava">J.</span>
            <span>By <strong>Jenna</strong> - Lane Editor, Fitness - Atlanta</span>
          </div>
        </aside>
      </div>
    </section>
  );
}
window.THero = THero;

const TRAIN_GROUPS = [
  {
    eyebrow: "Start here",
    title: "Find the floor.",
    img: "beginner",
    dek: "The pages for people who need a durable beginning, not a perfect identity.",
    items: [
      { n: "01", slug: "beginner-training", name: "Beginner Training", built: true, dek: "First weeks, first gym days, first honest routine.", tags: "Start - Habits - Confidence", count: 36 },
      { n: "02", slug: "warm-ups", name: "Warm-Ups", dek: "Five useful minutes before the work starts.", tags: "Prep - Joints - Ramp sets", count: 10 },
      { n: "03", slug: "full-body-workouts", name: "Full-Body Workouts", dek: "Three days a week, most of the body, no fantasy schedule.", tags: "3-day - Efficient - Beginner", count: 18 },
      { n: "04", slug: "strength-training", name: "Strength Training", built: true, dek: "The broad strength shelf: effort, progression, rest, patience.", tags: "Strength - Progression - Basics", count: 20 },
    ],
  },
  {
    eyebrow: "Build the week",
    title: "Pick the shape.",
    img: "splits",
    dek: "How training days stack together: splits, sessions, body-part days, and the weekly math.",
    items: [
      { n: "05", slug: "workout-splits", name: "Workout Splits", built: true, dek: "Full body, upper/lower, push/pull/legs, body-part splits.", tags: "PPL - Upper lower - 3-day", count: 18 },
      { n: "06", slug: "workouts", name: "Workouts", built: true, dek: "Specific sessions you can do today.", tags: "Pull - Push - Full-body", count: 48 },
      { n: "07", slug: "push-workouts", name: "Push Workouts", dek: "Chest, shoulders, triceps, pressing days.", tags: "Press - Chest - Shoulders", count: 14 },
      { n: "08", slug: "pull-workouts", name: "Pull Workouts", dek: "Rows, pull-ups, hinges, back days.", tags: "Rows - Back - Pull-ups", count: 14 },
      { n: "09", slug: "leg-workouts", name: "Leg Workouts", dek: "Squats, hinges, single-leg work, calves, carries.", tags: "Squat - Hinge - Legs", count: 16 },
    ],
  },
  {
    eyebrow: "Learn the lifts",
    title: "Make reps cleaner.",
    img: "form",
    dek: "The form and barbell shelf. Broad form first; specific lifts get their own pages when the subject is big enough.",
    items: [
      { n: "10", slug: "exercise-form", name: "Exercise Form", built: true, dek: "The big technique library: setup, tempo, range, substitutions.", tags: "Technique - Cues - Mistakes", count: 24 },
      { n: "11", slug: "squat", name: "Squat", dek: "Back squat, goblet squat, depth, stance, bracing.", tags: "Squat - Depth - Bracing", count: 12 },
      { n: "12", slug: "deadlift", name: "Deadlift", dek: "Hinge mechanics, setup, grip, bar path, safer progress.", tags: "Hinge - Grip - Bar path", count: 12 },
      { n: "13", slug: "bench-press", name: "Bench Press", dek: "Setup, shoulder position, grip, spotters, progress.", tags: "Bench - Press - Setup", count: 10 },
      { n: "14", slug: "pull-ups", name: "Pull-Ups", dek: "First reps, negatives, bands, volume, stronger pulls.", tags: "Pull-up - Bands - Negatives", count: 11 },
    ],
  },
  {
    eyebrow: "Choose the tool",
    title: "Use what you have.",
    img: "dumbbells",
    dek: "Equipment pages for the way people actually search: one pair of dumbbells, one kettlebell, no gym.",
    items: [
      { n: "15", slug: "dumbbell-workouts", name: "Dumbbell Workouts", built: true, dek: "Home sessions, hotel gyms, pairs, singles, substitutions.", tags: "Dumbbells - Home - Hotel", count: 18 },
      { n: "16", slug: "kettlebell-workouts", name: "Kettlebell Workouts", dek: "Swings, goblets, carries, complexes, short sessions.", tags: "Kettlebell - Carries - Swings", count: 12 },
      { n: "17", slug: "no-equipment-workouts", name: "No-Equipment Workouts", dek: "Bodyweight training that does not pretend furniture is a gym.", tags: "Bodyweight - Travel - Home", count: 14 },
    ],
  },
  {
    eyebrow: "Conditioning",
    title: "Move the engine.",
    img: "cardio",
    dek: "Cardio stays inside Train because people search it as training: pace, intervals, running, effort.",
    items: [
      { n: "18", slug: "cardio", name: "Cardio", built: true, dek: "The big conditioning shelf: easy, hard, machines, field tests.", tags: "Zone two - Intervals - Machines", count: 42 },
      { n: "19", slug: "running", name: "Running", built: true, dek: "Start running, keep running, pace without making it a personality.", tags: "Beginner - 5K - Pace", count: 28 },
      { n: "20", slug: "hiit", name: "HIIT", dek: "Intervals, finishers, short hard sessions, and when to skip them.", tags: "Intervals - Finishers - Effort", count: 10 },
    ],
  },
];

function TFour() {
  const [active, setActive] = React.useState(TRAIN_GROUPS[0]);
  return (
    <section id="four" className="tfour twide" data-screen-label="02 Wide Train Index">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">Twenty doors into <span className="display italic" style={{color:"var(--accent)"}}>training.</span></h2>
          <div className="meta">Grouped by the<br/>question you came with</div>
        </div>

        <div className="twide-layout">
          <div className="twide-copy">
            <p>
              Most people arrive with a practical question: leg day, dumbbells, push/pull/legs, how to squat, how to start running, whether HIIT is too much. Start with the question you actually have.
            </p>
            <p>
              If you are new, start small. If you are stuck, pick the constraint. If you are already training, choose the shelf that makes the next session cleaner.
            </p>
          </div>
          <aside className="tfour-rail twide-rail">
            <div className="r-eye"><span className="dot" /><span>{active.eyebrow}</span></div>
            <div className="r-img">
              <img src={T_IMG[active.img]} alt={`${active.title} training feature image`} />
            </div>
            <h4>{active.title.split(" ").slice(0, -1).join(" ")} <span className="it">{active.title.split(" ").slice(-1)}</span></h4>
            <p>{active.dek}</p>
            <div className="r-foot">
              <span>{active.items.length} shelves</span>
              <span className="arr">{active.items.filter((i) => i.built).length} live</span>
            </div>
          </aside>
        </div>

        <div className="twide-groups">
          {TRAIN_GROUPS.map((group) => (
            <section key={group.eyebrow} className="twide-group" onMouseEnter={() => setActive(group)}>
              <div className="twide-group-head">
                <div>
                  <span>{group.eyebrow}</span>
                  <h3>{group.title}</h3>
                </div>
                <p>{group.dek}</p>
              </div>
              <div className="twide-list">
                {group.items.map((item) => {
                  const href = item.slug === "workouts" ? "/en/fitness/train/workouts/" : `/en/fitness/train/${item.slug}/`;
                  const content = (
                    <React.Fragment>
                      <div className="num">{item.n}</div>
                      <div className="body">
                        <h4>{item.name}<span className="it">.</span></h4>
                        <p>{item.dek}</p>
                        <div className="tags">{item.tags}</div>
                      </div>
                      <div className="meta">
                        <span>{item.count} guides</span>
                        <strong>{item.built ? "Read" : "Soon"}</strong>
                      </div>
                    </React.Fragment>
                  );
                  return item.built ? (
                    <a key={item.slug} className="twide-row live" href={href}>{content}</a>
                  ) : (
                    <div key={item.slug} className="twide-row planned">{content}</div>
                  );
                })}
              </div>
            </section>
          ))}
        </div>
      </div>
    </section>
  );
}
window.TFour = TFour;

function TPrinciples() {
  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">How to use <span className="display italic" style={{color:"var(--accent)"}}>this shelf.</span></h2>
          <div className="meta">A short note<br/>before you click</div>
        </div>
        <div className="tedit-body">
          <div className="tedit-h first">Section I - Start with today, not forever.</div>
          <p>
            You do not need a complete training identity before you train. You need a useful next session, a week you can repeat, and enough clarity to stop opening twelve tabs before the warm-up. Pick the question that matches today. Let the rest stay parked.
          </p>
          <div className="tedit-h">Section II - Choose by constraint.</div>
          <p>
            If time is the constraint, start with full-body or workouts. If confidence is the constraint, start with beginner training. If equipment is the constraint, start with dumbbells or no-equipment work. If the movement itself feels uncertain, start with form.
          </p>
          <div className="tedit-pull">The best training plan is the one that makes the next session easier to start.</div>
          <div className="tedit-h">Section III - Repeat before you expand.</div>
          <p>
            Most people add complexity before they have earned it. Repeat the same basic week long enough to learn from it. Then add a day, a lift, a harder interval, or a more specific goal. The boring version is usually the one that teaches you what to do next.
          </p>
          <div className="tedit-h">Section IV - Still not coaching.</div>
          <p>
            This is a magazine, not a coach. The pages here explain general principles, useful patterns, and questions worth asking. If pain, injury, medical history, pregnancy, or a long break from training changes the stakes, the next step is someone qualified with eyes on the person.
          </p>
        </div>
      </div>
    </section>
  );
}
window.TPrinciples = TPrinciples;

const TFEAT = [
  {
    img: "feat1", tag: "Workout Splits - Strength",
    kicker: "The Long Read",
    h: "How to build a week you can actually keep.",
    p: "Three sessions, two priorities, one rule: do not miss twice. The page that explains why the boring week beats the heroic one.",
    time: "7 min read",
    by: "By Jenna",
    href: "/en/fitness/train/workout-splits/",
    lead: true,
  },
  {
    img: "feat2", tag: "Exercise Form",
    kicker: "Technique",
    h: "How to make a rep look honest.",
    p: "Setup, tempo, range, and the cues that survive heavy weight.",
    time: "6 min read",
    by: "By Torrie",
    href: "/en/fitness/train/exercise-form/",
  },
  {
    img: "feat3", tag: "Cardio",
    kicker: "Practice",
    h: "Thirty minutes of zone two, on the way home.",
    p: "Conversational pace without an app, a watch, or a plan to ruin.",
    time: "5 min read",
    by: "By Jenna",
    href: "/en/fitness/train/cardio/",
  },
];

function TFeatured() {
  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> shelves.</h2>
          <div className="meta">Where to click<br/>first</div>
        </div>
        <div className="ffeat-grid">
          {TFEAT.map((f) => (
            <a key={f.h} className={`ffeat-card ${f.lead ? "lead" : ""}`} href={f.href}>
              <div className="f-img">
                <img src={T_IMG[f.img]} alt={`${f.h} training 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.TFeatured = TFeatured;

function TPull() {
  return (
    <section className="fpull" data-screen-label="05 Pull">
      <div className="fpull-inner">
        <span className="fpull-mark">"</span>
        <blockquote>
          The program you <span className="it">actually do</span> beats the program you wish you did. Every time.
        </blockquote>
        <cite>From the Lane Editor - <a href="#four">Read the index</a></cite>
      </div>
    </section>
  );
}
window.TPull = TPull;

const TSTART = [
  { n: "01", h: "start training without making it your whole life", p: "The beginner shelf: first weeks, first gym days, first durable plan.", time: "Start here", href: "/en/fitness/train/beginner-training/" },
  { n: "02", h: "choose a workout split", p: "Full body, upper/lower, push/pull/legs, and the trap of six perfect days.", time: "Build the week", href: "/en/fitness/train/workout-splits/" },
  { n: "03", h: "clean up your form", p: "The broad technique shelf before you get lost in individual lifts.", time: "Learn the lifts", href: "/en/fitness/train/exercise-form/" },
  { n: "04", h: "do cardio without overthinking it", p: "Easy, hard, running, intervals, machines, effort.", time: "Move the engine", href: "/en/fitness/train/cardio/" },
];

function TStart() {
  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 are <span className="display italic" style={{color:"var(--accent)"}}>new here.</span></h2>
          <div className="meta">Four doors<br/>to start with</div>
        </div>
        <div className="fstart-grid">
          {TSTART.map((s) => (
            <a key={s.n} className="fstart-tile" href={s.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>Open</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}
window.TStart = TStart;

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