function About({ go }) {
  useReveal();
  const credentials = [
    { tag: "EDU", value: "BS / MS — Exercise Physiology" },
    { tag: "CERT", value: "NASM Certified Personal Trainer (CPT)" },
    { tag: "CERT", value: "NASM Corrective Exercise Specialist (CES)" },
    { tag: "CERT", value: "NASM Performance Enhancement Specialist (PES) — In Progress" },
    { tag: "EXP", value: "5+ years coaching clients professionally" },
    { tag: "BASE", value: "South Lake Tahoe, CA — Online Nationwide" },
  ];
  const approach = [
    { num: "01", h: "Assessment first, always.", body: "I do not write a program until I understand how that specific body moves, where it compensates, and which side is doing the work the other side won't. The assessment is not a formality. It is the program." },
    { num: "02", h: "Structure before strength.", body: "Pushing strength into a structurally compromised pattern is how injuries become chronic. We rebuild the pattern, then load it. The order is not negotiable." },
    { num: "03", h: "Progress is measured, not felt.", body: "Clients are re-tested every session to confirm each one is producing the long-term benefits they need. Numbers move or the program changes. There is no romance — only data and the next adjustment." },
    { num: "04", h: "One body, one plan.", body: "No templates. No copy-pastes from another client. Your plan starts on a blank page after your assessment, every single time." },
  ];

  return (
    <div className="page-active">
      <section className="about-hero">
        <div className="wrap">
          <div className="mono flank reveal" style={{ color: "var(--gold)", marginBottom: 36 }}>PROFILE / 001</div>
          <div className="about-hero-grid">
            <div className="about-photo reveal">
              <img src="assets/matthew-headshot.jpg" alt="Matthew Booska" />
            </div>
            <div className="reveal">
              <h1 className="about-h1">The specialist behind <em>the method.</em></h1>
              <p style={{ color: "var(--white-soft)", fontSize: 17, lineHeight: 1.65, maxWidth: "48ch" }}>
                Matthew Booska is an Exercise Physiologist and Biomechanics Specialist working out of South Lake Tahoe, California. He builds custom 12-week training programs for clients who have stopped responding to generic plans — and for clients who never should have been on one in the first place.
              </p>
              <div className="about-credentials">
                {credentials.map((c, i) => (
                  <div key={i} className="cred-row">
                    <span className="cred-tag">{c.tag}</span>
                    <span className="cred-value">{c.value}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="philosophy-section">
        <div className="wrap">
          <div className="section-header">
            <div className="reveal">
              <div className="mono flank" style={{ color: "var(--gold)", marginBottom: 24 }}>PHILOSOPHY / IN HIS WORDS</div>
              <h2 className="section-h2">Why I do this <em>this way.</em></h2>
            </div>
          </div>
          <blockquote className="pull-quote reveal">
            "I've never been able to look at a client's pain or plateau without asking why. The answer is almost always structural — an asymmetry that's been there for years, compensated around, and eventually overloaded. When you fix the structure, everything else follows."
          </blockquote>
          <div className="philosophy-body reveal">
            <p>Most coaching makes the same quiet mistake: it treats the body as an output. More volume, more load, more intensity — and if that doesn't work, more discipline. The client who keeps getting hurt is told to be more careful. The client who keeps plateauing is told to push harder.</p>
            <p>Neither of those is the problem. The problem is that the body underneath the program is not symmetrical, and the program is asking it to behave as if it were. One hip sits higher. One shoulder rotates differently. One leg produces measurably more force than the other. The plan that ignores this will eventually break the person it was written for.</p>
            <p>My work begins where most coaching ends — with a postural assessment. I want to see how your body actually loads, where it leaks force, which side it favors, and which compensations have become reflexes. Then we build a program around that information. Not around a template. Not around what worked for the last client.</p>
            <p>This is not faster than generic training. It is just better. And for clients who have already tried "harder" and "more," it is usually the only thing that finally works.</p>
          </div>
        </div>
      </section>

      <section className="approach-section">
        <div className="wrap">
          <div className="section-header">
            <h2 className="section-h2 reveal">The <em>approach,</em> in four parts.</h2>
            <p className="section-intro reveal">Non-negotiable principles that shape every program I write.</p>
          </div>
          <div className="approach-list reveal">
            {approach.map((a) => (
              <div key={a.num} className="approach-item">
                <span className="approach-num mono">{a.num}</span>
                <h3 className="approach-h">{a.h}</h3>
                <p className="approach-body">{a.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="mentor-section">
        <div className="wrap">
          <div className="mentor-card reveal">
            <div className="asymmetry-viz" style={{ width: 160, height: 160, aspectRatio: "auto" }} />
            <div>
              <div className="mono">MENTORSHIP / LINEAGE</div>
              <h3 className="mentor-h">Trained under the philosophy of Conor Harris.</h3>
              <p className="mentor-body">
                The biomechanics framework I work from was shaped in large part by Conor Harris — one of the most recognized biomechanics coaches on YouTube and a clear voice for assessment-first training. The credit is genuine. The application is my own.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="cta-section">
        <div className="wrap">
          <div className="cta-block reveal">
            <div className="mono">NEXT STEP</div>
            <h2>See <em>the method</em> built around the way you actually move.</h2>
            <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
              <a className="btn btn-primary" onClick={() => go("method")}>The Move Better Method <span className="arrow">→</span></a>
              <a className="btn btn-ghost" onClick={() => go("contact")}>Contact Matthew</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.About = About;