const { Button, Eyebrow } = window.NRTRDesignSystem_47db9c;

function ContrastSuite() {
  return (
    <section id="suite" style={{ background: "var(--espresso)", color: "var(--linen)", scrollMarginTop: "var(--nav-h)" }}>
      <div
        style={{
          maxWidth: "var(--container)",
          margin: "0 auto",
          padding: "var(--section-pad-lg) var(--space-6)",
          display: "grid",
          gridTemplateColumns: "1.05fr 0.95fr",
          gap: "clamp(32px, 6vw, 80px)",
          alignItems: "center",
        }}
        className="nrtr-suite-grid"
      >
        <div data-reveal-group>
          <Eyebrow tone="dark" tracking="0.18em">The Contrast Suite</Eyebrow>
          <h2
            style={{
              fontFamily: "var(--font-display)",
              fontWeight: 400,
              fontSize: "var(--fs-section-lg)",
              lineHeight: 1.08,
              letterSpacing: "-0.01em",
              margin: "18px 0 20px",
              color: "var(--linen)",
              maxWidth: "18ch",
            }}
          >
            Heat, cold, and the kind of conversation that only happens when phones are away.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "18px", lineHeight: 1.6, color: "var(--text-on-dark-muted)", maxWidth: "44ch" }}>
            Steam lifting off sauna stones. The surface of cold water. Regulars
            who know each other by name. The community that forms here is part of
            what you didn't know you were looking for.
          </p>
          <div style={{ marginTop: "34px", display: "flex", alignItems: "center", gap: "20px", flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" href="membership.html">Explore Membership</Button>
            <span style={{ fontFamily: "var(--font-body)", fontSize: "15px", color: "var(--text-on-dark-muted)" }}>
              Founding memberships from <span style={{ color: "var(--linen)" }}>$225/mo</span>
            </span>
          </div>
        </div>
        <div
          data-img-reveal
          style={{
            position: "relative",
            borderRadius: "var(--radius-xl)",
            overflow: "hidden",
            border: "1px solid var(--line-on-dark)",
            minHeight: 420,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
          }}
        >
          <img
            src="assets/photography/suite-communal.jpg"
            alt="Visualization — the NRTR contrast suite"
            loading="lazy"
            decoding="async"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 42%" }}
          />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(24,16,10,0) 0%, rgba(24,16,10,0.10) 45%, rgba(20,14,9,0.86) 100%)" }} />
          <div style={{ position: "relative", padding: "var(--space-6)", marginTop: "auto" }}>
            <div style={{ display: "flex", gap: "36px", flexWrap: "wrap" }}>
              {[["190", "°F", "Sauna"], ["40", "°F", "Cold Plunge"], ["30", "", "Sauna capacity"]].map(([v, u, l]) => (
                <div key={l} style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: "5px" }}>
                    <span data-countup style={{ fontFamily: "var(--font-display)", fontSize: "44px", lineHeight: 1, color: "var(--linen)", letterSpacing: "-0.01em" }}>{v}</span>
                    {u && <span style={{ fontFamily: "var(--font-body)", fontSize: "16px", color: "var(--camel)" }}>{u}</span>}
                  </div>
                  <span style={{ fontFamily: "var(--font-label)", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", fontSize: "11px", color: "var(--text-on-dark-muted)" }}>{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.ContrastSuite = ContrastSuite;