/* NRTR — "follow along" social strip with the @nrtr.life material tiles. */
const { Button, Eyebrow } = window.NRTRDesignSystem_47db9c;

function SocialStrip() {
  return (
    <section style={{ background: "var(--surface-raised)", borderTop: "1px solid var(--line-soft)" }}>
      <div
        data-reveal-group
        style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)", display: "grid", gridTemplateColumns: "1fr 0.8fr", gap: "clamp(28px, 6vw, 80px)", alignItems: "center" }}
        className="nrtr-two"
      >
        <div>
          <Eyebrow>Follow along</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section-lg)", lineHeight: 1.08, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "18ch" }}>
            Watch the space come to life.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "clamp(1.02rem, 1.4vw, 1.2rem)", lineHeight: 1.6, color: "var(--text-muted)", margin: "18px 0 0", maxWidth: "48ch" }}>
            We're documenting the build, the practices, and the science on the way to opening. Follow <span style={{ color: "var(--text-strong)" }}>@nrtr.life</span> and be first to see it.
          </p>
          <div style={{ marginTop: "30px" }}>
            <Button variant="primary" size="lg" href="https://www.instagram.com/nrtr.life/" target="_blank" rel="noopener noreferrer">Follow @nrtr.life</Button>
          </div>
        </div>
        <div data-img-reveal style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px" }}>
          <div style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)", aspectRatio: "3 / 4" }}>
            <img
              src="assets/photography/materials/material-wood-panelling.jpg"
              alt="Visualization — warm vertical wood panelling, an NRTR material"
              loading="lazy"
              decoding="async"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}
            />
          </div>
          <div style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)", aspectRatio: "3 / 4", marginTop: "clamp(24px, 5vw, 48px)" }}>
            <img
              src="assets/photography/materials/material-stone.jpg"
              alt="Visualization — natural stone, an NRTR material"
              loading="lazy"
              decoding="async"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}
            />
          </div>
        </div>
      </div>
    </section>
  );
}

window.SocialStrip = SocialStrip;