// ---------- Behandlung detail widget ----------
// Visual analog to WBCourseDetail — same modal chrome, image strip and color
// band — but tailored to 1:1 treatments (Kursleitung, Kontakt, kein Termin-Plan).

const { useEffect: _wbBhUseEffect } = React;

const _wbBhCatById = (() => {
  const cats = window.WB_CATEGORIES || [];
  return Object.fromEntries(cats.map(c => [c.id, c]));
})();

const _BhTerm = ({ children }) => (
  <dt style={{ color: 'var(--ink-50)', fontWeight: 500 }}>{children}</dt>
);
const _BhDef = ({ children }) => (
  <dd style={{ color: 'var(--ink)', margin: 0 }}>{children}</dd>
);

// Fallback blurb so tiles without a long-form description still feel fleshed-out.
const _wbBhDefaultBlurb = (item, cat) => {
  const phrase = (cat && cat.title) || 'Behandlungen';
  return `Persönliche 1:1-Begleitung in den Räumen der Weiberei. Termine direkt mit ${item.leader} — ganz in deinem Tempo. Teil unseres Angebots im Bereich „${phrase}".`;
};

const WBBehandlungDetail = ({ item, onClose }) => {
  _wbBhUseEffect(() => {
    if (!item) return undefined;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [item, onClose]);

  if (!item) return null;
  const cat = _wbBhCatById[item.cat] || { tone: { bg: '#5C4A3E', text: '#FAF6F1' }, title: 'Behandlung' };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 2000,
      background: 'rgba(42,34,29,0.45)',
      backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 24, animation: 'wbFadeIn 200ms ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: 'var(--offwhite)',
        borderRadius: 18,
        width: '100%', maxWidth: 560,
        maxHeight: 'calc(100vh - 48px)',
        overflowY: 'auto',
        boxShadow: '0 32px 80px rgba(42,34,29,0.32)',
        animation: 'wbPop 240ms var(--ease)',
        position: 'relative',
      }}>
        <div style={{
          background: cat.tone.bg, color: cat.tone.text,
          padding: '24px 28px 20px',
          borderRadius: '18px 18px 0 0',
          position: 'sticky', top: 0, zIndex: 2,
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            alignItems: 'center', marginBottom: 14,
          }}>
            <span style={{
              fontSize: 11, fontWeight: 600, letterSpacing: '0.12em',
              textTransform: 'uppercase', opacity: 0.85,
            }}>{cat.title}</span>
            <button type="button" onClick={onClose} aria-label="Schließen" style={{
              width: 32, height: 32, borderRadius: 999,
              background: 'rgba(255,255,255,0.2)',
              color: cat.tone.text, fontSize: 16,
              border: 'none', cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>×</button>
          </div>
          <h2 style={{
            fontFamily: 'Fraunces, serif', fontWeight: 400,
            fontSize: 'clamp(26px, 4vw, 32px)', lineHeight: 1.1,
            color: cat.tone.text,
            fontVariationSettings: '"opsz" 96, "SOFT" 60, "WONK" 1',
          }}>{item.title}</h2>
        </div>

        <div style={{ padding: '0 0 26px' }}>
          {/* Dummy hero image — keyed off the treatment id so each tile gets a stable photo */}
          <div style={{
            width: '100%', aspectRatio: '16/9',
            background: cat.tone.bg,
            position: 'relative', overflow: 'hidden',
            marginBottom: 20,
          }}>
            <img
              src={`https://picsum.photos/seed/${encodeURIComponent('weiberei-bh-' + item.id)}/720/405`}
              alt=""
              loading="lazy"
              style={{
                width: '100%', height: '100%', objectFit: 'cover', display: 'block',
                filter: 'saturate(0.85) contrast(0.96)',
              }}
              onError={(e) => { e.currentTarget.style.display = 'none'; }}
            />
            <div style={{
              position: 'absolute', inset: 0,
              background: `linear-gradient(180deg, transparent 40%, ${cat.tone.bg} 130%)`,
              mixBlendMode: 'multiply', opacity: 0.35,
            }} />
          </div>

          <div style={{ padding: '0 28px' }}>
            <p style={{
              fontFamily: 'Fraunces, serif',
              fontSize: 17, lineHeight: 1.5,
              color: 'var(--ink)',
              marginBottom: 14,
              fontVariationSettings: '"opsz" 36, "SOFT" 50, "WONK" 0',
            }}>{item.body}</p>
            <p style={{
              fontSize: 14, lineHeight: 1.65,
              color: 'var(--ink-70)', marginBottom: 22,
            }}>{item.blurb || _wbBhDefaultBlurb(item, cat)}</p>

            <dl style={{
              display: 'grid', gridTemplateColumns: '120px 1fr',
              gap: '12px 16px', fontSize: 14, marginBottom: 26,
            }}>
              <_BhTerm>Behandlerin</_BhTerm>
              <_BhDef>{item.leader}</_BhDef>
              <_BhTerm>Termine</_BhTerm>
              <_BhDef>nach Vereinbarung</_BhDef>
              <_BhTerm>Format</_BhTerm>
              <_BhDef>1:1-Sitzung in unseren Räumen</_BhDef>
              <_BhTerm>Kontakt</_BhTerm>
              <_BhDef><strong style={{ color: 'var(--ink)' }}>{item.contact}</strong></_BhDef>
            </dl>

            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <button type="button"
                onClick={() => {
                  onClose();
                  if (window.__WB_INQUIRY_AVAILABLE) {
                    window.dispatchEvent(new CustomEvent('wb-open-inquiry', {
                      detail: { title: item.title, kind: 'behandlung' },
                    }));
                  } else {
                    const params = new URLSearchParams({ kind: 'behandlung', title: item.title });
                    window.location.href = 'Die Weiberei.html#anfrage?' + params.toString();
                  }
                }}
                className="btn btn-primary" style={{ flex: '1 1 auto' }}>
                Termin anfragen →
              </button>
              <button type="button" onClick={onClose} className="btn btn-secondary"
                style={{ flex: '0 0 auto' }}>Zurück</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.WBBehandlungDetail = WBBehandlungDetail;