function LoginModal({ open, onClose }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPassword, setShowPassword] = React.useState(false);
  const [forgotHint, setForgotHint] = React.useState(false);

  React.useEffect(() => {
    if (!open) {
      setEmail('');
      setPassword('');
      setShowPassword(false);
      setForgotHint(false);
    }
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const card = '#ffffff';
  const inputBg = '#f5f6f8';
  const muted = '#6b6e78';
  const ink = '#0d0d12';
  const border = '#e6e7ec';

  const onSubmit = (e) => {
    e.preventDefault();
  };

  return (
    <div style={{
      position: 'fixed', inset: 0, zIndex: 100,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 16,
    }}>
      <div
        onClick={onClose}
        style={{
          position: 'absolute', inset: 0,
          background: 'rgba(13,13,18,0.45)',
          backdropFilter: 'blur(4px)',
        }}
      />
      <div
        role="dialog"
        aria-modal="true"
        style={{
          position: 'relative',
          width: '100%', maxWidth: 526,
          background: card,
          borderRadius: 28,
          padding: 36,
          maxHeight: '92vh', overflowY: 'auto',
          color: ink,
          border: `1px solid ${border}`,
          boxShadow: '0 30px 80px -20px rgba(13,13,18,0.25)',
        }}
      >
        <button
          type="button"
          onClick={onClose}
          aria-label="Закрыть"
          style={{
            position: 'absolute', top: 18, right: 18,
            width: 36, height: 36, borderRadius: '50%',
            background: 'transparent', color: muted,
            border: 'none', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}
        >
          <svg width="20" height="20" viewBox="0 0 20 20">
            <path d="M5 5 L15 15 M15 5 L5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
          </svg>
        </button>

        <div style={{ display: 'flex', alignItems: 'center', marginBottom: 20 }}>
          {window.Logo
            ? <window.Logo size={26} href="./" />
            : <img src="uploads/logo.svg" alt="Фидли" style={{ height: 26, width: 'auto' }} />}
        </div>

        <h2 style={{
          fontFamily: "'Martian Grotesk', 'Space Grotesk', 'Manrope', sans-serif",
          fontSize: 32, fontWeight: 500,
          letterSpacing: '-0.04em',
          lineHeight: 1, margin: 0, marginBottom: 10,
          color: ink,
        }}>
          Войти
        </h2>
        <p style={{
          fontSize: 15, color: muted,
          margin: 0, marginBottom: 24, lineHeight: 1.4,
          letterSpacing: '-0.01em',
        }}>
          Чтобы войти, введите вашу почту и пароль.
        </p>

        <form onSubmit={onSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <label htmlFor="login-email" style={{ fontSize: 14, color: muted, letterSpacing: '-0.01em' }}>Почта</label>
            <input
              id="login-email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              placeholder="feedly@larp.larp"
              required
              style={{
                width: '100%', height: 52,
                padding: '0 20px',
                borderRadius: 50,
                background: inputBg,
                border: `2px solid ${border}`,
                color: ink,
                fontSize: 15, fontFamily: 'inherit',
                outline: 'none',
                transition: 'border-color 0.15s',
              }}
              onFocus={(e) => e.target.style.borderColor = '#7A60FF'}
              onBlur={(e) => e.target.style.borderColor = border}
            />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <label htmlFor="login-password" style={{ fontSize: 14, color: muted, letterSpacing: '-0.01em' }}>Пароль</label>
              <button
                type="button"
                onClick={() => setForgotHint(true)}
                style={{
                  background: 'none', border: 'none', cursor: 'pointer',
                  color: muted, fontSize: 14, fontFamily: 'inherit',
                  textDecoration: 'underline', padding: 0,
                  letterSpacing: '-0.01em',
                }}
              >
                Забыли пароль?
              </button>
            </div>
            <div style={{ position: 'relative' }}>
              <input
                id="login-password"
                type={showPassword ? 'text' : 'password'}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="••••••••"
                required
                style={{
                  width: '100%', height: 52,
                  padding: '0 50px 0 20px',
                  borderRadius: 50,
                  background: inputBg,
                  border: `2px solid ${border}`,
                  color: ink,
                  fontSize: 15, fontFamily: 'inherit',
                  outline: 'none',
                  transition: 'border-color 0.15s',
                }}
                onFocus={(e) => e.target.style.borderColor = '#7A60FF'}
                onBlur={(e) => e.target.style.borderColor = border}
              />
              <button
                type="button"
                onClick={() => setShowPassword(s => !s)}
                aria-label={showPassword ? 'Скрыть пароль' : 'Показать пароль'}
                style={{
                  position: 'absolute', right: 16, top: '50%',
                  transform: 'translateY(-50%)',
                  background: 'none', border: 'none', cursor: 'pointer',
                  color: muted, padding: 4,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}
              >
                {showPassword ? (
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <path d="M3 3 L21 21 M10.6 10.6 A2 2 0 0 0 13.4 13.4 M9.4 5.2 A10 10 0 0 1 21 12 c-1.1 1.7-2.7 3.2-4.4 4.4 M6.6 6.6 C4.4 8 2.6 9.9 1.5 12 c2.7 4.4 6.7 7 10.5 7 1.6 0 3.2-.4 4.6-1.1" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                ) : (
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <path d="M1.5 12 C 4.3 7.6 8 5 12 5 s 7.7 2.6 10.5 7 C 19.7 16.4 16 19 12 19 S 4.3 16.4 1.5 12 Z" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                    <circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.8" fill="none" />
                  </svg>
                )}
              </button>
            </div>
            {forgotHint && (
              <div style={{
                marginTop: 8, padding: '12px 16px', borderRadius: 14,
                background: 'rgba(122,96,255,0.08)',
                border: '1px solid rgba(122,96,255,0.28)',
                fontSize: 13.5, color: '#4a3bc7', lineHeight: 1.45,
              }}>
                Для восстановления пароля обратитесь к вашему менеджеру.
              </div>
            )}
          </div>

          <button
            type="submit"
            style={{
              marginTop: 14,
              height: 60, width: '100%',
              padding: '0 20px',
              borderRadius: 48,
              border: 'none',
              background: 'linear-gradient(90deg, #7768F3, #B997FF)',
              color: '#fff',
              fontSize: 16, fontWeight: 500, letterSpacing: '-0.01em',
              fontFamily: 'inherit',
              cursor: 'pointer',
              boxShadow: 'inset 2px 2px 9px rgba(255,255,255,0.13), 0 14px 40px -16px rgba(119,104,243,0.6)',
              transition: 'opacity 0.15s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.opacity = '0.9'}
            onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}
          >
            Войти в аккаунт
          </button>
        </form>
      </div>
    </div>
  );
}

window.LoginModal = LoginModal;