const { Button, Eyebrow } = window.NRTRDesignSystem_47db9c;

function Hero({ onBook }) {
  return (
    <section style={{ position: "relative", background: "var(--espresso)", color: "var(--linen)", overflow: "hidden" }}>
      {/* warm sauna-glow gradient — light pools around the mark, top-right */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          background: "var(--grad-sauna-glow)",
        }}
      />
      {/* the stamped leaf mark IS the hero image — oversized, embossed into the wall, bleeding off the frame */}
      <img
        src="assets/icons/mark-inverted-camel.svg"
        alt=""
        aria-hidden="true"
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          top: "50%",
          transform: "translateY(-50%)",
          width: "100%",
          height: "auto",
          opacity: 0.2,
          pointerEvents: "none",
        }}
      />
      <div data-hero-group style={{ position: "relative", maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(32px, 4vw, 64px) var(--space-6)" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "14px", flexWrap: "wrap" }}>
          <Eyebrow tone="dark" tracking="0.2em" style={{ fontSize: "12px", gap: "12px" }}>
            Physical Therapy &amp; Contrast Therapy · Montclair, NJ
          </Eyebrow>
          <span style={{ display: "inline-flex", alignItems: "center", gap: "7px", fontFamily: "var(--font-label)", fontSize: "10.5px", fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--camel)", border: "1px solid var(--camel-line)", borderRadius: "999px", padding: "5px 12px", background: "var(--camel-glass)" }}>
            <span aria-hidden="true" style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--camel)", display: "inline-block" }} />
            Opening Spring 2027
          </span>
        </div>
        <h1
          style={{
            fontFamily: "var(--font-display)",
            fontWeight: 400,
            fontSize: "var(--fs-hero-home)",
            lineHeight: 1.02,
            letterSpacing: "-0.015em",
            margin: "24px 0 0",
            maxWidth: "15ch",
            color: "var(--linen)",
          }}
        >
          The hour you spend here is the one you protect.
        </h1>
        <p
          style={{
            fontFamily: "var(--font-body)",
            fontSize: "clamp(1.1rem, 1.6vw, 1.35rem)",
            lineHeight: 1.55,
            color: "var(--linen)",
            opacity: 0.86,
            maxWidth: "44ch",
            margin: "28px 0 0",
          }}
        >
          One-on-one physical therapy, clinical-grade testing, and a communal
          contrast suite — built with the same care as the treatment itself.
        </p>
        <div className="nrtr-hero-cta" style={{ display: "flex", gap: "14px", marginTop: "38px", flexWrap: "wrap" }}>
          <Button variant="primary" size="lg" onClick={onBook}>Join the Founding List</Button>
          <Button variant="camel" size="lg" href="experience.html">Tour the Space</Button>
        </div>
        <div style={{ display: "flex", gap: "clamp(28px, 6vw, 40px)", marginTop: "clamp(40px, 7vw, 60px)", flexWrap: "wrap" }}>
          {[
            ["60 min", "Every session, one-on-one"],
            ["Cash-pay", "No billing codes, no protocols"],
            ["190° / 40°", "Finnish sauna to cold plunge"],
          ].map(([v, l]) => (
            <div key={v} style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
              <span style={{ fontFamily: "var(--font-display)", fontSize: "28px", color: "var(--linen)" }}>{v}</span>
              <span style={{ fontFamily: "var(--font-body)", fontSize: "14px", color: "var(--linen)", opacity: 0.7 }}>{l}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;