/* NRTR — "the space" statement band (photo-free; the real facility opens 2027). */
const { Eyebrow } = window.NRTRDesignSystem_47db9c;

function StepInside() {
  const principles = [
    ["Warm plaster & cedar", "Hand-troweled walls and cedar throughout — a room that softens the moment you enter."],
    ["Communal by design", "Built around the suite, where the reset becomes a ritual you share."],
    ["Every detail considered", "From heated stone floors to the towel in your hand, nothing is an afterthought."],
  ];
  return (
    <section aria-label="The space" style={{ position: "relative", background: "var(--espresso)", color: "var(--linen)", overflow: "hidden" }}>
      <img
        src="assets/icons/mark-inverted-camel.svg"
        alt=""
        aria-hidden="true"
        style={{ position: "absolute", right: "-5%", top: "50%", transform: "translateY(-50%)", height: "150%", width: "auto", opacity: 0.08, pointerEvents: "none" }}
      />
      <div data-reveal-group style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(64px, 9vw, 120px) var(--space-6)" }}>
        <Eyebrow tone="dark" tracking="0.18em">65 Church Street · Montclair</Eyebrow>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section-lg)", lineHeight: 1.06, letterSpacing: "-0.01em", color: "var(--linen)", margin: "16px 0 0", maxWidth: "20ch" }}>
          A space built to feel like the treatment.
        </h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.1rem, 1.6vw, 1.35rem)", lineHeight: 1.55, color: "var(--linen)", opacity: 0.86, margin: "18px 0 0", maxWidth: "50ch" }}>
          We're designing 65 Church Street from the ground up — warm, quiet, and unhurried — with the same intention we bring to the care itself. Doors open spring 2027.
        </p>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "clamp(24px, 4vw, 44px)", marginTop: "clamp(40px, 6vw, 64px)" }}>
          {principles.map(([t, d]) => (
            <div key={t} style={{ borderTop: "1px solid var(--line-on-dark)", paddingTop: "20px" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(1.2rem, 1.8vw, 1.5rem)", color: "var(--linen)", marginBottom: "8px" }}>{t}</div>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: "var(--text-on-dark-muted)", margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: "clamp(36px, 5vw, 52px)" }}>
          <a href="experience.html" style={{ textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "10px", fontFamily: "var(--font-label)", fontSize: "13px", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--camel)", borderBottom: "1px solid rgba(183,142,103,0.5)", paddingBottom: "4px" }}>
            Explore the space
            <span aria-hidden="true">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

window.StepInside = StepInside;