const { Card, Badge, Button, Eyebrow } = window.NRTRDesignSystem_47db9c;

const srOnly = { position: "absolute", width: "1px", height: "1px", padding: 0, margin: "-1px", overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap", border: 0 };

function TierCard({ name, forWhom, founding, regular, includes, highlight, onBook }) {
  return (
    <Card tone="raised" padding="0" style={{ overflow: "hidden", display: "flex", flexDirection: "column", borderColor: highlight ? "var(--terracotta)" : "var(--line-soft)" }}>
      {highlight && (
        <div style={{ background: "var(--terracotta)", color: "var(--linen)", fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", textAlign: "center", padding: "8px" }}>
          Most complete
        </div>
      )}
      <div style={{ padding: "var(--space-6)", display: "flex", flexDirection: "column", flex: 1 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "26px", color: "var(--text-strong)", margin: 0 }}>{name}</h3>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.55, color: "var(--text-muted)", margin: "8px 0 0", minHeight: "3em" }}>{forWhom}</p>

        <div style={{ margin: "20px 0 0", display: "flex", alignItems: "baseline", gap: "8px" }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: "46px", lineHeight: 1, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>${founding}</span>
          <span style={{ fontFamily: "var(--font-body)", fontSize: "16px", color: "var(--text-muted)" }}>/mo</span>
        </div>
        <div style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--text-brand)", margin: "8px 0 0" }}>
          Founding rate · first year
        </div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--text-muted)", margin: "4px 0 0" }}>
          ${regular}/mo thereafter
        </div>

        <div style={{ margin: "20px 0", height: 1, background: "var(--line-soft)" }} />
        <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "11px", flex: 1 }}>
          {includes.map((it) => {
            const t = typeof it === "string" ? it : it.text;
            const sub = typeof it === "object" && it.sub;
            return (
              <li key={t} style={{ display: "flex", alignItems: "baseline", gap: "10px", fontFamily: "var(--font-body)", fontSize: sub ? "14px" : "15px", lineHeight: 1.5, color: sub ? "var(--text-muted)" : "var(--text-body)", paddingLeft: sub ? "22px" : 0 }}>
                <span aria-hidden="true" style={{ flexShrink: 0, width: sub ? 5 : 6, height: sub ? 5 : 6, borderRadius: "50%", background: sub ? "var(--camel)" : "var(--terracotta)", transform: "translateY(-2px)" }} />
                {t}
              </li>
            );
          })}
        </ul>
        <div style={{ marginTop: "24px" }}>
          <Button variant={highlight ? "primary" : "secondary"} size="md" fullWidth onClick={onBook}>Join the founding list</Button>
        </div>
      </div>
    </Card>
  );
}

function PriceRow({ label, detail, price, sub }) {
  return (
    <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: "20px", padding: "22px 0", borderBottom: "1px solid var(--line-soft)" }}>
      <div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "21px", color: "var(--text-strong)" }}>{label}</div>
        <div style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.5, color: "var(--text-muted)", marginTop: "4px", maxWidth: "46ch" }}>{detail}</div>
      </div>
      <div style={{ textAlign: "right", flexShrink: 0 }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "24px", color: "var(--text-strong)", whiteSpace: "nowrap" }}>{price}</div>
        {sub && <div style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--text-muted)", marginTop: "4px" }}>{sub}</div>}
      </div>
    </div>
  );
}

