/* Sound Healer Training page content. Verified from calmingspot.com/teachertraining. */

const { Button: StButton, ImagePlaceholder: StPlaceholder } = window.CalmingSpotDesignSystem_cdab4b;
const { PageHero: StHero, renderPage: stRender, PkCheck: StCheck } = window;

const ST_SIGNUP = "https://momence.com/l/k8hbPzon";   // June 26-28
const ST_SIGNUP_2 = "https://momence.com/l/mXh7MwW2"; // July 31 - Aug 2
const ST_PRIVATE = "mailto:hello@calmingspot.com?subject=1:1%20Sound%20Healer%20Training";

const ST_DATES = [
  { range: "June 26, 27 & 28", days: "Fri to Sun", href: ST_SIGNUP },
  { range: "July 31, Aug 1 & 2", days: "Fri to Sun", href: ST_SIGNUP_2 },
];

const ST_WWW = [
  {
    k: "Who",
    h: "A growing community.",
    body: "Calming Spot holds daily sound bath classes, workshops, and large full-moon gatherings. Our teachers are well-connected and exceptional at what they do, and we're always expanding to new locations. Come grow with us; many trainees go on to lead with our team.",
  },
  {
    k: "What",
    h: "What you receive.",
    body: "In-person, hands-on learning · 1-on-1 coaching and mentoring · professional recordings of you to take home and share · a full assessment and Sound Healing Certificate · real practice in live, small-group sessions · and the chance to start leading classes with us right away.",
  },
  {
    k: "Why",
    h: "Why it matters.",
    body: "Becoming a channel for sound healing is something to be proud of. The evidence is clear, too: helping others heal benefits your own wellbeing, reducing stress while lifting mood, self-esteem, and happiness.",
  },
];

const ST_DAYS = [
  {
    d: "Friday",
    t: "6:00 to 8:30 PM",
    items: [
      "Introduction and overview",
      "Human emotion, thought, manifestation, and the chakras, and how each is held in a sound bath meditation",
      "Introduction to the instruments",
      "Q&A with a guest healer, and a mini sound bath",
    ],
  },
  {
    d: "Saturday",
    t: "12:00 to 4:00 PM",
    items: [
      "Hands-on practice with the instruments",
      "Using bowls in 1-on-1 healings",
      "Introduction to breathwork",
      "Chakra cleansing, step by step",
      "Building a sound bath: flow, playlist, focus, energy, sound, and scripts",
      "Guest healer Q&A and a mini sound bath",
      "Homework: prepare your own sound bath meditation",
    ],
  },
  {
    d: "Sunday",
    t: "12:00 to 4:00 PM",
    items: [
      "Practice sound bath",
      "Performance and recording",
      "The business of sound healing, and how to host your own",
      "Q&A with a guest healer, and certification",
    ],
  },
];

const ST_INCLUDES = [
  "A 3-day intensive with Calming Spot instructors",
  "Releasing stagnant energy and blockages, and cleansing the chakras",
  "Integral sound healing with Himalayan & Tibetan singing bowls",
  "Crystal singing bowls and other instruments",
  "Drums, percussion, and an introduction to gongs",
  "The Calming Spot method, start to finish",
  "How to facilitate your own sound bath",
  "Relaxing into present-moment awareness",
  "Activating unconditional love in the heart",
  "Resonating with the feelings and sensations in the body",
  "Tools to keep practicing self-care after the workshop",
  "Sage and smudging, cleansing and protecting your energy",
];

