function AboutPage({ onGo }) {
  const D = window.DATA;
  return (
    <>
      <section className="wrap">
        <div className="about-hero">
          <div>
            <Reveal>
              <span className="hero__kicker" style={{ marginTop: 24 }}>About · philosophy</span>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="about-hero__title">
                I'm Stanzin. I help founders turn <em>what they've built</em> into <em>what the market wants</em>.
              </h1>
            </Reveal>
            <Reveal delay={160}>
              <div className="about-hero__body">
                <p>Ihelp founders scale businesses through growth strategy, performance systems, and positioning.

Over the last seven years, I’ve worked across startups, D2C brands, and growth teams - leading acquisition, analytics, creative strategy, and revenue growth.

Today, I work independently with a small number of founders each year as an embedded growth partner.

My approach combines:
- performance marketing,
- product-led thinking,
- analytics,
- and clear communication.

No vanity metrics.
No bloated retainers.
Just strategy, execution, and outcomes that compound over time.
                </p>
              </div>
            </Reveal>
          </div>
          <Reveal delay={240}>
            <aside className="about-side">
              <div className="about-side__photo" />
              <dl>
                <dt>Based</dt><dd>Gurugram, IN</dd>
                <dt>Engagements</dt><dd>5–6 / year</dd>
                <dt>Model</dt><dd>Retainer + outcome</dd>
                <dt>Notice</dt><dd>2 months typical</dd>
                <dt>Stack</dt><dd>Meta, Google, LinkedIn, GA4, Mixpanel, Webflow, Framer</dd>
                <dt>Outside work</dt><dd>Trail running, slow cooking, long-form essays</dd>
              </dl>
            </aside>
          </Reveal>
        </div>
      </section>

      {/* Philosophy */}
      <section className="philo">
        <div className="wrap">
          <Reveal>
            <p className="section__num" style={{ marginBottom: 24 }}>02 / Philosophy</p>
            <h2 className="philo__quote">
              Marketing is not ads. It's <em>value communication</em>.
            </h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="philo__attr">— THE PRINCIPLE BEHIND MY WORK.</p>
          </Reveal>

          <div style={{ height: 80 }} />

          <Reveal>
            <div className="why-fail">
              <div>
                <h4>Why most brands fail at growth</h4>
                <ul>
                  {D.philo.fail.map((x, i) => <li key={i}>{x}</li>)}
                </ul>
              </div>
              <div>
                <h4>How I think about the problem</h4>
                <ul>
                  {D.philo.approach.map((x, i) => <li key={i}>{x}</li>)}
                </ul>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Skills */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="03 / What I do well" titleHtml="A toolkit, <em>not</em> a shopping list." lede="Channels don’t scale companies. Systems do." />
          <Reveal>
            <div className="skills">
              {D.skills.map((s, i) => <div className="skill" key={i}>
                  <div className="skill__icon">{s.icon}</div>
                  <h3 className="skill__title">{s.title}</h3>
                  <p className="skill__desc">{s.desc}</p>
                  <div className="skill__tags">{s.tags.map((t) => <span key={t}>{t}</span>)}</div>
                </div>)}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Timeline */}
      <section className="section">
        <div className="wrap">
          <SectionHead num="04 / Career so far" titleHtml="Five years, <em>four chapters</em>." />
          <Reveal>
            <div className="timeline">
              {D.timeline.map((t, i) => <div className="timeline__item" key={i}>
                  <div className="timeline__year">{t.year}</div>
                  <div className="timeline__box">
                    <h3 className="timeline__role">{t.role}</h3>
                    <div className="timeline__co">{t.co}</div>
                    <p className="timeline__desc">{t.desc}</p>
                  </div>
                </div>)}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="cta-big" style={{ backgroundColor: "rgb(59, 54, 54)" }}>
        <div className="wrap">
          <Reveal>
            <h2 className="cta-big__title">Want to work <em>together?</em></h2>
          </Reveal>
          <Reveal delay={120}>
            <div className="cta-big__row">
              <button className="btn btn--primary" onClick={() => onGo("contact")}>Get in touch <span className="arr">↗</span></button>
              <button className="btn btn--ghost" onClick={() => alert("Resume download — placeholder")}>Download resume ↓</button>
            </div>
          </Reveal>
        </div>
      </section>
    </>);}window.AboutPage = AboutPage;