function MembershipSections({ onBook }) {
  const tiers = [
    {
      name: "Standard",
      forWhom: "The contrast ritual — unlimited access to the suite and the recovery lounge.",
      founding: 225,
      regular: 250,
      includes: ["Unlimited contrast suite access", "190°F Finnish sauna + three cold plunges", "Wet + dry recovery rooms", { text: "Compression, percussion & comfort recliners", sub: true }, "HydroMassage in reception", "Branded bottle + electrolyte fill each visit", "Guest passes — 5/mo founding, 2/mo standard", "Member training rate — $105 vs $155"],
    },
    {
      name: "Performance",
      forWhom: "Everything in Standard, plus the data to guide it — assessed every quarter.",
      founding: 300,
      regular: 325,
      includes: ["Everything in Standard", "Unlimited InBody scans", "Quarterly PNOĒ metabolic assessments", { text: "VO₂ Max · RMR · biological age", sub: true }, { text: "InBody, grip & blood-pressure panel", sub: true }, { text: "A plan reviewed with your therapist", sub: true }],
      highlight: true,
    },
  ];

  return (
    <>
      {/* Intro */}
      <section style={{ background: "var(--surface-page)" }}>
        <div data-reveal-group style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(28px, 6vw, 72px)", alignItems: "center" }} className="nrtr-two">
          <div>
            <Eyebrow>Founding membership</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: "16ch" }}>
              Be among the first through the door.
            </h2>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "19px", lineHeight: 1.6, color: "var(--text-muted)", margin: "20px 0 0", maxWidth: "50ch" }}>
              NRTR opens at 65 Church Street in Montclair. Founding members lock in first-year rates and help shape the space before it opens.
            </p>
          </div>
          <div style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "4 / 5" }}>
            <img src="assets/photography/sauna-solo.jpg" alt="Visualization — the NRTR cedar sauna" loading="lazy" width="800" height="1000" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
          </div>
        </div>
      </section>

      {/* Tiers */}
      <section style={{ background: "var(--surface-page)" }}>
        <div style={{ maxWidth: "980px", margin: "0 auto", padding: "0 var(--space-6) var(--section-pad)" }}>
          <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "22px", alignItems: "stretch" }}>
            {tiers.map((t) => <TierCard key={t.name} {...t} onBook={onBook} />)}
          </div>
          <div style={{ marginTop: "32px", display: "flex", alignItems: "center", gap: "clamp(20px, 4vw, 40px)", flexWrap: "wrap", background: "var(--surface-raised)", border: "1px solid var(--terracotta)", borderRadius: "var(--radius-lg)", padding: "clamp(24px, 3vw, 34px)", boxShadow: "var(--shadow-sm)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: "10px", flexShrink: 0 }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(3rem, 6vw, 4rem)", lineHeight: 1, color: "var(--terracotta)", letterSpacing: "-0.02em" }}>5</span>
              <span style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-brand)", maxWidth: "10ch", lineHeight: 1.4 }}>guest passes a month</span>
            </div>
            <div style={{ flex: 1, minWidth: "260px" }}>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.3rem, 2.2vw, 1.75rem)", lineHeight: 1.15, color: "var(--text-strong)", margin: 0 }}>
                Founding members bring five guests a month.
              </h3>
              <p style={{ fontFamily: "var(--font-body)", fontSize: "16px", lineHeight: 1.6, color: "var(--text-muted)", margin: "10px 0 0", maxWidth: "52ch" }}>
                Standard members get two a month — register your interest before we open and, as a founding member, you'll share the suite with five. It's a communal space by design, and we want you to bring people into it.
              </p>
            </div>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--text-muted)", margin: "26px 0 0", maxWidth: "70ch" }}>
            Founding rates apply through your first year, then move to standard pricing. Founding-list members are first to reserve — with just three months upfront to hold your place.
          </p>
        </div>
      </section>

      {/* Pay per visit / à la carte */}
      <section id="rates" style={{ background: "var(--espresso)", color: "var(--linen)", position: "relative", overflow: "hidden", scrollMarginTop: "var(--nav-h)" }}>
        <img src="assets/icons/mark-inverted-camel.svg" alt="" aria-hidden="true" style={{ position: "absolute", right: "24px", top: "24px", width: "240px", opacity: 0.1, pointerEvents: "none" }} />
        <div style={{ position: "relative", maxWidth: "820px", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
          <Eyebrow tone="dark">Pay per visit</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--linen)", margin: "14px 0 40px", maxWidth: "20ch" }}>
            No membership required.
          </h2>
          <div style={{ background: "var(--surface-raised)", borderRadius: "var(--radius-xl)", border: "1px solid var(--line-soft)", padding: "8px var(--space-6) var(--space-6)", boxShadow: "var(--shadow-lg)" }}>
            <PriceRow label="Physical Therapy" detail="Sixty minutes, one-on-one with your therapist." price="$275" sub="60-min session" />
            <PriceRow label="DPT-led Training" detail="Movement and strength work, contrast suite access included." price="$105 / $155" sub="Member / non-member" />
            <PriceRow label="Metabolic Baseline" detail="Full PNOĒ panel — RMR, VO₂ Max, biological age, InBody, grip & BP." price="$299" sub="Complete assessment" />
            <div style={{ borderBottom: "none" }}>
              <PriceRow label="Contrast Day Pass" detail="Sauna, cold plunges, and the recovery lounge for the day." price="$40 / $65" sub="Off-peak / peak" />
            </div>
          </div>
        </div>
      </section>

      {/* What every membership includes */}
      <section style={{ background: "var(--surface-page)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
          <Eyebrow>Every membership</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "20ch" }}>
            The things that don't change, whatever you choose.
          </h2>
          <div data-reveal-group className="nrtr-inc-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "28px", marginTop: "48px" }}>
            {[
              ["Purpose-built", "A space designed for recovery from the ground up — not a gym with a sauna bolted on."],
              ["Communal by design", "The suite is where regulars know each other by name. Membership is a room, not just a rate."],
              ["Recovery, wet and dry", "Both recovery rooms are included — the wet lounge in the circuit, the quiet dry room after your shower."],
              ["Hydration on us", "Your branded bottle and a fresh electrolyte pour at the counter, every visit."],
              ["No lock-in games", "Straightforward terms, cash-pay clarity, and the freedom to pause. We earn the month, every month."],
              ["Six days a week", "Open six days a week, with member booking windows so your hour is there when you need it."],
            ].map(([t, d]) => (
              <div key={t}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "20px", color: "var(--text-strong)", marginBottom: "8px" }}>{t}</div>
                <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Access matrix */}
      <section style={{ background: "var(--surface-raised)", borderTop: "1px solid var(--line-soft)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
          <Eyebrow>What's included</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "20ch" }}>
            Every offering, by tier.
          </h2>
          <div style={{ marginTop: "clamp(32px, 4vw, 48px)", overflowX: "auto" }}>
            <table style={{ width: "100%", minWidth: "640px", borderCollapse: "collapse", fontFamily: "var(--font-body)" }}>
              <thead>
                <tr>
                  {["Offering", "Standard", "Performance", "Day pass"].map((h, i) => (
                    <th key={h} scope="col" style={{ textAlign: i === 0 ? "left" : "center", fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: i === 0 ? "var(--text-muted)" : "var(--text-brand)", padding: "0 16px 14px", borderBottom: "1px solid var(--line-strong)" }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {[
                  ["Wet circuit + recovery lounge", true, true, "Single visit"],
                  ["Dry recovery room", true, true, "Single visit"],
                  ["HydroMassage (reception)", true, true, "Per pass"],
                  ["Branded insulated bottle", "At signup", "At signup", false],
                  ["Complimentary electrolyte fill", "Every visit", "Every visit", "Single $4–6"],
                  ["Curated tea", true, true, true],
                  ["Quarterly biometric assessments", false, true, false],
                  ["Unlimited InBody scans", false, true, false],
                  ["Wellness classes", true, true, false],
                ].map((row) => (
                  <tr key={row[0]}>
                    {row.map((cell, ci) => {
                      if (ci === 0) {
                        return (
                          <th key={ci} scope="row" style={{ textAlign: "left", padding: "16px", borderBottom: "1px solid var(--line-soft)", verticalAlign: "middle", fontWeight: 400 }}>
                            <span style={{ color: "var(--text-strong)", fontSize: "15px" }}>{cell}</span>
                          </th>
                        );
                      }
                      const render = cell === true
                        ? <React.Fragment><span aria-hidden="true" style={{ color: "var(--terracotta)", fontSize: "17px" }}>✓</span><span style={srOnly}>Included</span></React.Fragment>
                        : cell === false
                        ? <React.Fragment><span aria-hidden="true" style={{ color: "var(--line-strong)", fontSize: "15px" }}>—</span><span style={srOnly}>Not included</span></React.Fragment>
                        : <span style={{ color: "var(--text-muted)", fontSize: "13px", fontFamily: "var(--font-label)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{cell}</span>;
                      return (
                        <td key={ci} style={{ textAlign: "center", padding: "16px", borderBottom: "1px solid var(--line-soft)", verticalAlign: "middle" }}>{render}</td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--text-muted)", margin: "24px 0 0", maxWidth: "72ch" }}>
            Founding members bring five guests a month; Standard members, two. Day passes are $40 off-peak / $65 peak, and guests reach the same offerings per visit. Non-members can buy a single electrolyte serving for $4–6.
          </p>
        </div>
      </section>

      {/* Members-only branded bottle */}
      <section style={{ background: "var(--surface-page)" }}>
        <div data-reveal-group style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)", display: "grid", gridTemplateColumns: "0.95fr 1.05fr", gap: "clamp(28px, 6vw, 72px)", alignItems: "center" }} className="nrtr-two">
          <div data-img-reveal style={{ aspectRatio: "4 / 5", borderRadius: "var(--radius-xl)", border: "1px solid var(--line-soft)", boxShadow: "var(--shadow-md)", overflow: "hidden" }}>
            <img src="assets/photography/brand/member-bottle.jpg" alt="Visualization — the members' insulated NRTR bottle" loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
          <div>
            <Eyebrow>Members only</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "16ch" }}>
              The bottle is your key.
            </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" }}>
              Every membership comes with an insulated stainless bottle, engraved with the leaf and given at signup — the token of the room, and yours alone. Bring it and each visit starts with a fresh electrolyte pour at the counter, on us.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "24px" }}>
              {["Vacuum-insulated 316 stainless", "Laser-engraved leaf", "One free fill, every visit"].map((c) => (
                <span key={c} style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-brand)", border: "1px solid var(--line-strong)", borderRadius: "var(--radius-pill)", padding: "7px 13px", background: "var(--surface-raised)" }}>{c}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Members-first wellness classes */}
      <section style={{ background: "var(--surface-raised)", borderTop: "1px solid var(--line-soft)" }}>
        <div data-reveal-group style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(48px,7vw,88px) var(--space-6)", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "clamp(28px, 6vw, 72px)", alignItems: "center" }} className="nrtr-two">
          <div>
            <Eyebrow>Members-first · Classes</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "18ch" }}>
              Move together, breathe together.
            </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" }}>
              A small schedule of member wellness classes — mobility, gentle movement, and guided breathwork — held in the studio and led by local instructors. Included with membership, capped small so the room stays personal.
            </p>
          </div>
          <div data-img-reveal style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-md)", border: "1px solid var(--line-soft)", aspectRatio: "4 / 3" }}>
            <img src="assets/photography/wellness-class.jpg" alt="Visualization — a member wellness class in the studio" loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          </div>
        </div>
      </section>

      {/* Founding welcome — tote */}
      <section style={{ background: "var(--surface-page)" }}>
        <div data-reveal-group style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(48px,7vw,88px) var(--space-6)", display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "clamp(28px, 6vw, 72px)", alignItems: "center" }} className="nrtr-two">
          <div data-img-reveal style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", boxShadow: "var(--shadow-md)", aspectRatio: "4 / 5" }}>
            <img src="assets/photography/brand/tote-bag.jpg" alt="Visualization — the NRTR founding-member tote" loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }} />
          </div>
          <div>
            <Eyebrow>A founding welcome</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "18ch" }}>
              Carry a little of it with you.
            </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" }}>
              Founding members are welcomed with our leaf-marked tote — a small thank-you for believing in the space before the doors open.
            </p>
          </div>
        </div>
      </section>
      <section id="join" style={{ background: "var(--espresso)", color: "var(--linen)", position: "relative", overflow: "hidden", scrollMarginTop: "var(--nav-h)" }}>
        <img src="assets/photography/suite-ambient.jpg" alt="" aria-hidden="true" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 40%", opacity: 0.32, pointerEvents: "none" }} />
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 90% at 50% 40%, rgba(32,24,15,0.55) 0%, rgba(32,24,15,0.82) 62%, rgba(32,24,15,0.94) 100%)", pointerEvents: "none" }} />
        <img src="assets/icons/mark-inverted-camel.svg" alt="" aria-hidden="true" style={{ position: "absolute", left: "-4%", top: "50%", transform: "translateY(-50%)", height: "150%", width: "auto", opacity: 0.08, pointerEvents: "none" }} />
        <div style={{ position: "relative", maxWidth: "760px", margin: "0 auto", padding: "var(--section-pad) var(--space-6)", textAlign: "center" }}>
          <Eyebrow tone="dark" center>Founding list</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section-lg)", lineHeight: 1.08, letterSpacing: "-0.01em", color: "var(--linen)", margin: "14px auto 0", maxWidth: "18ch" }}>
            Register your interest before we open.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "18px", lineHeight: 1.6, color: "var(--text-on-dark-muted)", margin: "18px auto 0", maxWidth: "46ch" }}>
            Add your name and we'll mark your interest and keep you updated on our opening timeline.
          </p>
          <div style={{ display: "flex", gap: "12px", justifyContent: "center", flexWrap: "wrap", marginTop: "32px" }}>
            <Button variant="primary" size="lg" onClick={onBook}>Join the founding list</Button>
            <Button variant="camel" size="lg" href="services.html">Explore the practices</Button>
          </div>
        </div>
      </section>
    </>
  );
}

window.MembershipSections = MembershipSections;
