/* Section 7, social proof. Section 11, locations.
   Section 12, pricing. Section 13, final CTA. */

const { ImagePlaceholder: LocPlaceholder, Button: LocButton, Eyebrow: LocEyebrow, SectionHeading: LocHeading, PricingCard: LocPricingCard, SoundWave: LocWave } = window.CalmingSpotDesignSystem_cdab4b;
const { Reveal: LocReveal, Section: LocSection } = window;

/* Featured quote is the founder's own words (verified, Calming Spot About
   page). Stats are verifiable brand facts. Replace the small slot with real
   guest reviews from Google / Momence before launch, do NOT invent reviews. */
function SocialProof() {
  const stats = [
    { v: "2021", l: "Founded in Santa Monica" },
    { v: "100s", l: "Sound healers certified worldwide" },
    { v: "Santa Monica", l: "Studio & beach sessions" },
  ];
  const partners = [
    ["L'Oréal Paris", "loreal"],
    ["YouTube", "youtube"],
    ["Edelman Smithfield", "edelman"],
    ["UCLA", "ucla"],
    ["Women's Wear Daily", "wwd"],
    ["Santa Monica Police", "smpd"],
    ["Glacéau Smartwater", "smartwater"],
    ["NYX Professional Makeup", "nyx"],
    ["MMGY Wagstaff", "wagstaff"],
    ["Boxed Water", "boxedwater"],
    ["Two Chairs", "twochairs"],
    ["The Wonderful Company", "wonderful"],
    ["Mara Beauty", "marabeauty"],
    ["DaVita Kidney Care", "davita"],
    ["Nike", "nike"],
    ["IKEA", "ikea"],
  ];
  return (
    <LocSection tone="warm" className="cs-proof">
      <LocReveal className="cs-proof__quote-wrap">
        <blockquote className="cs-proof__quote">
          Pausing in a world that rushes<br/>endlessly is an act of quiet rebellion.
        </blockquote>
        <cite className="cs-proof__cite">Sara Sofia Bousiali, Co-Founder, Calming Spot</cite>
      </LocReveal>
      <LocReveal className="cs-proof__stats" delay={100}>
        {stats.map((s) => (
          <div key={s.l} className="cs-proof__stat">
            <span className="cs-proof__stat-v">{s.v}</span>
            <span className="cs-proof__stat-l">{s.l}</span>
          </div>
        ))}
      </LocReveal>
      <LocReveal className="cs-partners" delay={160}>
        <span className="cs-partners__eyebrow">Among partners served</span>
        <div className="cs-partners__row">
          {partners.map(([name, file]) => (
            <div className="cs-partners__logo" key={name} title={name}>
              {file
                ? <img className="cs-partners__img" src={`assets/partners/${file}.png`} alt={name} loading="lazy" />
                : <LocPlaceholder kind="Logo" fit="contain" tone="sand" label={name} id={`partner-${name.toLowerCase()}`} />}
            </div>
          ))}
        </div>
      </LocReveal>
    </LocSection>
  );
}

const LOCATIONS = [
  { name: "Candlelight Studio", address: "1540 6th Street, Santa Monica", mood: "candlelight", img: "loc-studio.jpg",
    desc: "A dark, intimate space designed for immersive sound.", parking: "Street & nearby structure parking" },
  { name: "Santa Monica Beach", address: "Near Lifeguard Tower 24", mood: "ocean", img: "loc-beach.jpg",
    desc: "Sunset sound baths surrounded by ocean, sky, and open air.", parking: "Metered beach lots adjacent" },
];

function Locations() {
  return (
    <LocSection id="locations" tone="dark" className="cs-loc">
      <LocReveal className="cs-loc__head">
        <LocHeading eyebrow="Where We Gather" title="Two places to slow down." />
      </LocReveal>
      <div className="cs-loc__grid">
        {LOCATIONS.map((loc, i) => (
          <LocReveal as="article" key={loc.name} className="cs-loc__card" delay={i * 100}>
            <div className="cs-loc__media">
              <LocPlaceholder tone="warm" label={loc.name} showLabel={false} src={`assets/scene/${loc.img}`} />
            </div>
            <div className="cs-loc__body">
              <h3 className="cs-loc__name">{loc.name}</h3>
              <p className="cs-loc__addr">{loc.address}</p>
              <p className="cs-loc__desc">{loc.desc}</p>
              <div className="cs-loc__foot">
                <span className="cs-loc__park">{loc.parking}</span>
                <a className="cs-loc__link" href="location.html">
                  Get directions
                  <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>
              </div>
            </div>
          </LocReveal>
        ))}
      </div>
    </LocSection>
  );
}

function Pricing() {
  return (
    <LocSection id="pricing" tone="ivory" className="cs-pricing">
      <LocReveal className="cs-pricing__head">
        <LocHeading
          onLight align="center"
          eyebrow="Membership & Pricing"
          title="Pricing."
          lead="Choose the rhythm that fits. Class packs never expire and cover all classes, including Full Moon and New Moon sessions."
        />
      </LocReveal>
      <LocReveal className="cs-pricing__grid" delay={80}>
        <LocPricingCard
          name="Single Class" price="$55" unit="/ drop-in"
          note="Perfect for first-timers or occasional visitors. One class, no commitment."
          features={["Any class on the schedule", "No commitment"]}
          cta="Buy Single Class" ctaVariant="outline-dark" href="https://momence.com/m/11356"
        />
        <LocPricingCard
          name="Unlimited" price="$139" unit="/ month"
          note="The best value for weekly regulars. Month-to-month, cancel anytime."
          features={["Every sound bath & meditation", "Beach sessions included", "Cancel anytime"]}
          cta="Become a Member" ctaVariant="outline-dark" href="https://momence.com/m/11225"
        />
        <LocPricingCard
          name="5-Class Pack" price="$165" unit="Save $22 / class" featured badge="Most Popular"
          note="Our most-loved pack. 3- and 10-packs also available. Save up to 45%."
          features={["Shareable with friends & family", "Never expires", "3-pack $108 · 10-pack $300"]}
          cta="View Packs" href="https://momence.com/m/24398"
        />
      </LocReveal>
      <LocReveal className="cs-pricing__foot" delay={140}>
        <LocButton variant="ghost" href="pricing.html">View Full Pricing</LocButton>
      </LocReveal>
    </LocSection>
  );
}

function FinalCTA() {
  return (
    <section className="cs-final">
      <div className="cs-final__media">
        <LocPlaceholder tone="deep" label="Closing photo, sunset over the ocean" showLabel={false} src="assets/scene/closing.jpg" />
      </div>
      <div className="cs-final__scrim" aria-hidden="true" />
      <LocReveal className="cs-final__inner">
        <h2 className="cs-final__title">The world can wait<br/>for an hour.</h2>
        <p className="cs-final__lead">Choose your next experience and give yourself somewhere to return to.</p>
        <LocButton variant="light" size="lg" href="schedule.html">Book a Sound Bath</LocButton>
      </LocReveal>
    </section>
  );
}

Object.assign(window, { SocialProof, Locations, Pricing, FinalCTA });