const { Card, SectionHeading, Badge } = window.NRTRDesignSystem_47db9c;

function Pillars() {
  const items = [
    {
      tag: "Physical Therapy",
      title: "Care built around the actual problem",
      body:
        "Sixty minutes of undivided attention. Your therapist knows your history and builds a plan around the root cause — not a protocol.",
      photo: "assets/photography/pt-session-2.jpg",
      pos: "center 35%",
      link: "services.html#pt",
    },
    {
      tag: "Contrast Therapy",
      title: "A large Finnish sauna and three cold plunges",
      body:
        "Heat, cold, and a full recovery lounge in a communal suite. Come for the reset, stay for the room.",
      photo: "assets/photography/community.jpg",
      pos: "center 32%",
      link: "services.html#contrast",
    },
    {
      tag: "Biometric Testing",
      title: "Where wearable data becomes a plan",
      body:
        "Clinical-grade PNOĒ testing meets the numbers you already track. We help you interpret them, then act on them.",
      photo: "assets/photography/testing-2.jpg",
      pos: "center 32%",
      link: "services.html#testing",
    },
  ];
  return (
    <section id="practices" style={{ background: "var(--surface-page)", position: "relative", overflow: "hidden", scrollMarginTop: "var(--nav-h)" }}>
      <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad-lg) var(--space-6)" }}>
        <div data-reveal="fade">
          <SectionHeading
            eyebrow={<React.Fragment><img src="assets/icons/mark-inverted-terracotta.svg" alt="" aria-hidden="true" style={{ width: 16, height: 16, marginRight: 10, verticalAlign: "-2px" }} />What we do</React.Fragment>}
            title="Three practices, one purpose-built space"
            lede="No one has combined clinical one-on-one PT, communal contrast therapy, and biometric testing under a single roof at this level — until now."
          />
        </div>
        <div
          data-reveal-group
          className="nrtr-pillars"
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: "22px",
            marginTop: "52px",
          }}
        >
          {items.map((it) => (
            <a key={it.tag} href={it.link} className="nrtr-card-link" style={{ textDecoration: "none", color: "inherit", display: "block" }}>
            <Card tone="raised" interactive padding="0" className="nrtr-card-hover" style={{ overflow: "hidden", height: "100%" }}>
              <div className="nrtr-photo" data-img-reveal style={{ height: 220, overflow: "hidden" }}>
                <img src={it.photo} alt={"Visualization — " + it.title} loading="lazy" decoding="async" width="560" height="220" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: it.pos, display: "block" }} />
              </div>
              <div style={{ padding: "var(--space-6)" }}>
                <div style={{ marginBottom: "10px" }}>
                  <Badge tone="brand">{it.tag}</Badge>
                </div>
                <h3 style={{ margin: "0 0 10px", fontSize: "22px" }}>{it.title}</h3>
                <p style={{ margin: 0, color: "var(--text-muted)", fontSize: "16px", lineHeight: 1.6 }}>{it.body}</p>
              </div>
            </Card>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pillars = Pillars;