// ---------- Bauchschmiede subpage ----------
// Stand-alone page für das Tupler-Technique-1:1-Programm. Bis die eigene
// Bauchschmiede-Homepage steht, ist das die Landing für den CTA auf der
// Hauptseite. Inhalte aus dem Behandlungs-Detail-Modal übernommen +
// strukturiert in: Hero → Problem → Lösung → Programm → Eignung → Kontakt.

const { useEffect: _bsUseEffect, useState: _bsUseState } = React;

// Cover-Bild aus media-slot 'homepage.bauchschmiede_cover' (geteilter Cache
// mit der Homepage-Sektion). Fallback auf das statische Asset.
const useBauchschmiedeCover = () => {
  const [coverUrl, setCoverUrl] = _bsUseState(() => {
    try {
      const raw = typeof localStorage !== 'undefined' ? localStorage.getItem('wb_bauchschmiede_cover_v1') : null;
      if (!raw) return null;
      const p = JSON.parse(raw);
      if (!p || !p.url || Date.now() - p.ts > 1000 * 60 * 60 * 24 * 30) return null;
      return p.url;
    } catch { return null; }
  });
  _bsUseEffect(() => {
    let active = true;
    fetch('https://project-zd7wa.vercel.app/api/public/media')
      .then((r) => r.ok ? r.json() : null)
      .then((data) => {
        if (!active || !data) return;
        const items = data['homepage.bauchschmiede_cover'];
        if (Array.isArray(items) && items[0]?.public_url) {
          setCoverUrl(items[0].public_url);
          try { localStorage.setItem('wb_bauchschmiede_cover_v1', JSON.stringify({ url: items[0].public_url, ts: Date.now() })); } catch {}
        }
      })
      .catch(() => {});
    return () => { active = false; };
  }, []);
  return coverUrl;
};

