/* Section 1, cinematic hero. Section 2, immediate booking module. */

const { ImagePlaceholder: HeroPlaceholder, Button: HeroButton, Eyebrow: HeroEyebrow } = window.CalmingSpotDesignSystem_cdab4b;
const { Reveal: HeroReveal, Section: HeroSection } = window;
const HeroMomence = window.MomenceScheduleEmbed;
/* Our on-site schedule page (live Momence embed). */
const SCHEDULE_PAGE = "schedule.html";


function Hero() {
  return (
    <section className="cs-hero" id="top">
      {/* REPLACE: hero photo — candle flames, bowls, guests settling onto
          mats, Santa Monica sunset. */}
      <div className="cs-hero__media">
        <HeroPlaceholder tone="deep" label="Hero photo, candlelight, bowls, sunset" showLabel={false} src="assets/scene/hero-home.jpg" />
      </div>
      <div className="cs-hero__scrim" aria-hidden="true" />

      <div className="cs-hero__content">
        <HeroEyebrow className="cs-hero__eyebrow" tick>Sound Baths in Santa Monica</HeroEyebrow>
        <h1 className="cs-hero__title">Come back<br />to yourself.</h1>
        <p className="cs-hero__lead">
          Immersive sound, candlelight, guided stillness, and ocean air, created to help you slow down, reconnect, and feel fully present.
        </p>
        <div className="cs-hero__actions">
          <HeroButton variant="light" size="lg" href={SCHEDULE_PAGE}>Book a Class</HeroButton>
          <HeroButton variant="ghost" href="#story">Explore the Experience</HeroButton>
        </div>
      </div>

      <a className="cs-hero__scroll" href="#schedule" aria-label="Scroll to upcoming classes">
        <span className="cs-hero__scroll-label">Scroll</span>
        <span className="cs-hero__scroll-line" aria-hidden="true" />
      </a>
    </section>
  );
}

function BookingModule() {
  return (
    <HeroSection id="schedule" tone="warm" className="cs-book">
      <HeroReveal className="cs-book__head">
        <div>
          <HeroEyebrow>Class Schedule</HeroEyebrow>
          <h2 className="cs-book__title">Find your next moment of calm.</h2>
        </div>
        <a className="cs-book__all" href={SCHEDULE_PAGE}>
          Open full schedule page
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M5 12h14M13 6l6 6-6 6" />
          </svg>
        </a>
      </HeroReveal>
      <HeroReveal className="cs-book__embed" delay={80}>
        <HeroMomence />
      </HeroReveal>
    </HeroSection>
  );
}

Object.assign(window, { Hero, BookingModule });