/* Section 4, signature experiences. Section 8, private events.
   Section 9, training. Section 10, science & sound. */

const { ExperienceCard: ExpCard, ImagePlaceholder: ExpPlaceholder, Button: ExpButton, Eyebrow: ExpEyebrow, SectionHeading: ExpHeading, SoundWave: ExpWave } = window.CalmingSpotDesignSystem_cdab4b;
const { Reveal: ExpReveal, Section: ExpSection } = window;

const EXPERIENCES = [
  { name: "Candlelight Sound Bath", meta: "50 min · Studio", mood: "candlelight", img: "exp-candlelight.jpg",
    description: "An intimate journey through sound, meditation, and vibration inside our candlelit Santa Monica studio." },
  { name: "Beach Sound Bath", meta: "Seasonal · Sunset", mood: "ocean", img: "exp-beach.jpg",
    description: "A sunset experience where sound, ocean air, and the natural rhythm of the waves meet." },
  { name: "Teacher Training", meta: "Certification · LA & online", mood: "studio", href: "sound-training.html", img: "exp-teacher-training.jpg",
    description: "Go deeper, learn the instruments, the science, and the art of holding space, and guide experiences of your own." },
];

function SignatureExperiences() {
  return (
    <ExpSection id="experiences" tone="dark" className="cs-exps">
      <ExpReveal className="cs-exps__head">
        <ExpHeading
          eyebrow="Signature Experiences"
          title={<>Three ways to <em>arrive.</em></>}
          lead="Each is a distinct experience, not an ordinary class. Choose the one that meets you where you are."
        />
      </ExpReveal>
      <div className="cs-exps__grid">
        {EXPERIENCES.map(({ img, ...e }, i) => (
          <ExpReveal as="div" key={e.name} delay={i * 100}>
            <ExpCard {...e} image={<img src={`assets/scene/${img}`} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />} cta="Explore" href={e.href || "#schedule"} />
          </ExpReveal>
        ))}
      </div>
    </ExpSection>
  );
}

function PrivateEvents() {
  return (
    <section id="private" className="cs-private">
      <div className="cs-private__media">
        <ExpPlaceholder tone="deep" label="Private group event, corporate / celebration" showLabel={false} src="assets/scene/private-event.jpg" fit="contain" objectPosition="center" />
      </div>
      <div className="cs-private__scrim" aria-hidden="true" />
      <div className="cs-container cs-private__inner">
        <ExpReveal className="cs-private__copy">
          <ExpEyebrow>Private &amp; Corporate Experiences</ExpEyebrow>
          <h2 className="cs-private__title">Create a moment<br/>people will remember.</h2>
          <p className="cs-private__lead">
            From intimate celebrations and bridal gatherings to corporate wellness and large community
            events, Calming Spot creates private sound experiences designed around your group.
          </p>
          <div className="cs-private__actions">
            <ExpButton variant="light" href="private-events.html">Explore Private Events</ExpButton>
            <ExpButton variant="on-deep" href="mailto:hello@calmingspot.com">Make an Inquiry</ExpButton>
          </div>
          <p className="cs-private__clients">
            Trusted by L'Oréal · NYX Cosmetics · UCLA · Edelman · City of Santa Monica · Smartwater
          </p>
        </ExpReveal>
      </div>
    </section>
  );
}

const TRAININGS = [
  { name: "Sound Healer Training", mood: "studio", href: "sound-training.html", img: "train-sound-healer.jpg",
    description: "Our flagship certification. Learn the instruments, the science, and the art of holding space, online and in person in Los Angeles.",
    meta: "Certification", cta: "Explore Sound Training" },
  { name: "Reiki Training", mood: "moon", href: "reiki.html", img: "train-reiki.jpg",
    description: "Develop a confident, grounded energy practice to complement your work with sound and presence.",
    meta: "Levels I-III", cta: "Explore Reiki Training" },
];

function Training() {
  return (
    <ExpSection id="training" tone="warm" className="cs-train">
      <ExpReveal className="cs-train__head">
        <ExpHeading
          eyebrow="Teacher Training"
          title="Learn the art of creating space through sound."
          lead="Immersive training designed for those who want to understand sound more deeply and confidently guide experiences of their own."
        />
      </ExpReveal>
      <div className="cs-train__grid">
        {TRAININGS.map((t, i) => (
          <ExpReveal as="article" key={t.name} className="cs-train__card" delay={i * 100}>
            <div className="cs-train__media">
              <ExpPlaceholder tone="warm" label={t.name} showLabel={false} src={`assets/scene/${t.img}`} />
            </div>
            <div className="cs-train__body">
              <span className="cs-train__meta">{t.meta}</span>
              <h3 className="cs-train__name">{t.name}</h3>
              <p className="cs-train__desc">{t.description}</p>
              <ExpButton variant="secondary" size="sm" href={t.href}>{t.cta}</ExpButton>
            </div>
          </ExpReveal>
        ))}
      </div>
    </ExpSection>
  );
}

function Science() {
  return (
    <ExpSection id="science" tone="ocean" className="cs-science">
      <div className="cs-science__grid">
        <ExpReveal className="cs-science__copy">
          <ExpEyebrow>The Living Lab</ExpEyebrow>
          <h2 className="cs-science__title">Where ancient practice meets modern curiosity.</h2>
          <p className="cs-science__lead">
            We are interested in how sound, music, meditation, and sensory environments influence the
            way people feel. Through our Living Lab, Calming Spot welcomes thoughtful research and
            collaboration exploring sound, stress, rest, and emotional well-being.
          </p>
          <ExpButton variant="secondary" href="#science">Explore Science &amp; Sound</ExpButton>
        </ExpReveal>
        <ExpReveal className="cs-science__media" delay={120}>
          <ExpPlaceholder tone="warm" label="Headphone sound bath by the ocean" showLabel={false} src="assets/scene/science-headphones.jpg" />
        </ExpReveal>
      </div>
    </ExpSection>
  );
}

Object.assign(window, { SignatureExperiences, PrivateEvents, Training, Science });