const { Button } = window.VoxAwenDesignSystem_e48818;

const h2Style = { font: "var(--text-h2)", color: "var(--text-display)", margin: 0 };
const bodyStyle = { font: "var(--text-body-lg)", color: "var(--text-body)", margin: 0 };

function About({ onNav }) {
  return (
    <section id="about" style={{ scrollMarginTop: 76 }}>

      {/* Opening. Deliberately not the pinned reveal the homepage uses, and not
          the held photograph plus chapter plate the three offering pages use.
          Every other page on the site opens on black, full bleed, with something
          happening as you scroll. This one simply arrives: the page's own ground,
          in daylight, with a face and a sentence. The only motion is a fade and
          lift as it loads. */}
      <header className="about-open" data-hero data-hero-light>
        <div className="about-open-copy">
          <Eyebrow>About</Eyebrow>
          {/* PLACEHOLDER: standing in until the real opening is drafted. Set at
              roughly the lengths the layout is tuned for — the title's second
              line is the one that decides the display size, and it must not run
              longer than the first by much or it wraps. Second line italic and
              indented, the same shape the reveal titles take: a family
              resemblance without repeating their animation. */}
          <h1 className="about-open-title">
            <span>Lorem ipsum dolor.</span>
            <em>Consectetur elit.</em>
          </h1>
          <p className="about-open-line">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua veniam quis.
          </p>
          <span className="about-open-cue" aria-hidden="true"><b>Scroll</b><i /></span>
        </div>

        <div className="about-open-figure">
          <img src="public/About-me-hero.jpg"
            alt="Esther Wilson laughing, playing a frame drum in a sunlit meadow" />
        </div>
      </header>

      <div className="rise rise--compact">
      {/* Marks where this section starts covering the hero, so the nav knows
          when to stop being transparent. */}
      <div data-nav-sentinel aria-hidden="true" />
      {/* A Life in Rhythm — the homepage About band's shape: the photograph runs
          off the left edge, full height, with the words beside it. A direct child
          of .rise so it is full width without breaking out of a container. */}
      <div className="about-rhythm">
        <div className="about-rhythm-figure">
          <img src="public/Life-in-rhythm.jpg" alt="Esther Wilson holding a violin and bow" />
        </div>
        <div className="about-rhythm-copy">
          <h2 style={h2Style}>A Life in Rhythm</h2>
          <p style={bodyStyle}>
            Music has run underneath everything. I was classically trained in violin and voice, and travelled internationally with an orchestra from a young age. In Singapore, years later, I rediscovered music through Eastern traditions — sound healing, Kundalini, energy work — and for the past few years I've studied vocal alchemy and drumming with a mentor. That training connected me to my own rhythm, roots and ancestry, and taught me circular, relational ways of being. I've felt, firsthand, what a voice can do — confront old patterns, rebuild a healthy relationship with the body, weave back together what's been separated in a family.
          </p>
        </div>
      </div>

      <div style={{ padding: "112px 48px" }}>
        <div style={{ maxWidth: 1120, margin: "0 auto" }}>

          {/* Tending the Body */}
          <div style={{ marginBottom: 96, maxWidth: 760 }}>
            <h2 style={{ ...h2Style, marginBottom: 20 }}>Tending the Body</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <p style={bodyStyle}>
                In my twenties I was an endurance athlete — Ironman, multi-day stage races — and I pushed to the edges of what my body could do. I understand, from the inside, the capacity we hold beyond what we imagine. Now, trained in post-natal recovery massage, I meet the body from a different direction: tending it with touch, finding presence through softness, cultivating inner rhythm.
              </p>
              <p style={bodyStyle}>
                That shift lives at the centre of Graceful Ignited Bodies — ancient, non-medical practices of massage, wrapping, drumming and voice.
              </p>
            </div>
          </div>

          {/* Sitting at the Threshold */}
          <div style={{ maxWidth: 760 }}>
            <h2 style={{ ...h2Style, marginBottom: 20 }}>Sitting at the Threshold</h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <p style={bodyStyle}>
                Leaving Asia and my corporate job in summer 2025 was its own threshold. I ignited my artistry, combining it with a new skill in music production to create two immersive sonic journeys — weaving together the stories of the lands I'd visited with the messiness of personal transformation. That transition gave me the capacity to sit with uncertainty and discomfort, and to make space to be moved.
              </p>
              <p style={bodyStyle}>
                I trained with Companion Voices as a singer for the end of life, and completed the foundation End of Life Doula training with Living Well Dying Well. I hold a wide range of what a threshold can ask for — practical alongside emotional and spiritual — and I meet people flexibly, wherever they are. I bring intimacy, reverence, grace, and the capacity for inner silence, as you navigate what can't be seen.
              </p>
            </div>
          </div>

          <Button variant="primary" onClick={() => onNav("contact")} style={{ marginTop: 56 }}>Begin a conversation</Button>

        </div>
      </div>
      </div>
    </section>
  );
}

Object.assign(window, { About });