const { Eyebrow } = window.NRTRDesignSystem_47db9c;

function ElementCard({ element, word, body }) {
  return (
    <div style={{ background: "var(--surface-raised)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius-lg)", padding: "var(--space-6)", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column", gap: "6px" }}>
      <div style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-brand)" }}>{element}</div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: "26px", color: "var(--text-strong)", margin: "2px 0 6px" }}>{word}</div>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: "var(--text-muted)", margin: 0 }}>{body}</p>
    </div>
  );
}

function FeatureRow({ eyebrow, title, body, photo, note, flip, temps }) {
  const media = photo ? (
    <div className="nrtr-photo" data-img-reveal style={{ borderRadius: "var(--radius-xl)", overflow: "hidden", border: "1px solid var(--line-on-dark)", aspectRatio: "4 / 3" }}>
      <img src={photo} alt={"Visualization — " + title} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>
  ) : (
    <div style={{ borderRadius: "var(--radius-xl)", border: "1px solid var(--line-on-dark)", aspectRatio: "4 / 3", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "14px", background: "repeating-linear-gradient(135deg, rgba(183,142,103,0.08) 0 11px, rgba(183,142,103,0) 11px 24px), linear-gradient(160deg, #3a2717 0%, #241a10 100%)" }}>
      <img src="assets/icons/mark-inverted-camel.svg" alt="" aria-hidden="true" style={{ width: 58, height: 58, opacity: 0.4 }} />
      <span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: "10.5px", letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--camel)", opacity: 0.8 }}>{note}</span>
    </div>
  );
  const text = (
    <div>
      <Eyebrow tone="dark">{eyebrow}</Eyebrow>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "clamp(1.7rem, 3vw, 2.4rem)", lineHeight: 1.1, letterSpacing: "-0.01em", color: "var(--linen)", margin: "14px 0 0", maxWidth: "18ch" }}>{title}</h3>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "17px", lineHeight: 1.65, color: "var(--text-on-dark-muted)", margin: "16px 0 0", maxWidth: "46ch" }}>{body}</p>
      {temps && (
        <div style={{ display: "flex", gap: "28px", marginTop: "28px", flexWrap: "wrap" }}>
          {temps.map(([t, l]) => (
            <div key={l} style={{ textAlign: "center" }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: "30px", color: "var(--linen)", lineHeight: 1 }}>{t}</div>
              <div style={{ fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--camel)", marginTop: "6px" }}>{l}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
  return (
    <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(28px, 5vw, 64px)", alignItems: "center" }} className="nrtr-svc-grid">
      {flip ? (<><div style={{ order: 1 }}>{media}</div><div style={{ order: 2 }}>{text}</div></>) : (<>{text}{media}</>)}
    </div>
  );
}

function JourneyStep({ n, tag, title, body, photo, note }) {
  const media = photo ? (
    <div className="nrtr-photo" data-img-reveal style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--line-soft)", aspectRatio: "4 / 3", boxShadow: "var(--shadow-sm)" }}>
      <img src={photo} alt={"Visualization — " + tag} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    </div>
  ) : (
    <div style={{ borderRadius: "var(--radius-lg)", border: "1px solid var(--line-soft)", aspectRatio: "4 / 3", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", background: "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%)" }}>
      <img src="assets/icons/mark-inverted-terracotta.svg" alt="" aria-hidden="true" style={{ width: 44, height: 44, opacity: 0.38 }} />
      <span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: "10px", letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--text-brand)", opacity: 0.8 }}>{note}</span>
    </div>
  );
  return (
    <div>
      {media}
      <div style={{ display: "flex", alignItems: "baseline", gap: "10px", margin: "18px 0 0" }}>
        <span style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.16em", color: "var(--camel)" }}>{n}</span>
        <span style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-brand)" }}>{tag}</span>
      </div>
      <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "22px", color: "var(--text-strong)", margin: "8px 0 0" }}>{title}</h3>
      <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: "var(--text-muted)", margin: "10px 0 0", maxWidth: "38ch" }}>{body}</p>
    </div>
  );
}