function SoundTrainingPage() {
  return (
    <>
      <StHero
        crumb="Sound Training"
        eyebrow="Sound Healer Certification"
        title="Become certified to guide sound."
        lead="Our flagship three-day Sound Healer Training, hands-on with crystal and metal bowls, gongs, drums, and voice. Leave certified and ready to hold sound baths of your own. In person in Los Angeles; hundreds certified worldwide."
        mediaLabel="Trainees practicing with singing bowls"
        mediaSrc="assets/scene/hero-training.jpg"
        actions={<>
          <StButton variant="light" href={ST_SIGNUP} target="_blank" rel="noopener">Enroll for $999</StButton>
          <StButton variant="on-deep" href={ST_PRIVATE}>Ask about 1:1 training</StButton>
        </>}
      />

      {/* DATES + PRICE */}
      <section className="pg-section">
        <div className="pg-wrap">
          <div className="pg-cols">
            <div>
              <p className="cs-eyebrow" style={{ marginBottom: 14 }}>Upcoming Weekends</p>
              <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-h1)", color: "var(--text-primary)", lineHeight: 1.05, maxWidth: "16ch" }}>Three days that change how you hold a room.</h2>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--type-body)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)", marginTop: "var(--space-4)", maxWidth: "46ch" }}>
                The weekend moves from feeling the practice, to understanding the instruments and the science behind them, to confidently guiding your own sound bath. No prior experience required, just a genuine pull toward sound and presence.
              </p>
            </div>
            <div style={{ alignSelf: "start" }}>
              <div className="st-dates">
                {ST_DATES.map((d) => (
                  <a className="st-date" key={d.range} href={d.href} target="_blank" rel="noopener">
                    <span className="st-date__tag">{d.days}</span>
                    <span className="st-date__range">{d.range}</span>
                    <span className="st-date__cta">Reserve your spot
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
                    </span>
                  </a>
                ))}
              </div>
              <div className="st-price">
                <div>
                  <span className="st-price__amt">$999</span>
                  <span className="st-price__note">Payment plan available</span>
                </div>
                <p className="st-price__private">
                  Prefer to go deeper, one-on-one? We offer personalized 1:1 teacher trainings. <a href={ST_PRIVATE}>email hello@calmingspot.com</a> to schedule.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHO / WHAT / WHY */}
      <section className="pg-section pg-section--warm">
        <div className="pg-wrap">
          <p className="cs-eyebrow" style={{ marginBottom: 24 }}>Calming Spot's Sound Bath Certification</p>
          <div className="pg-grid3">
            {ST_WWW.map((c) => (
              <div className="pg-card" key={c.k} style={{ paddingTop: "var(--space-6)" }}>
                <span className="pg-card__kicker">{c.k}</span>
                <h3 className="pg-card__name">{c.h}</h3>
                <p className="pg-card__desc">{c.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MEDIA STRIP */}
      <section className="pg-section">
        <div className="pg-wrap">
          <div className="st-gallery">
            <div className="st-gallery__a"><StPlaceholder tone="deep" label="Trainees in a candlelit circle with bowls" showLabel={false} id="st-gallery-1" src="assets/scene/st-gallery-1.jpg" /></div>
            <div className="st-gallery__b"><StPlaceholder tone="warm" label="Hands on a crystal singing bowl" showLabel={false} id="st-gallery-2" src="assets/scene/st-gallery-2.jpg" /></div>
            <div className="st-gallery__c"><StPlaceholder tone="warm" label="Beach sound bath at sunset" showLabel={false} id="st-gallery-3" src="assets/scene/st-gallery-3.jpg" /></div>
          </div>
        </div>
      </section>

      {/* THE THREE DAYS */}
      <section className="pg-section pg-section--warm">
        <div className="pg-wrap">
          <p className="cs-eyebrow" style={{ marginBottom: 8 }}>The Curriculum</p>
          <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-h1)", color: "var(--text-primary)", marginBottom: "var(--space-7)" }}>Three days, hour by hour.</h2>
          <div className="pg-days">
            {ST_DAYS.map((d) => (
              <div className="pg-day" key={d.d}>
                <span className="pg-day__t">{d.t}</span>
                <span className="pg-day__d">{d.d}</span>
                <ul>{d.items.map((it) => (<li key={it}>{it}</li>))}</ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHAT'S INCLUDED */}
      <section className="pg-section">
        <div className="pg-wrap">
          <div className="pg-cols">
            <div>
              <p className="cs-eyebrow" style={{ marginBottom: 14 }}>What's Included</p>
              <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-h1)", color: "var(--text-primary)", maxWidth: "13ch" }}>Everything you need to lead.</h2>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--type-body)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)", marginTop: "var(--space-4)", maxWidth: "40ch" }}>
                A complete grounding in the instruments, the method, and the business of sound, so you leave able to host a sound bath, not just attend one.
              </p>
              <div style={{ marginTop: "var(--space-6)", display: "flex", gap: "var(--space-4)", flexWrap: "wrap" }}>
                <StButton variant="primary" href={ST_SIGNUP} target="_blank" rel="noopener">Reserve Your Place</StButton>
                <StButton variant="outline-dark" href={ST_PRIVATE}>1:1 Training</StButton>
              </div>
            </div>
            <div style={{ alignSelf: "start" }}>
              <ul className="pg-checks">
                {ST_INCLUDES.map((f) => (<li key={f}><StCheck />{f}</li>))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT IS A SOUND BATH */}
      <section className="pg-section pg-section--warm">
        <div className="pg-wrap">
          <div className="pg-cols pg-cols--media">
            <div className="pg-media" style={{ direction: "ltr" }}><StPlaceholder tone="deep" label="Guests resting during a sound bath" showLabel={false} id="st-method" src="assets/scene/st-method.jpg" /></div>
            <div style={{ alignSelf: "center" }}>
              <p className="cs-eyebrow" style={{ marginBottom: 14 }}>The Calming Spot Method</p>
              <div className="pg-prose">
                <p>A sound bath is a healing journey that relaxes the body, calms the mind, and quiets the subconscious, letting your body's own systems do their work. We work with a wide range of ancient instruments: planetary-tuned gongs, crystal and Tibetan singing bowls, drums, rainstick, and more.</p>
                <p>Alongside the instruments, you'll learn the scripts and guided meditation that carry a room into a deeper state of rest. By the end of the training you'll know our method start to finish, and have the know-how to host a sound bath meditation of your own.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* REIKI CROSS-SELL */}
      <section className="st-reiki">
        <div className="st-reiki__media"><StPlaceholder tone="deep" label="Reiki healing session" showLabel={false} id="st-reiki" /></div>
        <div className="st-reiki__scrim" aria-hidden="true" />
        <div className="pg-wrap st-reiki__inner">
          <p className="cs-eyebrow" style={{ color: "var(--cs-sand)", marginBottom: 14 }}>Also Offered</p>
          <h2 className="st-reiki__title">Reiki Training</h2>
          <p className="st-reiki__lead">Learn to channel energy and hold healing space, through every level of our Reiki certification. A natural companion to sound, or a path all its own.</p>
          <div style={{ display: "flex", gap: "var(--space-4)", flexWrap: "wrap" }}>
            <StButton variant="light" href="reiki.html">Explore Reiki Training</StButton>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="pg-section">
        <div className="pg-narrow" style={{ textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-display)", color: "var(--text-primary)", marginBottom: 18 }}>Accept your full potential.</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--type-lead)", lineHeight: "var(--leading-snug)", color: "var(--text-secondary)", maxWidth: "46ch", margin: "0 auto 28px" }}>
            Two weekends a season, twelve trainees at a time. When a spot calls to you, take it. $999, with a payment plan if you need one.
          </p>
          <div style={{ display: "inline-flex", gap: "var(--space-4)", flexWrap: "wrap", justifyContent: "center" }}>
            <StButton variant="primary" size="lg" href={ST_SIGNUP} target="_blank" rel="noopener">Enroll for June 26 to 28</StButton>
            <StButton variant="outline-dark" size="lg" href={ST_SIGNUP_2} target="_blank" rel="noopener">Enroll for July 31 to Aug 2</StButton>
          </div>
        </div>
      </section>
    </>
  );
}

stRender(<SoundTrainingPage />);