const NS = () => window.ZelgerOsteopathieDesignSystem_4d713d;

/**
 * VideoFeature — calm rounded video card with a poster image and a centered play button.
 * Click swaps the poster for an inline <video controls autoPlay>.
 * Props: src, poster, ratio (default '16/9'), rounded (default true)
 */
function VideoFeature({ src, poster, ratio = '16 / 9', rounded = true }) {
  const [playing, setPlaying] = React.useState(false);
  return (
    <div style={{
      position: 'relative', width: '100%', aspectRatio: ratio,
      borderRadius: rounded ? 'var(--radius-xl)' : 0, overflow: 'hidden',
      boxShadow: 'var(--shadow-lg)', background: 'var(--brand-ink)',
    }}>
      {playing ? (
        <video
          src={src} controls autoPlay playsInline
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', background: '#000' }}
        />
      ) : (
        <button
          onClick={() => setPlaying(true)}
          aria-label="Video abspielen"
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%', padding: 0, border: 'none',
            cursor: 'pointer', background: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}
          onMouseEnter={(e) => { const p = e.currentTarget.querySelector('.vf-play'); if (p) { p.style.transform = 'scale(1.06)'; p.style.background = 'var(--accent)'; p.style.color = '#fff'; } }}
          onMouseLeave={(e) => { const p = e.currentTarget.querySelector('.vf-play'); if (p) { p.style.transform = 'none'; p.style.background = 'rgba(255,255,255,0.92)'; p.style.color = 'var(--accent-hover)'; } }}
        >
          <img src={poster} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
          <span style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(28,24,21,0.05), rgba(28,24,21,0.32))' }}></span>
          <span className="vf-play" style={{
            position: 'relative', width: '84px', height: '84px', borderRadius: 'var(--radius-pill)',
            background: 'rgba(255,255,255,0.92)', color: 'var(--accent-hover)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: 'var(--shadow-lg)', transition: 'transform var(--dur-base) var(--ease-calm), background var(--dur-base) var(--ease-calm), color var(--dur-base) var(--ease-calm)',
          }}>
            <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: '4px' }}><path d="M8 5v14l11-7z"/></svg>
          </span>
        </button>
      )}
    </div>
  );
}

/**
 * VideoLightbox — shared blurred overlay that plays a video. Controlled via `open`/`onClose`.
 */
function VideoLightbox({ src, open, onClose }) {
  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') onClose(); }
    if (open) { document.addEventListener('keydown', onKey); }
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 80, display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'rgba(20,16,13,0.66)', backdropFilter: 'blur(8px)', padding: '32px',
        animation: 'vmbFade var(--dur-base) var(--ease-calm)',
      }}
    >
      <div onClick={(e) => e.stopPropagation()} style={{ position: 'relative', width: 'min(960px, 100%)' }}>
        <button onClick={onClose} aria-label="Schließen" style={{
          position: 'absolute', top: '-46px', right: 0, width: '38px', height: '38px', borderRadius: 'var(--radius-pill)',
          border: 'none', cursor: 'pointer', background: 'rgba(255,255,255,0.16)', color: '#fff',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '20px',
        }}>✕</button>
        <video src={src} controls autoPlay playsInline style={{ width: '100%', borderRadius: 'var(--radius-lg)', display: 'block', boxShadow: 'var(--shadow-lg)', background: '#000' }} />
      </div>
    </div>
  );
}

/**
 * HeroVideoImage — an image that opens its video in the lightbox on click,
 * with a play button overlaid and an optional caption pill.
 * Props: src (video), poster (image), alt, caption
 */