function Journey() {
  const steps = [
    { n: "01", tag: "Front of house", title: "Arrive, unshod.", body: "A shoe-free white-oak entry, reception, the retail shelf, and the beverage counter. Clothed and social — where a visit begins and your bottle gets its first fill.", photo: "assets/photography/brand/reception.jpg" },
    { n: "02", tag: "The wet circuit", title: "Heat, cold, the lounge between.", body: "Sauna and cold plunges with a water-tolerant lounge in the loop. Barefoot on warm floors, towel in hand, moving at the pace of the room.", photo: "assets/photography/wet-circuit.jpg" },
    { n: "03", tag: "The dry recovery room", title: "Rinse, then wind all the way down.", body: "After a shower, a quiet, low-stimulation room for the device-based recovery — warm, robed, unhurried. The shower is the hinge between wet and dry.", photo: "assets/photography/recovery-room-dry.jpg" },
  ];
  return (
    <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>The journey</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: "18ch" }}>
          Three environments, one continuous reset.
        </h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "19px", lineHeight: 1.6, color: "var(--text-muted)", margin: "18px 0 0", maxWidth: "56ch" }}>
          The space flows as a deliberate sequence, not a menu of rooms — front of house, into the wet circuit, and through to a quiet dry room, with the shower as the hinge between the two.
        </p>
        <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "clamp(24px, 4vw, 40px)", marginTop: "clamp(36px, 5vw, 56px)" }}>
          {steps.map((s) => <JourneyStep key={s.n} {...s} />)}
        </div>
      </div>
    </section>
  );
}

function ModalityCard({ tag, title, body, note, photo }) {
  return (
    <div style={{ background: "var(--surface-raised)", border: "1px solid var(--line-soft)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column" }}>
      {photo ? (
        <div data-img-reveal style={{ aspectRatio: "4 / 3", overflow: "hidden" }}>
          <img src={photo} alt={"Visualization — " + tag} loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      ) : (
        <div style={{ aspectRatio: "4 / 3", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: "12px", background: "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%)" }}>
          <img src="assets/icons/mark-inverted-terracotta.svg" alt="" aria-hidden="true" style={{ width: 44, height: 44, opacity: 0.36 }} />
          <span style={{ fontFamily: "ui-monospace, Menlo, monospace", fontSize: "10px", letterSpacing: "0.13em", textTransform: "uppercase", color: "var(--text-brand)", opacity: 0.8 }}>{note}</span>
        </div>
      )}
      <div style={{ padding: "var(--space-6)" }}>
        <div style={{ fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-brand)" }}>{tag}</div>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 400, fontSize: "1.4rem", lineHeight: 1.15, color: "var(--text-strong)", margin: "10px 0 0" }}>{title}</h3>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.6, color: "var(--text-muted)", margin: "10px 0 0" }}>{body}</p>
      </div>
    </div>
  );
}

function DryRoom() {
  const modalities = [
    { tag: "Pneumatic compression", title: "Dynamic compression boots", body: "Air-compression boots inflate from the feet up, in sequence — a deeply relaxing way to ease the heaviness in tired legs and support circulation between sessions. Two to four stations, self-serve or lightly staffed.", photo: "assets/photography/recovery-compression.jpg" },
    { tag: "Percussion therapy", title: "Targeted muscle release", body: "Self-serve percussion devices for a quick, targeted release before you head out — dry, wipeable, and always within reach.", photo: "assets/photography/recovery-percussion.jpg" },
    { tag: "The comfort layer", title: "Heat, weight, and quiet", body: "Heated recliners on radiant floors, weighted blankets and eye pillows, warm circadian-tuned light, a whisper of eucalyptus and white tea, and guided breathwork on its own audio zone.", photo: "assets/photography/recovery-comfort.jpg" },
  ];
  return (
    <section id="recovery" 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 dry recovery room</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: "20ch" }}>
          The quiet half of recovery.
        </h2>
        <p style={{ fontFamily: "var(--font-body)", fontSize: "19px", lineHeight: 1.6, color: "var(--text-muted)", margin: "18px 0 0", maxWidth: "56ch" }}>
          Entered clean and dry after a rinse — a warm, low-stimulation room for the device-based recovery, robed and unhurried. Where the wet circuit ends, this begins.
        </p>
        <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "22px", marginTop: "clamp(36px, 5vw, 52px)", alignItems: "stretch" }}>
          {modalities.map((m) => <ModalityCard key={m.tag} {...m} />)}
        </div>
      </div>
    </section>
  );
}

