// journey.jsx — Transformation timeline

const STAGES = [
  { num: "01", label: "Night One", title: "The Body Begins to Trust",
    body: "The first breath returns the smallest amount of safety. Five minutes. Nothing more is asked of you tonight." },
  { num: "02", label: "Week One", title: "The Alarm Quiets",
    body: "Something inside that has been on for a long time begins, very slowly, to switch off. You will not notice the moment it happens." },
  { num: "03", label: "Week Two", title: "The Gut Remembers",
    body: "Warm water in the morning. A tradition older than your country. The original site of healing begins, again, to listen." },
  { num: "04", label: "Week Three", title: "The Honest Look Inward",
    body: "You will see what has shifted. Without effort. Without performance. The practice does not judge the gap." },
  { num: "05", label: "Day Thirty", title: "The Practice Becomes You",
    body: "It is no longer a course. It is a quiet that lives inside. You will not remember when it stopped being foreign." },
];

const Journey = () => (
  <section className="section journey" id="journey">
    <div className="section__head">
      <span className="label" style={{ color: "var(--gold-deep)" }}>The Transformation</span>
      <Divider width={100} />
      <h2 className="section__title">A Quiet Returning</h2>
      <p className="section__lead">
        Five chapters. Thirty mornings.
        One practice — that does not judge the gap.
      </p>
    </div>

    <div className="journey__body">
      <div className="journey__rail">
        {STAGES.map((s, i) => (
          <Reveal key={s.num}>
            <div className="journey__row">
              <div className="journey__card">
                <div className="journey__card-edge"></div>
                <span className="label">{s.label}</span>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
              <div className="journey__node-wrap">
                <span className="journey__node" aria-hidden="true"></span>
                <span className="journey__num">{s.num}</span>
              </div>
              <div className="journey__card-side" aria-hidden="true"></div>
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal>
        <div className="journey__image-wrap">
          <img src="assets/monk_path.png" alt="A monk walking a quiet stone path" className="journey__image" />
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { Journey, STAGES });