function Method({ go }) {
  useReveal();
  const [openMeso, setOpenMeso] = useState(0);
  const [focus, setFocus] = useState("weight");
  const [equipment, setEquipment] = useState("commercial");

  const mesos = [
    { num: "M1", weeks: "WEEKS 01–04", title: "Assessment + Foundation", detail: "Identify and begin correcting your specific asymmetries. Establish baseline movement patterns under low load. The work here is unglamorous — controlled tempos, posture-specific drills, breathing patterns — and absolutely load-bearing for everything that follows.", tags: ["Postural Assessment", "Re-Test", "Pattern Build"] },
    { num: "M2", weeks: "WEEKS 05–08", title: "Build", detail: "Layer strength onto the corrected movement. Compound work returns. Volume and load climb together, but only along the patterns we've earned. Mid-cycle reassessment confirms the structure is holding under load.", tags: ["Hypertrophy", "Compound Lifts", "Mid-Cycle Re-Test"] },
    { num: "M3", weeks: "WEEKS 09–12", title: "Performance", detail: "Push output with a corrected structural base. Speed, power, and sport-specific demands are introduced. The body produces force from a symmetric base for likely the first time in years — performance ceilings move accordingly.", tags: ["Power", "Sport-Specific", "Final Re-Test"] },
  ];

  const focuses = [
    { id: "weight", label: "Weight Training", meta: "STRENGTH" },
    { id: "loss", label: "Weight Loss", meta: "COMPOSITION" },
    { id: "hybrid", label: "Hybrid Training + Weight Loss", meta: "BLEND" },
    { id: "athletic", label: "Athletic-Specific (HIIT / Sport Prep)", meta: "PERFORMANCE" },
  ];
  const equip = [
    { id: "home", label: "Home Gym", meta: "RACK + DBS" },
    { id: "commercial", label: "Commercial Gym", meta: "FULL ACCESS" },
    { id: "travel", label: "Travel / Hotel", meta: "MINIMAL" },
    { id: "none", label: "No Equipment", meta: "BODYWEIGHT" },
  ];

  return (
    <div className="page-active">
      <section className="method-hero">
        <div className="wrap">
          <div className="mono flank reveal" style={{ color: "var(--gold)", marginBottom: 36 }}>FLAGSHIP / 12-WEEK PROGRAM</div>
          <div className="method-hero-grid">
            <div className="reveal">
              <h1 className="method-h1">The Move Better <em>Method.</em></h1>
              <p className="method-tagline">A custom 12-week training program built in three mesocycles, designed entirely around your postural assessment results and specific movement asymmetries. Not a template. Built for you.</p>
            </div>
            <div className="price-block reveal">
              <div className="mono">INVESTMENT / FROM</div>
              <div className="price-amount">$2,000<span> /</span></div>
              <div className="mono" style={{ color: "var(--white-faint)", marginTop: 8 }}>12-WEEK PROGRAM · 6+ COACHING CALLS</div>
            </div>
          </div>
        </div>
      </section>

      <section className="meso-section">
        <div className="wrap">
          <div className="section-header">
            <div className="reveal">
              <div className="mono flank" style={{ color: "var(--gold)", marginBottom: 24 }}>STRUCTURE / THREE MESOCYCLES</div>
              <h2 className="section-h2">Twelve weeks. <em>Three earned phases.</em></h2>
            </div>
            <p className="section-intro reveal">Each mesocycle exists for a reason and earns the next. Click any phase to see what you'll be doing.</p>
          </div>
          <div className="meso-list reveal">
            {mesos.map((m, i) => (
              <div key={i} className={"meso-row" + (openMeso === i ? " expanded" : "")} onClick={() => setOpenMeso(openMeso === i ? -1 : i)}>
                <span className="meso-num">{m.num}</span>
                <span className="meso-weeks">{m.weeks}</span>
                <span className="meso-title">{m.title}</span>
                <span className="meso-mark">+</span>
                <div className="meso-detail">
                  <div className="meso-detail-inner">
                    {m.detail}
                    <div className="meso-detail-tags">
                      {m.tags.map((t) => <span key={t} className="who-pill">{t}</span>)}
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="config-section">
        <div className="wrap">
          <div className="section-header">
            <div className="reveal">
              <div className="mono flank" style={{ color: "var(--gold)", marginBottom: 24 }}>CUSTOMIZATION</div>
              <h2 className="section-h2">Your goal. <em>Your equipment.</em> Your program.</h2>
            </div>
            <p className="section-intro reveal">The mesocycle architecture is fixed. Everything inside it is built to your selection.</p>
          </div>
          <div className="config-grid reveal">
            <div>
              <div className="config-h">Program Focus</div>
              <p className="config-sub">Choose one. The full program is shaped around it.</p>
              <div className="config-options">
                {focuses.map((f) => (
                  <div key={f.id} className={"config-opt" + (focus === f.id ? " selected" : "")} onClick={() => setFocus(f.id)}>
                    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                      <span className="check">{focus === f.id && <span style={{ width: 4, height: 4, background: "var(--black)", borderRadius: "50%" }} />}</span>
                      <span className="config-opt-label">{f.label}</span>
                    </div>
                    <span className="config-opt-meta">{f.meta}</span>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="config-h">Equipment Access</div>
              <p className="config-sub">Programs are scaled to what you actually have.</p>
              <div className="config-options">
                {equip.map((e) => (
                  <div key={e.id} className={"config-opt" + (equipment === e.id ? " selected" : "")} onClick={() => setEquipment(e.id)}>
                    <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                      <span className="check">{equipment === e.id && <span style={{ width: 4, height: 4, background: "var(--black)", borderRadius: "50%" }} />}</span>
                      <span className="config-opt-label">{e.label}</span>
                    </div>
                    <span className="config-opt-meta">{e.meta}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="pricing-section">
        <div className="wrap">
          <div className="section-header">
            <div className="reveal">
              <div className="mono flank" style={{ color: "var(--gold)", marginBottom: 24 }}>PRICING / TWO TIERS</div>
              <h2 className="section-h2">Pick your <em>cadence.</em></h2>
            </div>
            <p className="section-intro reveal">Same program, different coaching frequency. Choose what your situation needs.</p>
          </div>
          <div className="price-grid reveal">
            <div className="price-card">
              <div className="ribbon mono">TIER 01 / FOUNDATION</div>
              <div className="price-num">$2,000</div>
              <div className="price-name">12-Week Program · Bi-Weekly Coaching</div>
              <ul className="price-features">
                <li>Custom 12-week program built from your assessment</li>
                <li>6 coaching calls — one every two weeks</li>
                <li>Mid-cycle re-assessment + program adjustments</li>
                <li>Direct messaging support between calls</li>
                <li>Final re-test + post-program plan</li>
              </ul>
            </div>
            <div className="price-card feature">
              <div className="ribbon mono">TIER 02 / FULL CADENCE · RECOMMENDED</div>
              <div className="price-num">$3,000</div>
              <div className="price-name">12-Week Program · Weekly Coaching</div>
              <ul className="price-features">
                <li>Everything in Foundation</li>
                <li>12 coaching calls — weekly check-ins</li>
                <li>Tighter feedback loop on form, recovery, load management</li>
                <li>Real-time program adjustments week-to-week</li>
                <li>The fastest way through the three mesocycles</li>
              </ul>
            </div>
          </div>
          <div className="ongoing-row reveal">
            <span className="mono">POST-PROGRAM</span>
            <span className="ongoing-text">Ongoing monthly coaching for clients who want to keep going past the 12 weeks.</span>
            <span className="ongoing-price">$300 – $1,000 / MO</span>
          </div>
        </div>
      </section>

      <section className="support-section">
        <div className="wrap">
          <div className="section-header">
            <div className="reveal">
              <div className="mono flank" style={{ color: "var(--gold)", marginBottom: 24 }}>NOT READY YET / ENTRY POINTS</div>
              <h2 className="section-h2">Other ways to <em>get started.</em></h2>
            </div>
            <p className="section-intro reveal">If the full program isn't where you are yet, start smaller. Each of these is a real product on its own — and a soft gateway into the Method.</p>
          </div>
          <div className="support-grid reveal">
            <div className="support-card">
              <div className="support-tag mono"><span>STEP 01 · FREE</span><span>01</span></div>
              <h3 className="support-h">15-Minute Intro Call</h3>
              <p className="support-body">A short, no-pressure 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. The right starting point for anyone who's curious — no commitment, just a mutual fit-check before going deeper.</p>
              <a className="support-link" onClick={() => go("contact", { intent: "intro" })}>Book your intro <span>→</span></a>
            </div>
            <div className="support-card">
              <div className="support-tag mono"><span>STEP 02 · $150 / HR</span><span>02</span></div>
              <h3 className="support-h">Postural Review + Strategy Call</h3>
              <p className="support-body">After the intro, this is where the real work begins. Matthew runs a personal postural read on your asymmetries and movement tendencies, then walks you through it 1:1 — exercises to keep, exercises to drop, how to use the data this week.</p>
              <p className="support-body" style={{ color: "var(--gold)", fontSize: 13, marginTop: -8 }}><em>The full $150 applies as credit toward The Move Better Method if you enroll.</em></p>
              <a className="support-link" onClick={() => go("contact", { intent: "review" })}>Book your review <span>→</span></a>
            </div>
            <div className="support-card">
              <div className="support-tag mono"><span>$100 / HR</span><span>03</span></div>
              <h3 className="support-h">Basic Fitness Training</h3>
              <p className="support-body">Online or in-person. For clients who want coaching without the full custom program build. The expertise is the same. The container is just smaller.</p>
              <a className="support-link" onClick={() => go("contact", { intent: "basic" })}>Inquire <span>→</span></a>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-section">
        <div className="wrap">
          <div className="cta-block reveal">
            <div className="mono">READY TO START</div>
            <h2>Fill out the form. Mention <em>the Method.</em></h2>
            <p style={{ color: "var(--white-soft)", maxWidth: "48ch", margin: "0 auto 32px" }}>Matthew will reach out personally within 24 hours.</p>
            <a className="btn btn-primary" onClick={() => go("contact", { intent: "method" })}>Work With Me <span className="arrow">→</span></a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Method = Method;