function HydrationRitual() {
  const notes = [
    ["One rotating flavor", "The electrolyte base stays the same; a single seasonal botanical — citrus, cucumber, ginger, mint — rotates on a set cadence, so it stays an event."],
    ["Curated tea, warm and cold", "A rotating tea service in the wet lounge — a warm pour to re-warm after the plunge, a cold one after the sauna."],
    ["RO-filtered water", "Reverse-osmosis hydration on tap throughout, still or sparkling."],
  ];
  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: "1.05fr 0.95fr", gap: "clamp(28px, 6vw, 72px)", alignItems: "center" }} className="nrtr-two">
        <div>
          <Eyebrow>Water · Hydration</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" }}>
            A cold pour, poured for 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: "50ch" }}>
            A light, house-made electrolyte drink — fresh citrus, a little cucumber, no fuss — batched fresh each day and poured cold over clear ice at the counter. Cool, refreshing, and replenishing after a session. Included with membership, in the bottle that's yours.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: "14px", margin: "26px 0 0" }}>
            {notes.map(([t, d]) => (
              <div key={t} style={{ display: "flex", alignItems: "baseline", gap: "12px" }}>
                <span aria-hidden="true" style={{ flexShrink: 0, width: 7, height: 7, borderRadius: "50%", background: "var(--terracotta)", transform: "translateY(-1px)" }} />
                <span style={{ fontFamily: "var(--font-body)", fontSize: "15px", lineHeight: 1.5, color: "var(--text-body)" }}><strong style={{ fontWeight: 500, color: "var(--text-strong)" }}>{t}</strong> — {d}</span>
              </div>
            ))}
          </div>
        </div>
        <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/electrolyte-pour.jpg" alt="Visualization — the house electrolyte pour over ice" loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
        </div>
      </div>
    </section>
  );
}

