// about.jsx — About the Teacher

const TRADITIONS = [
  { label: "Himalayan", phrase: "The breath that returns safety." },
  { label: "Japanese", phrase: "The morning that begins quietly." },
  { label: "Ayurvedic", phrase: "The body that remembers." },
  { label: "Taoist", phrase: "The release that asks nothing." },
];

const About = () => (
  <section className="about" id="about">
    <div className="about__grid">
      <Reveal>
        <div className="about__portrait">
          <img
            src="assets/teacher_mountain.png"
            alt="The teacher seated before the Himalayan dawn"
          />
        </div>
      </Reveal>

      <Reveal>
        <div className="about__copy">
          <span className="label" style={{ color: "var(--gold-deep)" }}>
            About the Teacher
          </span>
          <h2 className="section__title" style={{ textAlign: "left", marginTop: 12, marginBottom: 36 }}>
            A teacher who has been<br/>waiting a long time<br/>for you to arrive.
          </h2>
          <p>
            <strong>My friend</strong> — Zenmunis is not a brand.
            It is a quiet voice. It is the elder you never had
            time to sit with. It is the morning practice you were
            meant to be taught, and never were.
          </p>
          <p>
            Each lesson here is drawn directly from a living tradition —
            <em> never </em>generic "ancient wisdom." A breath from the Himalayas.
            A warm-water ritual from Ayurveda. A morning bow from Japan.
            A teaching about letting go from the Taoists.
          </p>
          <p>
            We do not promise to transform your life. We promise only this:
            <strong> something will shift</strong>. And it will be enough.
          </p>

          <div className="about__traditions">
            {TRADITIONS.map(t => (
              <div className="about__tradition" key={t.label}>
                <span className="label">{t.label}</span>
                <span>{t.phrase}</span>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { About });