/* Location page content. */

const { Button: LoButton, ImagePlaceholder: LoPlaceholder } = window.CalmingSpotDesignSystem_cdab4b;
const { PageHero: LoHero, renderPage: loRender } = window;

const LOCS = [
  {
    name: "Candlelight Studio", tone: "deep", img: "loc-studio.jpg",
    addr: "1540 6th Street, Santa Monica, CA 90401",
    body: "Our intimate candlelit space in downtown Santa Monica, on 6th and Broadway. A dark, quiet room designed for immersive sound, it holds up to 24 guests.",
    parking: "2-hour free street parking along 6th Street, plus metered parking across the street at 6th & Colorado (1664 Colorado).",
    map: "https://maps.google.com/?q=1540+6th+Street+Santa+Monica+CA+90401",
  },
  {
    name: "Santa Monica Beach", tone: "warm", img: "loc-beach.jpg",
    addr: "2400 Ocean Front Walk, Santa Monica, CA 90405",
    body: "Open-air sunset sound baths next to Lifeguard Tower 24, Perry's Café and the volleyball courts are right beside us. Surrounded by ocean, sky, and open air.",
    parking: "Parking is $1 per hour in the adjacent beach lot.",
    map: "https://maps.google.com/?q=2400+Ocean+Front+Walk+Santa+Monica+CA+90405",
  },
];

function LocationPage() {
  return (
    <>
      <LoHero
        crumb="Location"
        eyebrow="Where We Gather"
        title="Two places to slow down."
        lead="A candlelit studio downtown, and the open sand at sunset. Both a few minutes from the heart of Santa Monica."
        mediaLabel="Santa Monica coastline at dusk"
        decor="📍"
      />

      {LOCS.map((loc, i) => (
        <section key={loc.name} className={["pg-section", i % 2 ? "pg-section--warm" : ""].filter(Boolean).join(" ")}>
          <div className="pg-wrap">
            <div className="pg-cols pg-cols--media" style={{ direction: i % 2 ? "rtl" : "ltr" }}>
              <div className="pg-media" style={{ direction: "ltr" }}>
                <LoPlaceholder tone={loc.tone} label={loc.name} showLabel={false} src={`assets/scene/${loc.img}`} />
              </div>
              <div style={{ direction: "ltr", display: "flex", flexDirection: "column", gap: "var(--space-4)", alignSelf: "center" }}>
                <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-h1)", color: "var(--text-primary)" }}>{loc.name}</h2>
                <p style={{ fontFamily: "var(--font-ui)", color: "var(--accent)", letterSpacing: "0.04em" }}>{loc.addr}</p>
                <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--type-body)", lineHeight: "var(--leading-body)", color: "var(--text-secondary)", maxWidth: "46ch" }}>{loc.body}</p>
                <p className="pg-note" style={{ maxWidth: "46ch", lineHeight: 1.5 }}><strong style={{ color: "var(--text-primary)", fontWeight: 600 }}>Parking.</strong> {loc.parking}</p>
                <div style={{ marginTop: "var(--space-2)" }}>
                  <LoButton variant="secondary" size="sm" href={loc.map} target="_blank" rel="noopener">Get Directions</LoButton>
                </div>
              </div>
            </div>
          </div>
        </section>
      ))}

      <section className="pg-section pg-section--bright">
        <div className="pg-narrow" style={{ textAlign: "center" }}>
          <p className="cs-eyebrow" style={{ justifyContent: "center", display: "inline-flex", marginBottom: 16 }}>Before You Arrive</p>
          <h2 style={{ fontFamily: "var(--font-headline)", fontSize: "var(--type-h1)", color: "var(--text-primary)", marginBottom: 18 }}>Come a few minutes early.</h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "var(--type-lead)", lineHeight: "var(--leading-snug)", color: "var(--text-secondary)", maxWidth: "52ch", margin: "0 auto 28px" }}>
            Give yourself time to check in, slip off your shoes, and settle onto your mat. We provide
            everything you need. Arrivals more than 5 minutes late can't be admitted, out of respect for
            the room.
          </p>
          <LoButton variant="primary" href="schedule.html">Book a Class</LoButton>
        </div>
      </section>
    </>
  );
}

loRender(<LocationPage />);