// bodymap.jsx — interactive pain selector
function BodyMap({ lang }) {
  const t = COPY[lang].bodymap;
  const [area, setArea] = React.useState("back");
  const areas = t.areas;
  const current = areas[area];

  // Coordinates on the 1122×1402 anatomy photo (front figure left, back figure right)
  const R = window.__resources || {};
  const figureSrc = R.anatomy || "assets/anatomy.png";
  const hotspots = [
    { id: "neck",     cx: 355, cy: 238,  r: 42 },
    { id: "shoulder", cx: 240, cy: 308,  r: 48 },
    { id: "back",     cx: 840, cy: 455,  r: 62 },
    { id: "hip",      cx: 852, cy: 650,  r: 58 },
    { id: "knee",     cx: 315, cy: 945,  r: 46 },
    { id: "ankle",    cx: 300, cy: 1245, r: 40 },
    { id: "fascia",   cx: 448, cy: 705,  r: 42 },
  ];

  return (
    <section className="bodymap-section" id="bodymap">
      <div className="container">
        <div className="sec-eyebrow">{t.eyebrow}</div>
        <h2 className="sec-title" style={{ whiteSpace: "pre-line" }}>{t.title}</h2>
        <p className="sec-subtitle">{t.subtitle}</p>
        <div className="bodymap-layout">
          <div className="bodymap-stage">
            <img className="bodymap-photo" src={figureSrc} alt="" />
            <svg className="bodymap-svg" viewBox="0 0 1122 1402" preserveAspectRatio="xMidYMid meet">
              {/* hotspots over the anatomy photo */}
              {hotspots.map((h) => (
                <g key={h.id} onClick={() => setArea(h.id)} style={{ cursor: "pointer" }}>
                  {area === h.id && (
                    <circle className="bm-pulse" cx={h.cx} cy={h.cy} r={h.r} />
                  )}
                  <circle
                    className={"bm-hot " + (area === h.id ? "active" : "")}
                    cx={h.cx} cy={h.cy} r={h.r}
                  />
                  <text x={h.cx + h.r + 14} y={h.cy + 9}
                        fontFamily="var(--f-mono)" fontSize="26" fill="var(--ink-mute)"
                        style={{ letterSpacing: "0.1em", textTransform: "uppercase" }}>
                    {String(hotspots.findIndex(x => x.id === h.id) + 1).padStart(2, "0")}
                  </text>
                </g>
              ))}
            </svg>
          </div>

          <div className="bodymap-info">
            <div className="bm-area-label">{current.label}</div>
            <h3 className="bm-area-title">{current.title}</h3>
            <p className="bm-area-desc">{current.desc}</p>
            <div className="bm-therapies">
              {current.therapies.map((th, i) => <span key={i} className="bm-therapy">{th}</span>)}
            </div>
            <div style={{ display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap", paddingTop: 18, borderTop: "1px solid var(--line)" }}>
              <div>
                <div className="mono" style={{ color: "var(--ink-mute)", marginBottom: 6 }}>{t.specialistLabel}</div>
                <div style={{ fontFamily: "var(--f-display)", fontSize: 22, lineHeight: 1.2 }}>{current.therapies.join(" · ")}</div>
              </div>
              <a href="#booking" className="btn ghost" style={{ marginLeft: "auto" }}
                 onClick={(e) => { e.preventDefault(); const el = document.getElementById("booking"); if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" }); }}>
                {COPY[lang].cta_book} <Arrow />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { BodyMap });