const { Eyebrow } = window.NRTRDesignSystem_47db9c;

function Credentials({ items }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", marginTop: "22px" }}>
      {items.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, 999px)", padding: "7px 13px", background: "var(--surface-raised)" }}>{c}</span>
      ))}
    </div>
  );
}

function BioBlock({ name, role, bio, credentials, flip, photo, photoPos }) {
  const portrait = (
    <div
      style={{
        aspectRatio: "4 / 5",
        width: "100%",
        maxWidth: "400px",
        margin: "0 auto",
        borderRadius: "var(--radius-xl)",
        border: "1px solid var(--line-soft)",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: "14px",
        boxShadow: "var(--shadow-md)",
        background: photo ? "none" : "repeating-linear-gradient(135deg, rgba(140,59,34,0.06) 0 11px, rgba(140,59,34,0) 11px 24px), linear-gradient(160deg, #ece0c6 0%, #e1d1b3 100%)",
      }}
    >
      {photo ? (
        <img src={photo} alt={name} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: photoPos || "center top", display: "block" }} />
      ) : (
        <React.Fragment>
          <img src="assets/icons/mark-inverted-terracotta.svg" alt="" aria-hidden="true" style={{ width: 56, height: 56, opacity: 0.34 }} />
          <span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: "10.5px", letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--text-brand)", opacity: 0.75 }}>Portrait — {name}</span>
        </React.Fragment>
      )}
    </div>
  );
  const text = (
    <div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.6rem, 2.6vw, 2.1rem)", color: "var(--text-strong)", margin: 0 }}>{name}</h3>
      <div style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-brand)", margin: "10px 0 0" }}>{role}</div>
      {bio.map((p, i) => (
        <p key={i} style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.65, color: i === 0 ? "var(--text-body)" : "var(--text-muted)", margin: i === 0 ? "20px 0 0" : "16px 0 0", maxWidth: "52ch" }}>{p}</p>
      ))}
      <Credentials items={credentials} />
    </div>
  );
  return (
    <div style={{ display: "grid", gridTemplateColumns: "0.72fr 1.28fr", gap: "clamp(28px, 5vw, 64px)", alignItems: "center" }} className="nrtr-bio-grid">
      {flip ? (<><div style={{ order: 1 }}>{portrait}</div><div style={{ order: 2 }}>{text}</div></>) : (<>{portrait}{text}</>)}
    </div>
  );
}

function AboutSections() {
  return (
    <>
      {/* Our story */}
      <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.8fr 1.2fr", gap: "clamp(28px, 6vw, 80px)", alignItems: "start" }} className="nrtr-two">
          <div>
            <Eyebrow>Our story</Eyebrow>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section)", lineHeight: 1.08, letterSpacing: "-0.01em", color: "var(--text-strong)", margin: "14px 0 0", maxWidth: "16ch" }}>
              Built with the same care as the treatment.
            </h2>
          </div>
          <div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "19px", lineHeight: 1.65, color: "var(--text-body)", margin: 0, maxWidth: "56ch" }}>
              NRTR — Nature's Road to Recovery, said <em>"Nurture"</em> — began with a simple frustration: recovery had been scattered across places that never spoke to each other. A clinic for the injury. A gym for the training. A spa for the reset. None built for the whole picture.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "19px", lineHeight: 1.65, color: "var(--text-muted)", margin: "20px 0 0", maxWidth: "56ch" }}>
              So we put them under one roof at 65 Church Street in Montclair — clinical one-on-one physical therapy, a communal contrast suite, and clinical-grade biometric testing — and designed the room to feel like it was made for the work. Because it was.
            </p>
            <p style={{ fontFamily: "var(--font-body)", fontSize: "19px", lineHeight: 1.65, color: "var(--text-muted)", margin: "20px 0 0", maxWidth: "56ch" }}>
              Cash-pay, unhurried, specific. The hour you spend here is the one you protect.
            </p>
          </div>
        </div>
      </section>

      {/* Values band */}
      <section style={{ background: "var(--espresso)", color: "var(--linen)", position: "relative", overflow: "hidden" }}>
        <img src="assets/icons/mark-inverted-camel.svg" alt="" aria-hidden="true" style={{ position: "absolute", left: "46%", top: "50%", transform: "translateY(-50%)", height: "150%", width: "auto", opacity: 0.12, pointerEvents: "none" }} />
        <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
          <Eyebrow tone="dark">How we work</Eyebrow>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "var(--fs-section-lg)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--linen)", margin: "14px 0 40px", maxWidth: "22ch" }}>
            Warm precision — clinical and caring at the same time.
          </h2>
          <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(210px, 1fr))", gap: "28px" }}>
            {[
              ["Present", "One therapist, your whole hour. Undivided attention is the baseline, not an upgrade."],
              ["Specific", "Concrete over aspirational. Sixty-minute sessions and 190°F saunas, not \u201cworld-class facilities.\u201d"],
              ["Honest", "We show you why it's worth your time — we never tell you that you need to be fixed."],
              ["Grounded", "Warm, material, unhurried. The rigor is the care."],
            ].map(([t, d]) => (
              <div key={t}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", 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>
      </section>

      {/* The team */}
      <section id="team" style={{ background: "var(--surface-page)", scrollMarginTop: "var(--nav-h)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
          <Eyebrow>The team</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 people behind the practice.
          </h2>
          <div data-reveal-group style={{ display: "flex", flexDirection: "column", gap: "clamp(48px, 7vw, 88px)", marginTop: "56px" }}>
            <BioBlock
              name="Jacob Kaltman"
              role="Founder"
              photo="assets/photography/jacob.jpg"
              bio={[
                "NRTR is the product of Jacob's own recovery. In 2019 he injured his back deadlifting, and spent the next five years navigating the American physical-therapy system — more than ten clinics, fifteen-plus therapists, and every conservative treatment there is. He became a deeply informed patient, learning firsthand how insurance-driven, volume-based PT under-serves people who deserve better.",
                "In 2025 he underwent an artificial disc replacement and recovered using the exact pairing NRTR is built on: high-quality one-on-one physical therapy alongside hot-and-cold contrast. He searched for a place that combined the two, couldn't find it, and left a career as a CPA and PwC consultant to build it — leading business operations, finance, technology, build-out, and brand.",
              ]}
              credentials={["Founder", "CPA", "6+ yrs at PwC", "Patient-turned-founder"]}
              flip={false}
            />
            <BioBlock
              name="Nicholas Hars, DPT"
              role="Founding Partner · Clinical Lead"
              photo="assets/photography/nick.jpg"
              bio={[
                "Nick leads NRTR's clinical practice. A New Jersey native and Doctor of Physical Therapy, his experience spans outpatient orthopedics, sports medicine, vestibular rehabilitation, and workers' compensation across multiple states and settings.",
                "A former college soccer captain, he treats through a strength-and-conditioning lens — a fit for NRTR's performance-minded patients. He's built a sports-medicine practice from the ground up before, including physician-referral and athletic-training partnerships, and he designed the sixty-minute, root-cause model at the center of the clinic.",
              ]}
              credentials={["Doctor of Physical Therapy", "BFR-certified", "APTA member", "College soccer captain"]}
              flip={true}
            />
          </div>
        </div>
      </section>
    </>
  );
}

window.AboutSections = AboutSections;