const BauchschmiedePage = () => {
  const coverUrl = useBauchschmiedeCover();

  return (
    <>
      <BackgroundCanvas />

      {/* Sticky nav */}
      <header style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(242, 228, 206, 0.85)',
        backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
        borderBottom: '1px solid rgba(196, 169, 143, 0.4)',
        padding: '18px 0',
      }}>
        <div className="container" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <a href="Die%20Weiberei.html" aria-label="Die Weiberei — zur Startseite" style={{
            display: 'inline-flex', alignItems: 'center', height: 52,
          }}>
            <img src="assets/logo-weiberei.png" alt="Die Weiberei"
              style={{ height: 52, width: 'auto', display: 'block' }} />
          </a>
          <a href="Die%20Weiberei.html" style={{
            fontSize: 13, color: 'var(--ink-70)', textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>← Zur Startseite</a>
        </div>
      </header>

      <main>
        {/* ----- Hero ----- */}
        <section style={{ padding: 'clamp(48px, 7vw, 88px) 0 clamp(32px, 5vw, 56px)' }}>
          <div className="container">
            <div className="bauchschmiede-hero">
              <div>
                <h1 style={{
                  fontSize: 'clamp(40px, 6vw, 68px)', lineHeight: 1.05, letterSpacing: '-0.02em',
                  fontVariationSettings: '"opsz" 96, "SOFT" 50, "WONK" 1',
                  marginTop: 8, marginBottom: 18,
                  textWrap: 'balance',
                }}>
                  {window.wbT('bauchschmiede.hero.title', 'die Bauchschmiede[.]', 'var(--terracotta)')}
                </h1>
                <p style={{
                  fontFamily: 'Fraunces, serif',
                  fontSize: 'clamp(20px, 2.2vw, 26px)',
                  lineHeight: 1.35,
                  color: 'var(--ink)',
                  marginBottom: 22,
                  maxWidth: 560,
                  fontVariationSettings: '"opsz" 36, "SOFT" 50',
                }}>
                  {window.wbT('bauchschmiede.hero.subtitle',
                    'Dein Weg zu einem starken Bauch nach der Geburt — mit [gezielter] 1:1-Begleitung.',
                    'var(--terracotta)')}
                </p>
                <p style={{
                  color: 'var(--ink-70)', fontSize: 16, lineHeight: 1.65, marginBottom: 26, maxWidth: 540,
                }}>
                  {window.wbText('bauchschmiede.hero.lead',
                    '6-wöchiges Trainingsprogramm zur Schließung der Rektusdiastase und den Aufbau einer gesunden, stabilen Körpermitte.')}
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 4 }}>
                  <a href="#anfragen" className="btn" style={{
                    background: 'var(--terracotta)', color: 'var(--offwhite)', textDecoration: 'none',
                  }}>
                    Termin anfragen <span style={{ marginLeft: 4 }}>→</span>
                  </a>
                  <a href="#was-ist-das" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
                    Mehr erfahren
                  </a>
                </div>
              </div>

              <div style={{
                aspectRatio: '4/3',
                borderRadius: 16,
                overflow: 'hidden',
                background: 'var(--offwhite)',
                border: '1px solid rgba(181,104,74,0.2)',
                boxShadow: '0 18px 48px rgba(42,34,29,0.16)',
              }}>
                <img
                  src={coverUrl || 'assets/bauchschmiede.png'}
                  alt="Trainerin gibt Hands-on-Anleitung beim Tupler-Protokoll auf der Matte"
                  loading="eager"
                  style={{
                    width: '100%', height: '100%',
                    objectFit: 'cover', objectPosition: 'center',
                    display: 'block',
                  }}
                />
              </div>
            </div>
          </div>
        </section>

        {/* ----- Problem ----- */}
        <section id="was-ist-das" className="bauchschmiede-section">
          <div className="container" style={{ maxWidth: 880 }}>
            <span className="eyebrow" style={{ color: 'var(--terracotta)', marginBottom: 14, display: 'inline-block' }}>
              ● Das Problem
            </span>
            <h2 style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(32px, 4.5vw, 48px)', lineHeight: 1.1, letterSpacing: '-0.015em',
              fontVariationSettings: '"opsz" 96, "SOFT" 40',
              marginBottom: 22,
            }}>
              {window.wbT('bauchschmiede.problem.headline',
                'Dein Körper hat in der Schwangerschaft [Unglaubliches] geleistet.',
                'var(--terracotta)')}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-70)', marginBottom: 18 }}>
              {window.wbText('bauchschmiede.problem.intro',
                'Kein Wunder, dass er danach manchmal Unterstützung braucht, um wieder in seine Kraft zu finden.')}
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-70)', marginBottom: 24 }}>
              {window.wbText('bauchschmiede.problem.body',
                'Eine der häufigsten, aber oft übersehenen Folgen einer Schwangerschaft ist die Rektusdiastase: das Auseinanderweichen der geraden Bauchmuskulatur entlang der Mittellinie. Das kann sich äußern durch:')}
            </p>
            <div className="info-grid two-col" style={{ marginBottom: 8 }}>
              {[
                { t: 'Rückenschmerzen', d: 'Ohne klare Ursache, oft im unteren Rücken.' },
                { t: '„Bauchkugeln"', d: 'Eine Wölbung in der Bauchmitte beim Anspannen.' },
                { t: 'Beckenboden-Beschwerden', d: 'Druckgefühl, Unsicherheit, Inkontinenz.' },
                { t: 'Instabilität', d: 'Allgemeines Gefühl von „schwacher Mitte".' },
              ].map((s) => (
                <div key={s.t} className="info-card tinted">
                  <div style={{
                    fontFamily: 'Fraunces, serif', fontSize: 19, color: 'var(--ink)',
                    marginBottom: 6, fontWeight: 500,
                  }}>{s.t}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-70)' }}>{s.d}</div>
                </div>
              ))}
            </div>
            <p style={{
              fontSize: 15, lineHeight: 1.65, color: 'var(--ink-50)', fontStyle: 'italic', marginTop: 18,
            }}>
              {window.wbText('bauchschmiede.problem.outro',
                'Ohne gezielte Begleitung bleibt eine Rektusdiastase oft jahrelang unbemerkt.')}
            </p>
          </div>
        </section>

        {/* ----- Lösung ----- */}
        <section className="bauchschmiede-section">
          <div className="container" style={{ maxWidth: 880 }}>
            <span className="eyebrow" style={{ color: 'var(--terracotta)', marginBottom: 14, display: 'inline-block' }}>
              ● Die Lösung
            </span>
            <h2 style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(32px, 4.5vw, 48px)', lineHeight: 1.1, letterSpacing: '-0.015em',
              fontVariationSettings: '"opsz" 96, "SOFT" 40',
              marginBottom: 22,
            }}>
              {window.wbT('bauchschmiede.solution.headline',
                'Was ist die [Tupler Technique®]?',
                'var(--terracotta)')}
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink)', marginBottom: 18 }}>
              {window.wbText('bauchschmiede.solution.intro',
                'Entwickelt von der amerikanischen Krankenschwester und Fitnesstrainerin Julie Tupler — weltweit eines der bekanntesten Programme speziell für Rektusdiastase.')}
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-70)', marginBottom: 24 }}>
              {window.wbText('bauchschmiede.solution.body',
                'Der Fokus liegt auf der gezielten Kräftigung der tiefen Bauchmuskulatur — besonders des Musculus transversus abdominis — sowie dem bewussten Schließen der Lücke durch:')}
            </p>
            <div className="info-grid three-col" style={{ marginBottom: 24 }}>
              {[
                { t: 'Übungen', d: 'Sanfte, abgestimmte Bewegungsabläufe — kein Crunchen, kein Pressen.' },
                { t: 'Bauchgurt', d: 'Unterstützt das Schließen der Lücke im Alltag und nachts.' },
                { t: 'Alltagshaltung', d: 'Bewusstheit beim Heben, Tragen, Husten, Aufstehen.' },
              ].map((s) => (
                <div key={s.t} className="info-card">
                  <div style={{
                    fontFamily: 'Fraunces, serif', fontSize: 22, color: 'var(--ink)',
                    marginBottom: 8, fontWeight: 500,
                  }}>{s.t}</div>
                  <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-70)' }}>{s.d}</div>
                </div>
              ))}
            </div>
            <p style={{
              fontSize: 15, lineHeight: 1.65, color: 'var(--ink-50)', fontStyle: 'italic',
            }}>
              {window.wbText('bauchschmiede.solution.outro',
                'Sanft, nicht invasiv und in jedem Stadium der Rückbildung möglich — auch wenn deine Geburt schon länger zurückliegt.')}
            </p>
          </div>
        </section>

        {/* ----- Programm ----- */}
        <section className="bauchschmiede-section">
          <div className="container" style={{ maxWidth: 980 }}>
            <span className="eyebrow" style={{ color: 'var(--terracotta)', marginBottom: 14, display: 'inline-block' }}>
              ● So begleiten wir dich
            </span>
            <h2 style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(32px, 4.5vw, 48px)', lineHeight: 1.1, letterSpacing: '-0.015em',
              fontVariationSettings: '"opsz" 96, "SOFT" 40',
              marginBottom: 22,
            }}>
              {window.wbT('bauchschmiede.programm.headline',
                'Wir nehmen uns [Zeit] für dich.',
                'var(--terracotta)')}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-70)', marginBottom: 28, maxWidth: 720 }}>
              {window.wbText('bauchschmiede.programm.intro',
                'Am Anfang steht eine individuelle Befunderhebung: Wir messen die Weite und Tiefe deiner Rektusdiastase, hören dir zu und schauen gemeinsam, was dein Körper gerade braucht.')}
            </p>

            <div className="info-grid two-col">
              {[
                {
                  step: '01',
                  t: 'Befunderhebung',
                  d: 'Vermessen der Diastase, Anamnese, ehrliches Gespräch über Beschwerden und Ziele.',
                },
                {
                  step: '02',
                  t: 'Grundübungen lernen',
                  d: 'Einführung in die Tupler-Technique®-Übungen — Schritt für Schritt, mit Hands-on-Korrektur.',
                },
                {
                  step: '03',
                  t: 'Bauchgurt-Anleitung',
                  d: 'Wie du den Splint richtig anlegst und im Alltag (auch mit Baby) integrierst.',
                },
                {
                  step: '04',
                  t: 'Alltagstipps',
                  d: 'Heben, Tragen, Aufstehen, Husten — kleine Anpassungen mit großer Wirkung.',
                },
                {
                  step: '05',
                  t: 'Verlaufskontrolle',
                  d: 'Regelmäßiges Messen und Anpassen — du siehst deinen Fortschritt schwarz auf weiß.',
                },
                {
                  step: '06',
                  t: 'Einzel oder Kleingruppe',
                  d: 'Wie es zu dir passt: ganz 1:1 oder mit ein, zwei anderen Frauen im selben Boot.',
                },
              ].map((s) => (
                <div key={s.step} className="info-card">
                  <div style={{
                    color: 'var(--terracotta)', fontSize: 12, fontWeight: 700,
                    letterSpacing: '0.16em', marginBottom: 8,
                  }}>SCHRITT {s.step}</div>
                  <div style={{
                    fontFamily: 'Fraunces, serif', fontSize: 22, color: 'var(--ink)',
                    marginBottom: 8, fontWeight: 500,
                  }}>{s.t}</div>
                  <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-70)' }}>{s.d}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ----- Eignung ----- */}
        <section className="bauchschmiede-section">
          <div className="container" style={{ maxWidth: 880 }}>
            <span className="eyebrow" style={{ color: 'var(--terracotta)', marginBottom: 14, display: 'inline-block' }}>
              ● Für wen
            </span>
            <h2 style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(32px, 4.5vw, 48px)', lineHeight: 1.1, letterSpacing: '-0.015em',
              fontVariationSettings: '"opsz" 96, "SOFT" 40',
              marginBottom: 22,
            }}>
              {window.wbT('bauchschmiede.eignung.headline',
                'Es ist nie zu [spät].',
                'var(--terracotta)')}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-70)', marginBottom: 24, maxWidth: 680 }}>
              {window.wbText('bauchschmiede.eignung.intro',
                'Egal wie deine Geburt verlief, wie lange sie zurückliegt oder wo du gerade stehst — die Bauchschmiede passt sich dir an, nicht umgekehrt.')}
            </p>
            <ul className="checklist">
              <li>Nach vaginaler Geburt oder Kaiserschnitt</li>
              <li>Bei Rückenschmerzen, Haltungsproblemen oder Beckenbodenschwäche</li>
              <li>Wenn der Bauch trotz Rückbildung nicht „zurückgeht"</li>
              <li>Als Ergänzung zur Rückbildungsgymnastik</li>
              <li>Auch wenn deine Geburt schon eine Weile zurückliegt — es ist nie zu spät</li>
            </ul>
            <p style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(20px, 2.2vw, 26px)',
              lineHeight: 1.35, marginTop: 32, color: 'var(--ink)',
              fontVariationSettings: '"opsz" 36, "SOFT" 50',
              maxWidth: 640,
            }}>
              {window.wbT('bauchschmiede.eignung.closing',
                'Du hast [Großes] geleistet. Wir helfen dir, dich wieder ganz zu fühlen.',
                'var(--terracotta)')}
            </p>
          </div>
        </section>

        {/* ----- Kontakt / CTA ----- */}
        <section id="anfragen" className="bauchschmiede-section">
          <div className="container" style={{ maxWidth: 880 }}>
            <span className="eyebrow" style={{ color: 'var(--terracotta)', marginBottom: 14, display: 'inline-block' }}>
              ● Termin anfragen
            </span>
            <h2 style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(32px, 4.5vw, 48px)', lineHeight: 1.1, letterSpacing: '-0.015em',
              fontVariationSettings: '"opsz" 96, "SOFT" 40',
              marginBottom: 24,
            }}>
              {window.wbT('bauchschmiede.cta.headline',
                'Bereit für den [ersten Schritt]?',
                'var(--terracotta)')}
            </h2>

            <div className="info-grid two-col" style={{ marginBottom: 32 }}>
              <div className="info-card">
                <div style={{
                  fontFamily: 'Fraunces, serif', fontSize: 22, color: 'var(--ink)',
                  marginBottom: 14, fontWeight: 500,
                }}>Eckdaten</div>
                <dl className="meta-grid">
                  <dt>Behandlerin</dt>
                  <dd>Dina Stöcker &amp; Franziska Helmbrecht</dd>
                  <dt>Termine</dt>
                  <dd>nach Vereinbarung</dd>
                  <dt>Format</dt>
                  <dd>1:1-Sitzung in unseren Räumen</dd>
                  <dt>Dauer</dt>
                  <dd>6 Wochen</dd>
                </dl>
              </div>
              <div className="info-card">
                <div style={{
                  fontFamily: 'Fraunces, serif', fontSize: 22, color: 'var(--ink)',
                  marginBottom: 14, fontWeight: 500,
                }}>Direkter Kontakt</div>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-70)', marginBottom: 14 }}>
                  {window.wbText('bauchschmiede.cta.contact_intro',
                    'Schreib uns einfach eine kurze Mail — wir melden uns innerhalb weniger Tage mit ersten freien Terminen.')}
                </p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                  <a href="mailto:dina@dieweiberei.de" style={{
                    color: 'var(--terracotta)', fontWeight: 600, fontSize: 15,
                    textDecoration: 'none',
                  }}>dina@dieweiberei.de</a>
                  <a href="mailto:franziska@dieweiberei.de" style={{
                    color: 'var(--terracotta)', fontWeight: 600, fontSize: 15,
                    textDecoration: 'none',
                  }}>franziska@dieweiberei.de</a>
                </div>
              </div>
            </div>

            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center', justifyContent: 'flex-start',
            }}>
              <a href="Die%20Weiberei.html#anfrage?kind=behandlung&title=Tupler%20Technique%201%3A1%20Begleitung" className="btn" style={{
                background: 'var(--terracotta)', color: 'var(--offwhite)', textDecoration: 'none',
              }}>
                Anfrage stellen <span style={{ marginLeft: 4 }}>→</span>
              </a>
              <a href="Die%20Weiberei.html" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
                Zur Übersicht
              </a>
            </div>

            <p style={{
              fontSize: 13, color: 'var(--ink-50)', marginTop: 28, lineHeight: 1.6,
            }}>
              {window.wbText('bauchschmiede.cta.kasse_note',
                'Wir sind ZPP §20 SGB V zertifiziert — die meisten Krankenkassen erstatten ca. 150 € im Jahr. Frag bei Anfrage nach den Details.')}
            </p>
          </div>
        </section>
      </main>

      <footer style={{
        padding: 'clamp(32px, 4vw, 48px) 0',
        background: 'var(--offwhite)',
        borderTop: '1px solid var(--sandstone-border)',
        marginTop: 32,
      }}>
        <div className="container" style={{
          display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'center', justifyContent: 'space-between',
        }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
            <span style={{ fontSize: 13, color: 'var(--ink-50)' }}>
              © Die Weiberei · München-Pasing
            </span>
            {/* Animierter Instagram-Button (Styles: tokens.css .wb-insta).
                Lokale Kopie — diese Seite laedt components.jsx nicht. */}
            <a className="wb-insta" href="https://www.instagram.com/bauchschmiede/" target="_blank" rel="noopener noreferrer">
              <span className="wb-insta-badge" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" strokeWidth="2" strokeLinecap="round">
                  <rect x="2.5" y="2.5" width="19" height="19" rx="5.5" />
                  <circle cx="12" cy="12" r="4.5" />
                  <circle cx="17.5" cy="6.5" r="1.4" fill="#FFFFFF" stroke="none" />
                </svg>
              </span>
              <span style={{ display: 'flex', flexDirection: 'column', gap: 3, alignItems: 'flex-start' }}>
                die Bauchschmiede
                <span className="wb-insta-handle">@bauchschmiede</span>
              </span>
            </a>
          </span>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <a href="Impressum.html" style={{ fontSize: 13, color: 'var(--ink-70)', textDecoration: 'none' }}>Impressum</a>
            <a href="Datenschutz.html" style={{ fontSize: 13, color: 'var(--ink-70)', textDecoration: 'none' }}>Datenschutz</a>
            <a href="Die%20Weiberei.html" style={{ fontSize: 13, color: 'var(--ink-70)', textDecoration: 'none' }}>← Zur Startseite</a>
          </div>
        </div>
      </footer>

      <BackToTop />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<BauchschmiedePage />);