function HeroVideoImage({ src, poster, alt = '', caption }) {
  const [open, setOpen] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  return (
    <React.Fragment>
      <button
        onClick={() => setOpen(true)}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        aria-label="Willkommensvideo abspielen"
        style={{
          position: 'relative', display: 'block', width: '100%', aspectRatio: '4 / 5', padding: 0, border: 'none',
          cursor: 'pointer', background: 'var(--brand-ink)', borderRadius: 'var(--radius-xl)', overflow: 'hidden',
          boxShadow: 'var(--shadow-lg)',
        }}
      >
        <img src={poster} alt={alt} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transform: hover ? 'scale(1.03)' : 'none', transition: 'transform var(--dur-slow) var(--ease-calm)' }} />
        <span style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(28,24,21,0.04) 40%, rgba(28,24,21,0.42))' }}></span>
        <span style={{
          position: 'absolute', top: '50%', left: '50%', transform: `translate(-50%, -50%) scale(${hover ? 1.08 : 1})`,
          width: '88px', height: '88px', borderRadius: 'var(--radius-pill)',
          background: hover ? 'var(--accent)' : 'rgba(255,255,255,0.94)', color: hover ? '#fff' : 'var(--accent-hover)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-lg)',
          transition: 'transform var(--dur-base) var(--ease-calm), background var(--dur-base) var(--ease-calm), color var(--dur-base) var(--ease-calm)',
        }}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: '4px' }}><path d="M8 5v14l11-7z"/></svg>
        </span>
        {caption && (
          <span style={{
            position: 'absolute', left: '20px', bottom: '20px', display: 'inline-flex', alignItems: 'center', gap: '8px',
            fontFamily: 'var(--font-display)', fontSize: 'var(--text-xs)', fontWeight: 500, letterSpacing: 'var(--tracking-wide)',
            textTransform: 'uppercase', color: '#fff', background: 'rgba(28,24,21,0.42)', backdropFilter: 'blur(4px)',
            padding: '8px 14px', borderRadius: 'var(--radius-pill)',
          }}>{caption}</span>
        )}
      </button>
      <VideoLightbox src={src} open={open} onClose={() => setOpen(false)} />
    </React.Fragment>
  );
}

/**
 * VideoModalButton — a quiet play link (icon + label) that opens the video
 * in a calm, blurred lightbox overlay. Used for the hero welcome video.
 */
function VideoModalButton({ src, label = 'Video ansehen', sub }) {
  const [open, setOpen] = React.useState(false);
  return (
    <React.Fragment>
      <button
        onClick={() => setOpen(true)}
        style={{
          display: 'inline-flex', alignItems: 'center', gap: '14px', cursor: 'pointer',
          background: 'none', border: 'none', padding: '6px 4px', font: 'inherit', textAlign: 'left',
        }}
        onMouseEnter={(e) => { const c = e.currentTarget.querySelector('.vmb-circle'); if (c) { c.style.transform = 'scale(1.08)'; c.style.background = 'var(--accent)'; c.style.color = '#fff'; } }}
        onMouseLeave={(e) => { const c = e.currentTarget.querySelector('.vmb-circle'); if (c) { c.style.transform = 'none'; c.style.background = 'var(--surface-card)'; c.style.color = 'var(--accent-hover)'; } }}
      >
        <span className="vmb-circle" style={{
          width: '52px', height: '52px', borderRadius: 'var(--radius-pill)', flex: '0 0 auto',
          background: 'var(--surface-card)', color: 'var(--accent-hover)', boxShadow: 'var(--shadow-md)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'transform var(--dur-base) var(--ease-calm), background var(--dur-base) var(--ease-calm), color var(--dur-base) var(--ease-calm)',
        }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: '3px' }}><path d="M8 5v14l11-7z"/></svg>
        </span>
        <span style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)', fontWeight: 500, letterSpacing: 'var(--tracking-wide)', textTransform: 'uppercase', color: 'var(--text-strong)' }}>{label}</span>
          {sub && <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-xs)', color: 'var(--text-faint)', marginTop: '2px' }}>{sub}</span>}
        </span>
      </button>
      <VideoLightbox src={src} open={open} onClose={() => setOpen(false)} />
    </React.Fragment>
  );
}