// ---------- Einblicke gallery page ----------
// Photo grid (mosaic) of the Weiberei spaces, ceremonies, and courses, plus
// a long-form philosophy section. Picsum-seeded for stable dummy photos —
// swap each `src` for real photography by editing the GALLERY constant.

const { useState, useEffect } = React;

const GALLERY = [
{ id: 'studio', area: 'tall', label: 'Studio', caption: 'Yoga-Raum mit Holzboden und großen Fenstern.' },
{ id: 'kreis', area: 'wide', label: 'Frauenkreis', caption: 'Im Kreis, im Kerzenschein.' },
{ id: 'tee', area: 'sq', label: 'Empfang', caption: 'Tee, Decken, Ankommen.' },
{ id: 'kurs-rueck', area: 'sq', label: 'Rückbildung', caption: 'Aufrichtung mit Baby.' },
{ id: 'praxis', area: 'tall', label: 'Praxis', caption: 'Behandlungsraum für 1:1-Sitzungen.' },
{ id: 'raeucher', area: 'wide', label: 'Räucherkreis', caption: 'Pflanzenwissen und Stille.' },
{ id: 'malen', area: 'sq', label: 'Malgruppe', caption: 'Intuitives Malen in der Schwangerschaft.' },
{ id: 'kueche', area: 'sq', label: 'Küche', caption: 'Geteilter Tisch nach dem Kurs.' },
{ id: 'pflanzen', area: 'tall', label: 'Pflanzen', caption: 'Lebendiger Raum, lebendige Ecken.' },
{ id: 'baby', area: 'wide', label: 'Babymassage', caption: 'Berührung, Bindung, Entlastung.' },
{ id: 'flur', area: 'sq', label: 'Flur', caption: 'Garderobe, Pinnwand, Ankündigungen.' },
{ id: 'sonnwende', area: 'sq', label: 'Sonnenwende', caption: 'Rituale durch das Jahr.' }];


const photoUrl = (id, w, h) =>
`https://picsum.photos/seed/${encodeURIComponent('weiberei-galerie-' + id)}/${w}/${h}`;

