/* About / Our Story page content. Narrative from Calming Spot Press Kit 2026. */

const { Button: AbButton, ImagePlaceholder: AbPlaceholder } = window.CalmingSpotDesignSystem_cdab4b;
const { PageHero: AbHero, renderPage: abRender } = window;

const AB_STATS = [
  ["2021", "Founded in Santa Monica"],
  ["50,000+", "Guests served"],
  ["2,500+", "Sound baths held"],
  ["4.9 ★", "Google rating, 100+ reviews"],
  ["100+", "Corporate events"],
];

const INSTRUMENTS = [
  ["Crystal singing bowls", "Tuned to specific notes that resonate with the body's energy centers."],
  ["Gong", "Deep, enveloping vibration you feel as much as hear."],
  ["Ocean drum", "The calming rhythm of waves, brought indoors."],
  ["Chimes & buffalo drum", "Soft melodic tones and grounding beats that round out the soundscape."],
];

function AboutPage() {
  return (
    <>
      <AbHero
        crumb="Our Story"
        eyebrow="The Calming Spot Story"
        title="Sound you don't just hear. Sound you feel."
        lead="A husband-and-wife team set out to make meditation mainstream, by building a place so beautiful that even the skeptics say yes. Founded in Santa Monica in 2021."
        mediaLabel="Beach sound bath at sunset near the Santa Monica Pier"
        mediaSrc="assets/scene/hero-about.jpg"
        scrim="light"
      />

      {/* INTRO */}
      <section className="pg-section">
        <div className="pg-narrow">
          <div className="pg-prose" style={{ maxWidth: "64ch", margin: "0 auto" }}>
            <p style={{ fontSize: "var(--type-lead)", color: "var(--text-primary)", lineHeight: "var(--leading-snug)" }}>
              Most people have never tried meditation. Not because they aren't interested, but because nothing has ever tempted them to walk through the door.
            </p>
            <p>Calming Spot is changing that. A candlelit sound bath studio in Santa Monica, it has quietly become one of the most attended sound bath destinations in the country, helping over 50,000 people slow down across more than 2,500 sessions. The approach is simple: make it so beautiful that even the skeptics say yes. Candles, crystal singing bowls, sunset beach sessions, and a space designed to feel like nothing else in your week. No chanting. No incense. Just sound, stillness, and a room full of people finally slowing down.</p>
          </div>
        </div>
      </section>

      {/* FOUNDERS PHOTO + STORY */}
      <section className="pg-section pg-section--warm">
        <div className="pg-wrap">
          <div className="ab-founders-lead">
            <div className="ab-founders-photo">
              <AbPlaceholder tone="deep" label="T.R. and Sara Gourley on the beach in Santa Monica" showLabel={false} id="about-founders" src="assets/scene/about-founders.jpg" />
            </div>
            <div className="ab-founders-copy">
              <p className="cs-eyebrow" style={{ marginBottom: 14 }}>The Founders</p>
              <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-h1)", color: "var(--text-primary)", lineHeight: 1.06, marginBottom: "var(--space-4)", maxWidth: "18ch" }}>A husband and wife, with one mission.</h2>
              <div className="pg-prose">
                <p>During the pandemic, T.R. and Sara Gourley felt something was missing, not just for themselves, but for everyone around them. There was no place to simply be still. No space where you didn't have to be productive or hit a target. So they built it.</p>
                <p>Sara's grandfather had Alzheimer's. He no longer recognized her name, but he still recognized sound and rhythm. That stayed with her, she knew sound could reach people in ways words cannot. T.R. had spent over a decade producing large-scale experiences across 18 countries. Together they began hosting sound baths on Santa Monica Beach. Friends came. Then strangers. Then crowds.</p>
                <p>The beach sessions grew into a studio tucked behind an unmarked door: candles, an all-black room, astrological mats, pillows and blankets waiting. Built on word of mouth, without outside funding, it became one of the most attended sound bath studios in the U.S.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* STATS */}
      <section className="pg-section">
        <div className="pg-wrap">
          <div className="ab-stats">
            {AB_STATS.map(([v, l]) => (
              <div className="ab-stat" key={l}>
                <span className="ab-stat__v">{v}</span>
                <span className="ab-stat__l">{l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FOUNDER BIOS */}
      <section className="pg-section pg-section--warm">
        <div className="pg-wrap">
          <div className="ab-bios">
            <article className="ab-bio">
              <div className="ab-bio__photo"><img src="assets/team/tr.jpg" alt="T.R. Gourley, Co-Founder" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></div>
              <span className="ab-bio__role">Co-Founder</span>
              <h3 className="ab-bio__name">T.R. Gourley</h3>
              <p className="ab-bio__body">T.R. spent over a decade creating and producing events across 18 countries, and that background in experience design is what makes Calming Spot feel different the moment you walk in. A lifelong meditator, he believes meditation will never go mainstream until it looks and feels like something people actually want to do. He leads sessions and runs the business side: marketing, partnerships, corporate wellness, and growth.</p>
              <blockquote className="ab-bio__quote">"We are not trying to convince anyone that meditation works. We just built a place so beautiful that people want to try it."</blockquote>
            </article>
            <article className="ab-bio">
              <div className="ab-bio__photo"><img src="assets/team/sara.jpg" alt="Sara Bousiali-Gourley, Co-Founder" loading="lazy" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} /></div>
              <span className="ab-bio__role">Co-Founder</span>
              <h3 className="ab-bio__name">Sara Bousiali-Gourley</h3>
              <p className="ab-bio__body">Sara is the creative force behind the Calming Spot experience. With a background in philosophy and psychology, she developed her own technique and style of sound healing, created the studio's branding, and wrote the Science and Sound manual used in the teacher training. She has personally trained hundreds of sound healers and developed the Sonic Regulation Protocol, a framework combining vibrational precision, brainwave science, and poetic meditation.</p>
              <blockquote className="ab-bio__quote">"In a world that keeps you constantly stimulated, it is now revolutionary to just slow down."</blockquote>
            </article>
          </div>
        </div>
      </section>

      {/* METHOD */}
      <section className="pg-section">
        <div className="pg-wrap">
          <p className="cs-eyebrow" style={{ marginBottom: 14 }}>Our Method</p>
          <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-h1)", color: "var(--text-primary)", maxWidth: "20ch", marginBottom: 16 }}>Science and sound, woven together.</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--type-lead)", lineHeight: "var(--leading-snug)", color: "var(--text-secondary)", maxWidth: "60ch", marginBottom: 44 }}>
            Carefully layered sound encourages the mind to shift from busy beta brainwaves toward the slower
            alpha and theta states linked to deep rest and release. Gentle, intentional breathing settles the
            nervous system. The result is a reset, quieter, clearer, more connected.
          </p>
          <div className="pg-grid2">
            {INSTRUMENTS.map(([n, d]) => (
              <div className="pg-card" key={n}>
                <h3 className="pg-card__name">{n}</h3>
                <p className="pg-card__desc">{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="pg-section pg-section--bright">
        <div className="pg-narrow" style={{ textAlign: "center" }}>
          <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-display)", color: "var(--text-primary)", marginBottom: 18 }}>Come as you are.</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--type-lead)", color: "var(--text-secondary)", maxWidth: "48ch", margin: "0 auto 28px" }}>
            No experience necessary. We provide the mats, blankets, and pillows, you just bring yourself.
          </p>
          <AbButton variant="primary" size="lg" href="schedule.html">Book a Class</AbButton>
        </div>
      </section>
    </>
  );
}

abRender(<AboutPage />);