function Home({ go }) {
  useReveal();
  const pains = [
  "You work out consistently but you keep getting hurt.",
  "You've been stuck at the same level for months and can't figure out why.",
  "Your shoulder, knee, or hip flares up no matter what you do.",
  "Your PT cleared you but something still doesn't feel right.",
  "You feel like something is off — but no one has been able to tell you what."];

  const steps = [
  { num: "01", stage: "Stage One", title: "Pain Reduction", body: "We identify the structural asymmetries driving your discomfort and remove the loads that compound them. Discomfort drops before strength is rebuilt." },
  { num: "02", stage: "Stage Two", title: "Postural Correction", body: "We rebuild movement patterns from the ground up — hip orientation, scapular control, force distribution. Your body learns symmetry under low load." },
  { num: "03", stage: "Stage Three", title: "Performance Unlock", body: "With a corrected base, output stops being capped by compensation. Strength, speed, and endurance all rise — because the brakes are off." }];


  return (
    <div className="page-active">
      <section className="hero">
        <div className="wrap hero-content">
          <div className="hero-eyebrow mono flank">EXERCISE PHYSIOLOGY · BIOMECHANICS</div>
          <h1 className="hero-h1">
            Your body is <em>asymmetrical.</em><br />
            Your training should be too.
          </h1>
          <p className="hero-sub">Matthew Booska is an Exercise Physiologist and Biomechanics Specialist who builds custom programs around the way your body actually moves. Every program starts with a postural assessment — because the fastest way to get stronger, leaner, and pain-free isn't working harder. It's training around the compensations nobody else has taught you to see.

          </p>
          <div className="hero-ctas">
            <a className="btn btn-primary" onClick={() => go("method")}>See The Method <span className="arrow">→</span></a>
            <a className="btn btn-ghost" onClick={() => go("contact")}>Work With Me</a>
          </div>
        </div>
        <div className="wrap hero-meta">
          <div className="hero-meta-line mono" style={{ fontSize: "14px" }}>SOUTH LAKE TAHOE · ONLINE NATIONWIDE</div>
          <div className="hero-meta-line mono" style={{ direction: "ltr", fontSize: "14px" }}>NASM · CES · PES · MS EP</div>
        </div>
      </section>

      <section className="pain-section">
        <div className="wrap">
          <div className="pain-eyebrow mono flank reveal" style={{ fontSize: "14px" }}>WHAT BROUGHT YOU HERE</div>
          <div className="pain-list">
            {pains.map((p, i) =>
            <div key={i} className="pain-item reveal">
                <span className="pain-num">{String(i + 1).padStart(2, "0")} / {String(pains.length).padStart(2, "0")}</span>
                <span className="pain-text">"{p}"</span>
              </div>
            )}
          </div>
          <div className="reveal" style={{ marginTop: 56, color: "var(--white-soft)", fontSize: 17, maxWidth: "52ch", lineHeight: 1.65 }}>
            There is a reason. It is almost always structural. And it can be found, measured, and trained around. <span style={{ color: "var(--gold)" }}>That is the entire premise of this work.</span>
          </div>
        </div>
      </section>

      <section className="method-section">
        <div className="wrap">
          <div className="section-header">
            <div className="reveal">
              <div className="mono flank" style={{ color: "var(--gold)", marginBottom: 24, fontSize: "14px" }}>THE DIFFERENCE / THE METHODOLOGY</div>
              <h2 className="section-h2">Most trainers treat the symptom. Matthew finds the <em>root.</em></h2>
            </div>
            <p className="section-intro reveal">
              Three sequential stages, run as a system. Each stage earns the next — there are no shortcuts and no skipped steps.
            </p>
          </div>
          <div className="step-grid reveal">
            {steps.map((s, i) =>
            <div className="step" key={i}>
                <div className="step-arrow" />
                <div className="mono step-num" style={{ fontSize: "12px" }}>{s.num} — {s.stage}</div>
                <h3 className="step-h3">{s.title}</h3>
                <p className="step-body">{s.body}</p>
                <div className="mono" style={{ marginTop: 24, color: "var(--white-faint)", fontSize: "12px" }}>WEEKS {i === 0 ? "1–4" : i === 1 ? "5–8" : "9–12"}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      <section className="who-section">
        <div className="wrap">
          <div className="section-header">
            <h2 className="section-h2 reveal">Built for two kinds of <em>bodies.</em></h2>
            <p className="section-intro reveal">South Lake Tahoe locals. Online clients nationwide. The diagnosis process is the same.</p>
          </div>
          <div className="who-grid reveal">
            <div className="who-card">
              <div className="who-tag mono" style={{ fontSize: "12px" }}>01 / ACTIVE</div>
              <h3 className="who-title">Athletes hitting the ceiling.</h3>
              <p className="who-body">Gym-goers, outdoor athletes, performance-focused individuals who keep breaking down or running into the same wall. You're working hard. The plateau isn't effort — it's structure.</p>
              <div className="who-tags">
                <span className="who-pill">Lifters</span>
                <span className="who-pill">Skiers / Climbers</span>
                <span className="who-pill">Runners</span>
                <span className="who-pill">Field Sport</span>
              </div>
            </div>
            <div className="who-card">
              <div className="who-tag mono" style={{ fontSize: "12px" }}>02 / SEDENTARY</div>
              <h3 className="who-title">Desk bodies in chronic pain.</h3>
              <p className="who-body">Desk workers and sedentary professionals carrying postural pain that the standard PT visit didn't fully resolve. Your body has adapted around an imbalance for years. We undo it methodically.</p>
              <div className="who-tags">
                <span className="who-pill">Lower Back</span>
                <span className="who-pill">Neck / Shoulder</span>
                <span className="who-pill">Hip / Knee</span>
                <span className="who-pill">Postural</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="offer-section">
        <div className="wrap">
          <div className="section-header">
            <h2 className="section-h2 reveal">Three steps to <em>start.</em></h2>
            <p className="section-intro reveal">A natural progression — from a free conversation, to a deep postural read, to your custom 12-week program.</p>
          </div>
          <div className="offer-grid reveal">
            <div className="offer-card" onClick={() => go("contact", { intent: "intro" })}>
              <div className="offer-tag mono">STEP 01 · FREE</div>
              <h3 className="offer-name">15-Minute Intro Call</h3>
              <div className="offer-price">Free · Mutual fit-check</div>
              <p className="offer-desc">A short conversation. Matthew gets a basic read on your lifestyle and what you need; you get a feel for how he works and what the process looks like. No commitment — just see if it's a fit before anything else.</p>
              <span className="offer-link">Book your intro <span className="arrow">→</span></span>
            </div>
            <div className="offer-card" onClick={() => go("contact", { intent: "review" })}>
              <div className="offer-tag mono">STEP 02 · 1:1</div>
              <h3 className="offer-name">Postural Review + Strategy Call</h3>
              <div className="offer-price">$150 · 60 minutes with Matthew</div>
              <p className="offer-desc">Matthew runs a personal postural read on your asymmetries and movement tendencies, then walks you through it 1:1. By the end you'll know your body better than most people ever will. <em style={{ color: "var(--gold)" }}>The full $150 applies as credit toward the Method if you enroll.</em></p>
              <span className="offer-link">Book your review <span className="arrow">→</span></span>
            </div>
            <div className="offer-card feature" onClick={() => go("contact", { intent: "method" })}>
              <div className="offer-tag mono">STEP 03 · FLAGSHIP</div>
              <h3 className="offer-name">The Move Better Method</h3>
              <div className="offer-price">$2,000 – $3,000 · 12 weeks</div>
              <p className="offer-desc">Your custom 12-week training program — built in three mesocycles around the postural assessment from Step 02. Pain Reduction (weeks 1–4), Postural Correction (5–8), Performance Unlock (9–12). Re-tested every session. Adjusted in real time. Not a template, not a copy of anyone else's program.</p>
              <span className="offer-link">See the full method <span className="arrow">→</span></span>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-section">
        <div className="wrap">
          <div className="cta-block reveal">
            <div className="mono">FINAL · CTA</div>
            <h2>Your body is asymmetrical. Your training should be <em>too.</em></h2>
            <a className="btn btn-primary" onClick={() => go("contact", { intent: "method" })}>Work With Me <span className="arrow">→</span></a>
          </div>
        </div>
      </section>
    </div>);

}

window.Home = Home;