// YouTube動画再生モーダル（共通）
function VideoModal({ planner, onClose }) {
  React.useEffect(() => {
    if (!planner) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [planner, onClose]);

  if (!planner) return null;

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(30, 24, 18, 0.78)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '24px',
        animation: 'mlFadeIn 180ms ease-out',
      }}
    >
      <style>{`
        @keyframes mlFadeIn { from { opacity: 0 } to { opacity: 1 } }
        @keyframes mlScaleIn { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
      `}</style>
      <button
        onClick={onClose}
        aria-label="閉じる"
        style={{
          position: 'absolute', top: 20, right: 24,
          width: 44, height: 44, borderRadius: 22,
          border: 'none', cursor: 'pointer',
          background: 'rgba(255,255,255,0.1)',
          color: '#fff', fontSize: 20,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'background 150ms',
        }}
        onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.2)'}
        onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}
      >
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 3l10 10M13 3L3 13"/></svg>
      </button>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: '100%', maxWidth: 1100,
          animation: 'mlScaleIn 220ms cubic-bezier(.2,.7,.3,1)',
        }}
      >
        <div style={{
          position: 'relative',
          width: '100%',
          aspectRatio: '16 / 9',
          background: '#000',
          borderRadius: 4,
          overflow: 'hidden',
          boxShadow: '0 20px 80px rgba(0,0,0,0.5)',
        }}>
          <iframe
            src={`https://www.youtube.com/embed/${planner.youtube}?autoplay=1&rel=0`}
            title={`${planner.name} インタビュー`}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            style={{ width: '100%', height: '100%', border: 'none' }}
          />
        </div>
        <div style={{ marginTop: 20, color: '#fff', textAlign: 'center' }}>
          <div style={{ fontSize: 13, letterSpacing: '0.15em', opacity: 0.6, marginBottom: 6 }}>
            {planner.role.toUpperCase()} · {planner.id}
          </div>
          <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '0.02em' }}>
            {planner.name}「{planner.tagline}」
          </div>
        </div>
      </div>
    </div>
  );
}

window.VideoModal = VideoModal;