const EinblickePage = () => {
  const [open, setOpen] = useState(null); // open lightbox slide

  // Lightbox keyboard nav
  useEffect(() => {
    if (open == null) return undefined;
    const onKey = (e) => {
      if (e.key === 'Escape') setOpen(null);
      if (e.key === 'ArrowRight') setOpen((i) => (i + 1) % GALLERY.length);
      if (e.key === 'ArrowLeft') setOpen((i) => (i - 1 + GALLERY.length) % GALLERY.length);
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  return (
    <>
      {/* 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, 4vw, 48px)' }}>
          <div className="container" style={{ maxWidth: 760 }}>
            <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-block' }}>
              ● Einblicke · Bodenseestraße 94, München-Pasing
            </span>
            <h1 style={{
              fontSize: 'clamp(40px, 6vw, 64px)', lineHeight: 1.05, letterSpacing: '-0.02em',
              fontVariationSettings: '"opsz" 96, "SOFT" 50, "WONK" 1',
              marginTop: 12, marginBottom: 18,
              textWrap: 'balance'
            }}>
              Wo wir{' '}
              <em className="bacalisties" style={{
                color: 'var(--heather-plum)',
              }}>einander</em> tragen.
            </h1>
            <p className="lead" style={{ maxWidth: 600 }}>
              Heller Holzboden, Pflanzen, Decken, Tee. Ein Raum, in dem man ankommen kann —
              mit Bauch, mit Kind, mit allem, was gerade da ist.
            </p>
          </div>
        </section>

        {/* Photo mosaic */}
        <section style={{ padding: '0 0 clamp(56px, 8vw, 96px)' }}>
          <div className="container">
            <div className="einblicke-grid">
              {GALLERY.map((g, i) =>
              <button
                key={g.id}
                type="button"
                className={`einblicke-tile is-${g.area}`}
                onClick={() => setOpen(i)}
                aria-label={`${g.label} – ${g.caption}`}
                style={{
                  background: `url("${photoUrl(g.id, 800, 900)}") center / cover var(--sandstone-soft)`
                }}>
                  <span className="einblicke-tile-meta">
                    <span className="einblicke-tile-label">{g.label}</span>
                    <span className="einblicke-tile-caption">{g.caption}</span>
                  </span>
                </button>
              )}
            </div>
          </div>
        </section>

        {/* Philosophy text segment */}
        <section style={{
          padding: 'clamp(56px, 8vw, 96px) 0',
          background: 'var(--sandstone-soft)',
          borderTop: '1px solid rgba(196,169,143,0.35)',
          borderBottom: '1px solid rgba(196,169,143,0.35)'
        }}>
          <div className="container" style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr)',
            gap: 'clamp(36px, 5vw, 64px)',
            maxWidth: 1080, margin: '0 auto'
          }}>
            <div className="philosophy-grid">
              <div>
                <span className="eyebrow">● Philosophie</span>
                <h2 style={{
                  fontFamily: 'Fraunces, serif',
                  fontSize: 'clamp(30px, 4vw, 44px)', lineHeight: 1.1, letterSpacing: '-0.015em',
                  fontVariationSettings: '"opsz" 96, "SOFT" 50, "WONK" 1',
                  marginTop: 12,
                  textWrap: 'balance'
                }}>
                  Von Weibern für Weiber.{' '}
                  <em className="bacalisties" style={{
                    color: 'var(--heather-plum)',
                  }}>Miteinander</em>.
                </h2>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-70)' }}>
                  Die Weiberei ist kein Studio, kein Gesundheitszentrum, kein Mama-Café. Wir sind ein 
                  <strong style={{ color: 'var(--ink)' }}>
                  Frauenort</strong>, an dem Hebammen, Yogalehrerinnen, Osteopathinnen und
                  Coaches unter einem Dach arbeiten.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-70)' }}>
                  Hier wird nichts wegerklärt. Schwangerschaft, Geburt, Wochenbett, Rückbildung,
                  Zyklus, Wechseljahre — alles bekommt seinen Platz und seine Zeit. Wir glauben,
                  dass Frauen sich gegenseitig durch Lebensphasen tragen, wenn sie einen Raum
                  dafür haben. Und genau das wollen wir sein: <em>der Raum dafür</em>.
                </p>
                <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-70)' }}>
                  Pasing, Bodenseestraße 94. Hereinspaziert.
                </p>
              </div>
            </div>

            {/* Pull-quote */}
            <figure className="philosophy-quote">
              <blockquote style={{
                fontFamily: 'Fraunces, serif',
                fontSize: 'clamp(22px, 2.6vw, 30px)',
                lineHeight: 1.3, letterSpacing: '-0.01em',
                color: 'var(--ink)',
                fontVariationSettings: '"opsz" 72, "SOFT" 60, "WONK" 1',
                fontStyle: 'italic',
                margin: 0, textWrap: 'balance'
              }}>
                „Wir machen keine Kurse für Frauen. Wir bauen einen Ort,{' '}
                <span style={{ color: 'var(--heather-plum)' }}>an dem Frauen sich gegenseitig kennen</span>."
              </blockquote>
              <figcaption style={{
                marginTop: 20, fontSize: 13, color: 'var(--ink-50)',
                letterSpacing: '0.06em', textTransform: 'uppercase'
              }}>
                Franziska Helmbrecht & Dina Stöcker — Gründerinnen
              </figcaption>
            </figure>
          </div>
        </section>

        {/* CTA back to homepage */}
        <section style={{ padding: 'clamp(56px, 8vw, 96px) 0' }}>
          <div className="container" style={{
            textAlign: 'center', maxWidth: 640, margin: '0 auto'
          }}>
            <h2 style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 'clamp(28px, 3.5vw, 40px)', lineHeight: 1.15,
              fontVariationSettings: '"opsz" 96, "SOFT" 50, "WONK" 1',
              marginBottom: 16, textWrap: 'balance'
            }}>
              Komm vorbei, wenn dir danach ist.
            </h2>
            <p className="lead" style={{ marginBottom: 28 }}>
              Du musst nicht buchen, um da zu sein. Hebammensprechstunde, Tee,
              ein erstes Gespräch — wir freuen uns.
            </p>
            <a href="Die%20Weiberei.html#angebot" className="btn btn-primary" style={{ textDecoration: 'none' }}>
              Angebot ansehen <span>→</span>
            </a>
          </div>
        </section>
      </main>

      {/* Lightbox */}
      {open != null &&
      <div
        onClick={() => setOpen(null)}
        style={{
          position: 'fixed', inset: 0, zIndex: 100,
          background: 'rgba(42,34,29,0.88)',
          backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: '40px 24px'
        }}>
          <figure
          onClick={(e) => e.stopPropagation()}
          style={{
            maxWidth: 'min(1200px, 92vw)',
            maxHeight: 'calc(100vh - 80px)',
            margin: 0,
            display: 'flex', flexDirection: 'column', gap: 16
          }}>
            <img
            src={photoUrl(GALLERY[open].id, 1600, 1200)}
            alt={GALLERY[open].caption}
            style={{
              width: '100%', height: 'auto',
              maxHeight: 'calc(100vh - 200px)',
              objectFit: 'contain',
              borderRadius: 8,
              boxShadow: '0 30px 80px rgba(0,0,0,0.4)'
            }} />
          
            <figcaption style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            gap: 16, color: 'var(--offwhite)', fontSize: 14
          }}>
              <span>
                <strong style={{
                fontFamily: 'Fraunces, serif', fontSize: 18, fontWeight: 500,
                marginRight: 10
              }}>{GALLERY[open].label}</strong>
                <span style={{ opacity: 0.8 }}>{GALLERY[open].caption}</span>
              </span>
              <span style={{ opacity: 0.7, fontFamily: 'Fraunces, serif' }}>
                {String(open + 1).padStart(2, '0')} / {String(GALLERY.length).padStart(2, '0')}
              </span>
            </figcaption>
          </figure>

          {/* Close button */}
          <button type="button" onClick={() => setOpen(null)} aria-label="Schließen"
        style={{
          position: 'absolute', top: 18, right: 22,
          width: 44, height: 44, borderRadius: 999,
          background: 'rgba(250,246,241,0.14)',
          border: '1px solid rgba(250,246,241,0.32)',
          color: 'var(--offwhite)', fontSize: 22, lineHeight: 1,
          cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>×</button>

          {/* Prev / Next */}
          {[
        { dir: -1, side: 'left', symbol: '‹' },
        { dir: 1, side: 'right', symbol: '›' }].
        map(({ dir, side, symbol }) =>
        <button key={side} type="button"
        onClick={(e) => {
          e.stopPropagation();
          setOpen((i) => (i + dir + GALLERY.length) % GALLERY.length);
        }}
        aria-label={dir < 0 ? 'Vorheriges Bild' : 'Nächstes Bild'}
        style={{
          position: 'absolute', top: '50%', [side]: 22,
          transform: 'translateY(-50%)',
          width: 48, height: 48, borderRadius: 999,
          background: 'rgba(250,246,241,0.14)',
          border: '1px solid rgba(250,246,241,0.32)',
          color: 'var(--offwhite)', fontSize: 26, lineHeight: 1,
          cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>{symbol}</button>
        )}
        </div>
      }
    </>);

};

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