function ExperienceSections() {
  return (
    <>
      {/* Four elements */}
      <section style={{ background: "var(--surface-page)" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
          <Eyebrow>The philosophy</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: "18ch" }}>
            Four elements, one environment.
          </h2>
          <p style={{ fontFamily: "var(--font-body)", fontSize: "19px", lineHeight: 1.6, color: "var(--text-muted)", margin: "18px 0 0", maxWidth: "54ch" }}>
            The space is designed around earth, air, water, and fire — the raw materials of recovery, shaped into a room that feels made for the work.
          </p>
          <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: "22px", marginTop: "48px" }}>
            <ElementCard element="Earth" word="Grounded" body="Natural materials and heated stone floors, plus a functional-training floor on Rogue equipment — reserved for physical therapy and DPT-led sessions, not open-gym use." />

            <ElementCard element="Air" word="Clear" body="HEPA and MERV-13 filtration, considered aromatherapy, and member breathwork classes." />
            <ElementCard element="Water" word="Cold" body="Three cold plunges at graduated temperatures, a HydroMassage chair, and RO-filtered hydration." />
            <ElementCard element="Fire" word="Heat" body="A large Finnish sauna — cedar-built and three tiers tall, from 160° up to 190°F." />
          </div>
        </div>
      </section>

      <Journey />

      {/* The contrast suite deep-dive */}
      <section id="suite" 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: "-5%", top: "-8%", width: "360px", opacity: 0.08, pointerEvents: "none" }} />
        <div style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "var(--section-pad) var(--space-6)" }}>
          <Eyebrow tone="dark">The contrast suite</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 0", maxWidth: "20ch" }}>
            Hot, cold, and a room to sit in.
          </h2>
          <div style={{ display: "flex", flexDirection: "column", gap: "clamp(48px, 7vw, 90px)", marginTop: "60px" }}>
            <FeatureRow
              eyebrow="Fire · Finnish Sauna"
              title="A cedar sauna, three tiers tall."
              body="A 30-person Finnish sauna, custom-built in cedar with a three-tier bench. The heat runs a gradient from about 160°F at the lower bench to 190°F at the top — so you self-select your intensity by where you sit."
              photo="assets/photography/sauna-three-tier.jpg"
              flip={false}
              temps={[["160°F", "Lower tier"], ["190°F", "Upper tier"], ["30", "Seats"]]}
            />
            <FeatureRow
              eyebrow="Water · Cold Plunges"
              title="Three plunges, three temperatures."
              body="Graduated cold, so there's an entry point for everyone — from post-surgical clients easing in, to the advanced plunge that resets the whole system. Stainless steel, with ozone and UV sanitation."
              photo="assets/photography/cold-plunge.jpg"
              flip={true}
              temps={[["52°F", "Entry"], ["46°F", "Intermediate"], ["40°F", "Advanced"]]}
            />
            <FeatureRow
              eyebrow="Water · Wet Lounge"
              title="The wet recovery lounge, in the loop."
              body="A place to rest, towel off, and rehydrate between rounds — teak matting, warm stone, radiant floors, and water-tolerant loungers, right inside the sauna-and-plunge circuit. Curated tea and RO-filtered water are always within reach."
              photo="assets/photography/recovery-lounge.jpg"
              flip={true}
            />
          </div>
        </div>
      </section>

      {/* Air · Aromatherapy — part of the sensory environment */}
      <section style={{ background: "var(--espresso)", color: "var(--linen)", position: "relative", overflow: "hidden" }}>
        <div style={{ maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--space-6) var(--section-pad)" }}>
          <FeatureRow
            eyebrow="Air · Aromatherapy"
            title="Scent, built into the heat."
            body="HEPA and MERV-13 filtration run building-wide, with balanced humidity and PM2.5 monitoring. In the sauna, aromatherapy is dosed straight into the heating element — a clean, even scent that rotates through the seasons, never synthetic spray — with the occasional ice ball melting slowly over the stones."
            photo="assets/photography/aromatherapy-heater.jpg"
            flip={false}
          />
        </div>
      </section>

      <DryRoom />
      <HydrationRitual />

      {/* The facility / details */}
      <section id="facility" 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 facility</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" }}>
            Purpose-built, down to the floors.
          </h2>
          <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "28px 40px", marginTop: "48px" }}>
            {[
              ["~4,000 sq ft", "Ground-floor space designed from a shell, entirely around recovery."],
              ["Two treatment rooms", "Private, acoustically isolated rooms for one-on-one physical therapy."],
              ["Functional training floor", "A dedicated PT floor with Rogue equipment, turf, and free weights."],
              ["Heated stone floors", "Warm underfoot through the wet zones, with rinse showers between areas."],
              ["Clinical air quality", "HEPA and MERV-13 filtration throughout, with balanced humidity control."],
              ["HydroMassage in reception", "A commercial HydroMassage chair in the lobby — a quick, clothed reset, complimentary for members and PT patients."],
              ["Private changing & lockers", "Lockers, rinse showers, and quiet changing rooms so you come and go on your own terms."],
              ["Step-free throughout", "A single ground-floor level, designed for easy access from the lobby to every zone."],
            ].map(([t, d]) => (
              <div key={t} style={{ borderTop: "1px solid var(--line-soft)", paddingTop: "20px" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: "22px", 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>

      {/* Considered details — brand amenities */}
      <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>Considered details</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: "22ch" }}>
            The small things you'll actually touch.
          </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: "52ch" }}>
            Waffle robes, embroidered towels, and mats marked with our leaf — the finish level of the space carries all the way down to what's in your hands.
          </p>
          <div data-reveal-group style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "16px", marginTop: "clamp(32px, 4vw, 48px)" }}>
            {[
              ["assets/photography/brand/robe.jpg", "Waffle robes"],
              ["assets/photography/brand/towel.jpg", "Embroidered towels"],
              ["assets/photography/brand/yoga-mat.jpg", "Leaf-embossed mats"],
            ].map(([src, label]) => (
              <figure key={label} data-img-reveal style={{ position: "relative", margin: 0, borderRadius: "var(--radius-lg)", overflow: "hidden", border: "1px solid var(--line-soft)", aspectRatio: "4 / 5", boxShadow: "var(--shadow-sm)" }}>
                <img src={src} alt={"Visualization — " + label} loading="lazy" decoding="async" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(24,16,10,0) 45%, rgba(20,14,9,0.72) 100%)" }} />
                <figcaption style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "16px", fontFamily: "var(--font-label)", fontSize: "11px", fontWeight: 500, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--linen)" }}>{label}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

window.ExperienceSections = ExperienceSections;
