// ABOUT — warm, personal block on hot-pink (pre-launch voice)

const About = () => (
  <section className="about section-pad" id="about">
    <div className="container">
      <div className="about__grid">
        <div>
          <Eyebrow className="on-pink">Our story</Eyebrow>
          <h2 className="sec-title about__title">
            American Mahjong is a <em style={{ fontStyle: "italic" }}>lifestyle</em> —<br />not a pastime.
          </h2>
          <p className="about__body">
            "I grew up at my grandmother's table. She'd invite the same four women every
            Sunday for forty years. When she passed, the table went quiet."
          </p>
          <p className="about__body">
            Mahjong Matchmaker exists because good games don't happen by accident — they
            happen because someone kept a list, made the calls, and set out the tea. We're
            building that list. We're going to make the calls. You bring a friend and a casserole.
          </p>
        </div>
        <Reveal>
          <div className="about__card">
            <div style={{ fontFamily: "var(--mm-font-sans)", fontSize: 10, color: "#9A7A00", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600, marginBottom: 12 }}>A note from the founder</div>
            <h3>We are small on purpose.</h3>
            <p>
              We are mahjong lovers who saw so many people unable to find a table
              and create community — so we created Mahjong Matchmaker.
            </p>
            <p>
              If you're reading this before launch — welcome. Your beta perks are waiting,
              and you're exactly the kind of person we made this for.
            </p>
            <div className="signature">— The Mahjong Matchmaker team</div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

Object.assign(window, { About });