function ConcernDetail({ concernId, onBack, ctaLabel }) {
  const c = window.CONCERNS.find(x => x.id === concernId) || window.CONCERNS[0];

  React.useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [concernId]);

  return (
    <div>
      <section style={{ paddingTop: 32, paddingBottom: 64 }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 22px" }}>
          <div className="eyebrow" style={{ marginBottom: 20 }}><span className="dot" />Hautthema · N° {c.number}</div>
          <h1 className="serif" style={{
            fontSize: "clamp(50px, 11vw, 120px)",
            fontWeight: 300, lineHeight: .9, letterSpacing: "-.015em",
            textWrap: "balance", maxWidth: 900,
          }}>
            {c.title}
          </h1>
          <p className="serif italic" style={{
            marginTop: 22, fontSize: "clamp(22px, 3.5vw, 30px)",
            color: "var(--rose-deep)", maxWidth: 680, lineHeight: 1.3,
          }}>
            {c.kicker}.
          </p>
          <p style={{ marginTop: 22, fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 560 }}>
            {c.copy} Hier entstehen die Protokolle, Empfehlungen zu Pflege und das, was
            wir gemeinsam über mehrere Sitzungen erreichen können.
          </p>

          <div className="stub-note" style={{
            marginTop: 48,
            padding: "22px 24px",
            border: "1px dashed var(--hair)",
            background: "var(--cream-2)",
            maxWidth: 560,
          }}>
            <div style={{ fontSize: 10.5, letterSpacing: ".24em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 8 }}>
              Platzhalter · Unterseite folgt
            </div>
            <div className="serif italic" style={{ fontSize: 20, color: "var(--ink)", lineHeight: 1.35 }}>
              Auf dieser Seite folgen in Kürze die Behandlungen, Preise, Ablauf
              und Vorher/Nachher zu „{c.title}“.
            </div>
          </div>

          <div style={{ marginTop: 40 }}>
            <button onClick={onBack} style={{
              background: "var(--ink)", color: "var(--cream)",
              padding: "16px 26px",
              fontSize: 11, letterSpacing: ".24em", textTransform: "uppercase",
              borderRadius: 999,
            }}>Zur Startseite</button>
          </div>
        </div>
      </section>
    </div>
  );
}

window.ConcernDetail = ConcernDetail;