/* Section 3, brand introduction (ivory split). Section 5, the method (dark).
   Section 6, first visit (ivory). */

const { ImagePlaceholder: StoryPlaceholder, Button: StoryButton, Eyebrow: StoryEyebrow, SectionHeading: StoryHeading, SoundWave: StoryWave } = window.CalmingSpotDesignSystem_cdab4b;
const { Reveal: StoryReveal, Section: StorySection } = window;
const { useState: useStoryState } = React;

function BrandIntro() {
  const identifiers = ["Music led", "Sensory", "Welcoming to everyone"];
  return (
    <StorySection id="story" tone="ivory" className="cs-intro">
      <div className="cs-intro__grid">
        <StoryReveal className="cs-intro__media">
          <div className="cs-intro__media-frame">
            <StoryPlaceholder tone="deep" label="Studio interior, candlelight & bowls" src="assets/scene/studio-intro.jpg" />
          </div>
        </StoryReveal>
        <StoryReveal className="cs-intro__copy" delay={120}>
          <StoryHeading
            onLight
            eyebrow="The Calming Spot Experience"
            title={<>Sound you don't<br/>just hear. <em>Sound you feel.</em></>}
            lead="Calming Spot creates immersive sound bath experiences designed around music, guided meditation, vibration, candlelight, and connection. Each session gives you space to step away from the noise and return to yourself."
          />
          <ul className="cs-intro__tags">
            {identifiers.map((t) => (
              <li key={t} className="cs-intro__tag">{t}</li>
            ))}
          </ul>
          <StoryButton variant="outline-dark" href="#method">Discover Our Method</StoryButton>
        </StoryReveal>
      </div>
    </StorySection>
  );
}

const METHOD_STEPS = [
  { n: "01", title: "Arrive", body: "Settle into your space with everything prepared for you." },
  { n: "02", title: "Breathe", body: "Slow the pace through grounding guidance and intentional breath." },
  { n: "03", title: "Listen", body: "Experience layers of music, voice, vibration, and sound." },
  { n: "04", title: "Return", body: "Leave feeling quieter, clearer, and more connected to yourself." },
];

function Method() {
  return (
    <StorySection id="method" tone="ocean" className="cs-method">
      <StoryReveal className="cs-method__head">
        <StoryEyebrow>The Method</StoryEyebrow>
        <h2 className="cs-method__title">More than a sound bath.</h2>
      </StoryReveal>
      <div className="cs-method__grid">
        {METHOD_STEPS.map((s, i) => (
          <StoryReveal as="div" key={s.n} className="cs-method__step" delay={i * 90}>
            <span className="cs-method__num">{s.n}</span>
            <h3 className="cs-method__step-title">{s.title}</h3>
            <p className="cs-method__step-body">{s.body}</p>
          </StoryReveal>
        ))}
      </div>
    </StorySection>
  );
}

const FIRST_VISIT = [
  { q: "What should I wear?", a: "Anything comfortable. You'll be lying down for most of the session, soft layers are perfect." },
  { q: "What happens during a session?", a: "A 50-minute journey of guided breath, crystal singing bowls, and layered music. You rest; the sound does the work." },
  { q: "Do I need meditation experience?", a: "None at all. There's no right way to experience a sound bath, beginners and first-timers are always welcome." },
  { q: "What should I bring?", a: "Just yourself. We provide the mats, blankets, pillows, and everything you need to settle in." },
];

function FirstVisit() {
  const [open, setOpen] = useStoryState(0);
  return (
    <StorySection id="first-visit" tone="ivory" className="cs-first">
      <div className="cs-first__grid">
        <StoryReveal className="cs-first__intro">
          <StoryHeading
            onLight
            eyebrow="Your First Visit"
            title={<>Your first sound bath<br/>should feel simple.</>}
            lead="No experience is necessary. Come as you are. We provide the mats, blankets, pillows, and everything you need to settle in."
          />
          <StoryButton variant="outline-dark" href="#schedule">Plan Your First Visit</StoryButton>
        </StoryReveal>
        <StoryReveal className="cs-first__faq" delay={100}>
          {FIRST_VISIT.map((item, i) => (
            <div key={i} className={["cs-faq", open === i ? "cs-faq--open" : ""].filter(Boolean).join(" ")}>
              <button className="cs-faq__q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="cs-faq__icon" aria-hidden="true" />
              </button>
              <div className="cs-faq__a"><p>{item.a}</p></div>
            </div>
          ))}
        </StoryReveal>
      </div>
    </StorySection>
  );
}

Object.assign(window, { BrandIntro, Method, FirstVisit });